SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Free Geek computerages's Avatar
    Join Date
    Oct 2004
    Location
    /dev/null
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry ie makes menus look uglier than hell

    Hello, CSS folks at SP,

    I am writing this thread from the City that never sleeps, and my problem with IE is also taking my sleep away.

    Following web page: http://zixan.info/junk/css1/ appears well in all the browsers except IE. I have tested it in FF, Chrome, and Safari, and none of them are giving me a headache but only poor IE.

    Any advice?

    Thank you!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, in IE6 the items are expanding full width because hwenever a widthless float in conjunction with a child with haslayout, the haslayout element will stretch 100% thus pushing the float wide, mimicking IE5mac behavior.

    Since you are using <b>'s to make the rounded corners, removing the layotu (the height) is not at all feasible, so you cna set a width on hte <li>'s.
    Code:
    ul#nav li
    {
    	width:100px;/*bug workaround*/
    	margin-right:20px;/*more spacing to see*/
    }
    ul#nav li a
    {
    	display:block;/*allow widths*/
    	width:100%;/*take up full space*/
    You can blame IEs float model (which happens when haslayout is invoked)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Free Geek computerages's Avatar
    Join Date
    Oct 2004
    Location
    /dev/null
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thank for the reply.

    This does not happen to solve the problem, but actually widens the menu more.

    Thanks!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well that got me consistant results in all browsers-what exactly is the problem then? I saw IE7 being weird with the images, and that fixed it-IE6 was good, but was expanding like a waterfall, whihch I explained why above.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Free Geek computerages's Avatar
    Join Date
    Oct 2004
    Location
    /dev/null
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Ryan!

    Please look at this image: http://zixan.info/junk/css1/ie_ugly_menu.jpg

    I am really pissed off by it... an suggestions?

    Thanks, you are awesome!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerages View Post
    Hi, Ryan!

    Please look at this image: http://zixan.info/junk/css1/ie_ugly_menu.jpg

    I am really pissed off by it... an suggestions?

    Thanks, you are awesome!
    Hi, in IE6 the items are expanding full width because hwenever a widthless float in conjunction with a child with haslayout, the haslayout element will stretch 100&#37; thus pushing the float wide, mimicking IE5mac behavior.
    I told you the reason behind that already.

    The <b> you have in there is a child of a widthless float (the <li>) and it has haslayout (the height), and as such the IE6 bug will expand the child.
    Code:
    #nav b{display:none!important;}
    If you add that code in you will notice that IE6 won't expand 100% width anymore, but that's part of your rounded corner technique.

    So either find a new rounded corner technique, or set a width on the <li>'s.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    The problem is as Ryan stated and probably the only solution would be to give IE6 a width.

    e.g.

    Code:
    * html ul#nav li{width:11em}
    Of course you could class each nav and give it the appropriate width to make it look like other browsers.


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
  •