Floated nested lists and making them behave

ikandee · October 5, 2010, 1:39am

Hi Guys,

Whenever I float nested lists I always seem to find myself run into the same problem. That is having lists wrap all over the place when the height of the previous list differs to the rest.

When all the lists are the same height there is no problem - but obviously there are times when the heights will need to change depending on how much content is included within each list.

Hopefully someone can explain to me how to do this.
Thanks



ul#productSummary{
	width: 100%;
}

ul#productSummary li {
	float: left;
	width: 21%;
	padding: 5px;
	margin: 10px 8px 10px 16px;
}

ul#productSummary li ul {
	width: 193px;
}


ul#productSummary li ul li {
	clear:left;
	width: 100%;
	float:none;
	padding: 5px;
	margin: 0;
	font-size: 11px;
}

ul#productSummary li ul img{
	border: #f1f1f1 solid 1px;
}

ul#productSummary li ul img.btnMoreInfo {
	border:none;	
}

ul#productSummary li ul li.thumbBg {
	background:url(..images/thumbBg.gif) no-repeat;
	width: 195px;
	height: 28px;
	color:#FFF;
	font-size:15px;
	padding: 5px 0 0 5px;
}

ul#productSummary li ul h2{
	padding:0 5px;
	font-weight: bold;
	font-size:14px;
	line-height: ;
}

ul#productSummary li ul h3{
	padding:0 5px;
	font-weight: bold;
	font-size:12px;
	line-height: ;
}






<ul id="productSummary">
    
    <li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
    
   <li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here... some desciptive copy goes here... some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li>
<li>
    
    	<ul>
        <a href="#"><img src="images/thumbHero.jpg" width="193" height="188" border="0" /></a>
        <li class="thumbBg">BRAND NEW!</li>
        <h2>HEADING</h2>
        <h3>SUB HEADING</h3>
        <li>some desciptive copy goes here...</li>
        <a href="#"><img src="" width="80" height="23" border="0" class="btnMoreInfo" /></a>
    	</ul>
    
    </li> 
       
    </ul>

Rayzur · October 7, 2010, 3:23am

Hi,
I had to download K-Meleon to get the FF2 engine to see what was going on.
The problem is that your sub li has cascaded the inline-box from your main li styles.

If I remember right, FF2 has trouble when an inline-box parent has children set as floats or inline-box. It looks like you can fix it by simply resetting it to display:block; in the cascade.

ul#productSummary li ul [B]li[/B] {
[COLOR=Red]/*width: 100&#37;;*/[/COLOR]
[B]display:block;[/B]
margin:0;
padding:0;
font-size: 11px;
background:lime;
}

Your widths and your paddings are not adding up. You have some fixed px widths with paddings that are exceeding that 21% width you set on the main LI. Get rid of that altogether and let it shrinkwrap with inline-block.

I had to set up some BG colors so I could see what was going on but this gets it working in FF2 for me.

The CSS still needs to be cleaned up some more, I’ll work on that in a bit. I’ve got a bunch of redundant widths set on those LI classes that have the side paddings (headings)

Oh, and BTW IE6/7 have not even been addressed yet. They need an inline-block workaround also.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inline-Block Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
}
ul#productSummary{
margin:0;
padding:0;
width: 100%;
}
 
ul#productSummary li {
/*width: 21%;*/
width: 200px;
padding: 0 5px;
margin: 10px 8px 10px 16px;
 
display: -moz-inline-box; /* FF2 and under */
display: inline-block; /* for modern browsers */
vertical-align:top;
background:green;
}
 
ul#productSummary li a {
 
}
 
ul#productSummary li ul {
margin:0;
padding:0;
background:#333;
}
 
 
ul#productSummary li ul li {
/*width: 100%;*/
display:block;
margin:0;
padding:0;
font-size: 11px;
background:lime;
}
 
ul#productSummary li ul a img{
margin:0 auto;
display:block;/*test w/out image*/
border: #f1f1f1 solid 1px;
background:#BBB;
}
 
ul#productSummary li ul li a.btnMoreInfo {
background: url() no-repeat 0px 0px;
display: block;
width: 80px;
height: 23px;
overflow: hidden; 
text-indent: -10000px; 
font-size: 0px; 
line-height: 0px;
background:orange;
}
 
