SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    widthless LI's not floating in IE6..?

    Hi everyone,

    The following code makes my horizontal nav items float nicely next to eachother in IE7, FF, and Opera, but IE6 drops them down vertically, one below the other... unless I add a width to the LI or A, which I don't want because they should be fluid:

    Code:
    ul {
    	float: left;
    	width: 529px;
    	height: 31px;
    }
    
    ul li {
    	float: left;
    	height: 31px;
    	border-right: solid 1px #d7d7d7;
    }
    
    li a, ul li a:link, ul li a:visited {
    	display: block;
    	height: 31px;
    	padding: 0 14px 0 14px;
    	line-height: 31px;
    }
    Is there any way to get IE6 to float these LIs with no widths set on them?

    Thank you!

    Louis

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to have fixed the problem. Now the code looks like this:

    Code:
    ul {
    	float: left;
    	width: 529px;
    	height: 31px;
    	overflow: hidden;
    }
    
    ul li {
    	float: left;
    	border-right: solid 1px #d7d7d7;
    }
    
    ul li a, ul li a:link, ul li a:visited {
    	padding: 8px 14px 8px 14px;
    	line-height: 31px;
    }
    Removing "display: block" from the "a" elements was the key, then I had to add top and bottom padding to them to mimic a block element, plus a few other small changes.

    Anyone have a cleaner solution?

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have a cleaner solution?
    You can float the anchors too.
    Happy ADD/ADHD with Asperger's

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this, and I replaced the bottom padding with a height to let the userfont grow/diminish.
    Code CSS:
    ul {
    	float: left;
    	width: 529px;
    	height: 31px;
    	overflow: hidden;
    }
    ul li {
    	float: left;
    	border-right: solid 1px #d7d7d7;
    }
    ul li a, ul li a:link, ul li a:visited {
    	float: left;
    	padding: 8px 14px 0 14px;
            height:31px;
    	line-height: 23px;
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    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)
    but IE6 drops them down vertically,
    What is happening here is that IE6 has a bug and if you have a widthless float that contains a child element in "layout" mode (haslayout), then that child element stretches the float to 100% of the available space effectively making the parent float 100% wide and occupying the whole line.

    The solution is as Erik suggested and floating the anchors also which cures the bug (unless you floated the anchor right and the float would stretch to 100% again).

    If you had omitted the height on your first example then the anchor wouldn't have "layout" and it would have lined up horizontally allbeit with no height of course.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, that does work exactly as you both explained. Much better than my "padding" solution. Strange that I didn't think of floating the anchors. I guess it just didn't click that a float on the child elements would matter since each of their parents is floated. Of course, we're dealing with IE6, so I shouldn't be surprised.

    Louis


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
  •