Hi, i've been working on this problem for a while now and i just can't figure it out. I'm in the process of changing over from a layout using tables to using divs and ul/li's. the layout looks fine in IE7, but doesn't in Firefox 2.0.0.6. Also, in Dreamweaver CS3, the design doesn't look right either, although not as bad in firefox. What i'm trying to do is have a bordered background on the ul, behind my li's. in firefox, the background only displays as the border, because for some reason it's not going around the contents of the ul, which are the li's. In Dreamweaver, it shows the border going around the first half of the li's, but not the rest. I hope i've explained this well enough. here is the source: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- ul.Marvel { background-color: #F9B0B3; width: 700px; border: 2px solid #EE272E; margin: 0px; padding: 0px; height: auto; } .cell { text-align: center; font-family: "Comic Sans MS", Arial, sans-serif; font-size: 12px; vertical-align: top; margin: 0px; padding: 0px; float: left; width: 140px; list-style: none; } .lastcell { clear:right; } --> </style> <body> <ul class="Marvel"> <li class="cell"><img src="images/1th.jpg" /><br /><a href="http://">TEST SPIDER-MAN TITLE</a></li> <li class="cell"><img src="images/4th.jpg" /><br /><a href="http://">TEST SPIDER-MAN TITLE 2</a></li> <li class="cell"><img src="images/8th.jpg" /><br /><a href="http://">TEST MARVEL TITLE</a></li> <li class="cell"><img src="images/5th.jpg" /><br /><a href="http://">TEST ULTIMATES TITLE 2</a></li> <li class="cell lastcell"><img src="images/3th.jpg" /><br /><a href="http://">TEST ULTIMATES TITLE</a></li> <li class="cell"><img src="images/2th.jpg" /><br /><a href="http://">TEST X-MEN TITLE</a></li> <li class="cell"><img src="images/6th.jpg" /><br /><a href="http://">TEST X-MEN TITLE 2</a></li> <li class="cell"><img src="images/7th.jpg" /><br /><a href="http://">TEST MARVEL TITLE</a></li> <li class="cell"><img src="images/9th.jpg" /><br /><a href="http://">TEST MARVEL TITLE</a></li> <li class="cell lastcell"><img src="images/10th.jpg" /><br /><a href="http://">TEST MARVEL TITLE</a></li> </ul> </body> </html> Code (markup): the page is here: http://fatmonkeydesigns.com/ebay/help.html thanks in advance.
The list items are floated and by default are not being contained by the UL in modern browsers. They probably look right in IE6 and below (I haven't looked though) because the width is set and that triggers hasLayout. For modern browsers (Mozilla, Opera, Safari) you can either insert an invisible period (clearfix pie @ Google) or use overflow:hidden (which I recommend). Put overflow:hidden; on the ul and it should contain the LIs.
I'm shocked. OH wait, I'm not shocked at all. You might want to try putting your inlined style INSIDE something other than the HTML, like say the head? Since you aren't using the list as a list, you should probably get rid of it's bullets with list-style:none; Vertical-align has no effect on LI's. You should probably get rid of all those redundant and pointless .cell classes. and there's no need to do clears since you have the normal wrapping behavior to handle that. Try this on for size: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"><!-- * { margin:0; padding:0; } body { padding:8px; /* just so we can see it clearer */ } .marvel { width:700px; overflow:hidden; /* make it obey heights AND wrap properly */ font:normal 12px/14px "Comic Sans MS", Arial, sans-serif; color:#000; background:#F9B0B3; border:2px solid #EE272E; list-style:none; } .marvel li { float:left; width:138px; text-align:center; } .marvel img { display:block; margin:0 auto; } --></style> </head><body> <ul class="marvel"> <li> <img src="http://fatmonkeydesigns.com/ebay/images/1th.jpg" alt="" /> <a href="#">TEST SPIDER-MAN TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/4th.jpg" alt="" /> <a href="#">TEST SPIDER-MAN TITLE 2</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/8th.jpg" alt="" /> <a href="#">TEST MARVEL TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/5th.jpg" alt="" /> <a href="#">TEST ULTIMATES TITLE 2</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/3th.jpg" alt="" /> <a href="#">TEST ULTIMATES TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/2th.jpg" alt="" /> <a href="#">TEST X-MEN TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/6th.jpg" alt="" /> <a href="#">TEST X-MEN TITLE 2</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/7th.jpg" alt="" /> <a href="#">TEST MARVEL TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/9th.jpg" alt="" /> <a href="#">TEST MARVEL TITLE</a> </li><li> <img src="http://fatmonkeydesigns.com/ebay/images/10th.jpg" alt="" /> <a href="#">TEST MARVEL TITLE</a> </li> </ul> </body></html> Code (markup): Validates XHTML 1.0 Strict, works in IE 6, 7, FF, Opera and Safari. I'd consider fixing the heights of those LI though - you get different wrapping widths on them and you'll have the whole layout break. Also, I would look at making the whole thing including the image a link by moving the anchor open before the image, then setting the images to border:none; Hope this helps.