ul#productSummary li ul li a:hover.btnMoreInfo {
background-position: 0px -23px;
}
 
ul#productSummary li ul li.thumbBg {
background: url() no-repeat;
width: 190px;
height: 28px;
color:#FFF;
font-size:15px;
padding: 5px 5px 0 5px;
background:red;
}
 
ul#productSummary li ul li.head {
width: 190px;
font-weight: bold;
font-size: 14px;
padding: 5px 5px 0 5px;
background:yellow;
}
 
ul#productSummary li ul li.subHeading {
width: 190px;
font-weight: bold;
font-size: 12px;
padding: 3px 5px 0 5px;
}
 
ul#productSummary li ul li.copy {
width: 190px;
padding: 5px;
}

</style>

</head>
<body>

<ul id="productSummary">
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
 
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here... Some copy goes here... Some copy goes here... Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
 
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="foo.jpg" width="193" height="188" alt="Image"></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="#" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
</ul>

</body>
</html>

ikandee · October 5, 2010, 4:40am

Thank you Rayzur! Looks like it is working as it should now. (and as always it is usually something really simple that I overlook…) Will definitely clean up my code… thanks again

Rayzur · October 5, 2010, 3:56am

Hi,
It’s not a problem with nested lists so much as it is with floats of different heights. Floats will naturally snag on each other unless the clear property is used to clear the floats above.

Here is an example of snagging floats.

As mentioned in that demo the alternative is to use inline-block along with vertical-align.

As far as the code you posted is concerned your html is invalid. You can only legally nest an <li> within the <ul>. You are nesting h-tags and anchors along with list-items in your ul. They need to nest within the <li> to be valid.

You should probably rethink your code, it would make more sense to just use divs as your containers rather than a UL with the way your using the h tags.

ikandee · October 7, 2010, 8:51am

Awesome! Thanks so much Rayzur, it is now looking good Had to do some extra tweaking but found it useful to use the bg colours as a visual way of problem solving

Regarding IE 6/7 they had already been addressed with conditional comments. It was mainly the other browsers I need assistance with.

ikandee · October 7, 2010, 12:44am

Have been going through cross browser compatitibility and found that FF2 (and under), Netscape & Mozilla are not playing nice. Are there any ways I can get the inline box to work with these browsers?

 
ul#productSummary{
width: 100%;
}
 
ul#productSummary li {
width: 21%;
padding: 0 5px;
margin: 10px 8px 10px 16px;
 
display: -moz-inline-box; /* FF2 & under */
display: inline-block; /* for modern browsers */
vertical-align:top; 
}
 
ul#productSummary li a {
 
}
 
ul#productSummary li ul {
width: 183px;
}
 
 
ul#productSummary li ul li {
width: 100%;
padding: 0;
margin: 0;
font-size: 11px;
}
 
ul#productSummary li ul a img{
border: #f1f1f1 solid 1px;
}
 
ul#productSummary li ul li a.btnMoreInfo {
background: url() no-repeat 0px 0px;
display: block;
width: 80px;
height: 23px;
overflow: hidden; 
text-indent: -10000px; 
font-size: 0px; 
line-height: 0px;
}
 
ul#productSummary li ul li a:hover.btnMoreInfo {
background-position: 0px -23px;
}
 
ul#productSummary li ul li.thumbBg {
background: url() no-repeat;
width: 195px;
height: 28px;
color:#FFF;
font-size:15px;
padding: 5px 5px 0 5px;
}
 
ul#productSummary li ul li.head {
font-weight: bold;
font-size: 14px;
padding: 5px 5px 0 5px;
}
 
ul#productSummary li ul li.subHeading {
font-weight: bold;
font-size: 12px;
padding: 3px 5px 0 5px;
}
 
ul#productSummary li ul li.copy {
padding: 5px;
}
 
 
 
<ul id="productSummary">
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
 
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here... Some copy goes here... Some copy goes here... Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
 
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li> </ul>
 
</li>
 
<li>
 
<ul>
<li><a href="#"><img src="" width="193" height="188" border="0" /></a></li>
<li class="thumbBg">BRAND NEW!</li>
<li class="head">Heading</li>
<li class="subHeading">Sub Heading</li>
<li class="copy">Some copy goes here...</li>
<li><a href="" class="btnMoreInfo">more info</a></li>
</ul>
 
</li>
</ul>