SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floated nested lists and making them behave.

    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

    Code:
    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>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


    Code:
     
    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>

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    ul#productSummary li ul li {
    /*width: 100&#37;;*/
    display:block;
    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.

    Code HTML4Strict:
    <!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>

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •