SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member nlogic's Avatar
    Join Date
    Sep 2003
    Location
    Cincinnati, Ohio, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE5.5+ bug?--bad width inheritance in unordered lists

    I've been banging my head against the wall over this and just can't figure it out. I'm hoping someone here can help me out.

    The width of an absolutely positioned element should equal the width of its nearest positioned ancestor. It seems to me, then, that an absolutely positioned unordered list should inherit the width of the unordered list containing it, provided that the parent list is positioned and its intervening list item is not. In the code below, though, IE sets the nested UL's width to the width of its sibling anchor element, not the UL containing both of them. (In the following code, the green box should be as wide as the pink box, not the purple box--excluding box model errors.)

    I get the incorrectly calculated width in IE5.5+/Win but not IE5.0/Win or Mozilla.

    Am I missing something? I couldn't find a reference to this anywhere.

    Thanks

    Code:
    #nav,#navul{list-style:none;padding:0;border:5pxsolidpink;margin:0;width:100%;position:relative;}
    #navli{float:left;padding:0;border:0;margin:0;padding-right:10px;border:5pxsolidpurple;}
    #navlia{display:block;position:relative;background:#EAEAFF;border:5pxsolidyellow;margin:0px;bottom:-5px;z-index:100;}
    #navlia#curPage{border-bottom-color:#EAEAFF;}
    #navul,#navli.curPageulul{display:none;}
    #navli.curPageul{background:#EAEAFF;display:block;position:absolute;border:5pxsolidgreen;width:100%;}
     
    <ulid="nav"><li><ahref="#">One</a></li><liclass="curPage"><aid="curPage"class="hasKids"href="#">Two</a><ul><li><ahref="#">TwoA</a></li><li><ahref="#">TwoB</a></li><li><ahref="#">TwoC</a></li></ul></li><li><ahref="#">Three</a></li><li><ahref="#">Four</a></li></ul>
    
    

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It does look like a bug in ie5.5. (strange that ie5 is ok though).

    It seems as you say that ie 5.5. takes its width from its containing block which is the li element that surrounds it. (Whether this is incorrect or not is hard to find out as my books say that the width of an element is defined by its container where width is explicitly set, if not its treated as auto.)

    I notice that if you change this part:
    Code:
    #nav,#navul{list-style:none;padding:0;border:5pxsolidpink;margin:0;width:100%;position:relative;}
    and then separate them without the width in the #navul.
    Code:
    #nav{list-style:none;padding:0;border:5px solid pink;margin:0;width:100%;position:relative;}
    #nav ul{list-style:none;padding:0;border:5px solid pink;margin:0;}
    Then ie5.5 displays the inner ul horizonatlly ok although it doen't extend the outer border to 100% (but I assume that was for example anyway).

    Paul




  3. #3
    SitePoint Member nlogic's Avatar
    Join Date
    Sep 2003
    Location
    Cincinnati, Ohio, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    http://www.svendtofte.com/code/max_width_in_ie/

    Paul,
    Thanks for the reply. I wasn't able to see any difference in IE5.5 or 6 using the changes you suggested, but I did find a workaround, although it might be of limited use. Working off an idea from an IE max-width hack (http://www.svendtofte.com/code/max_width_in_ie/), I used an IE-only dynamic expression to set the width explicitly for IE in script. So I changed:
    Code:
     
    #navli.curPageul{background:#EAEAFF;display:block;position:absolute;border:5pxsolidgreen;width:100%;}
    to
    Code:
     
    #navli.curPageul{background:#EAEAFF;display:block;position:absolute;border:5pxsolidgreen;width:100%;_width:expression(document.body.clientWidth);}
    ...basically just added the last line, and hid it from non-IE with the underscore just in case, although "expression()" isn't supposed to bother other browsers. Kludgy, and won't work in IE4, but it does the trick!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I wasn't able to see any difference in IE5.5 or 6 using the changes you suggested,
    Hmm.... sorry I must have changed something else when I was messing around with it (I should have posted all the code.

    Never mind your solution is probably better as the one I did wasn't 100% correct.

    Paul


Bookmarks

Posting Permissions

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