IE CSS Position Absolute-ly useless..

[ImGreg]

Hey again everyone,

I'm bashing my head off the wall again bcuz of these IE bugs I keep making somehow. So help is really appreciated.

I'm looking to have a table where there is a fixed column on the left with a bunch of columns that are horizontally scrollable beside it. (basically as seen below)

keep.| these.....scrollable....**insert many more columns here**
this..| columns...if
here.| will..........IE
plz...| be...........WORKS!
.......<---------------------------------->

this code in my css will make the column on the left be fixed in place regardless of scrolling (for Firefox and Chrome, not IE..)
.headcol {position:absolute;
left:0; top:auto; width:140; text-align:right;
margin-top:-3px; padding-right:4px;}

this is the general <div> i've used for the table:
.gdiv { width: 1400px;
overflow-x:scroll;
margin-left:10em;
overflow-y:visible;
padding-bottom:1px;
}

There must be a way around this annoyance. I was thinking of doing some browser specific coding, but i'd rather keep to simplicity and have something work for all browsers.

Edit: I should add that when i run this on IE all the text all shoes up in one line and just overlaps itself for every new line. i guess logically this makes sense, but how can i work around it?

any thoughts?

Thanks!
IM Greg.

[Eye for Video]

I'm not so sure that what you are seeing is a bug... IE may be working just fine...
are you sure you understand the "parent" rule as it applies to elements with a declared position?
This old post covers how that rule applies:

One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So

Code:
#flash {
z-index:5;
}
will not work without ALSO giving it a declare position.
But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

So be sure to give a declared position to both the parent and the child <div>.

I realize you are not working with z-indexing but the "parent" rule still applies.
Perhaps what you are really looking for is position:fixed:
http://www.w3schools.com/css/pr_class_position.asp
Best wishes,
Eye for Video
www.cidigitalmedia.com