www.webdeveloper.com
Results 1 to 2 of 2

Thread: IE CSS Position Absolute-ly useless..

  1. #1
    Join Date
    Feb 2011
    Posts
    10

    IE CSS Position Absolute-ly useless..

    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.
    Last edited by ImGreg; 03-29-2011 at 02:52 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles