I’m having a very strange specific problem and I’m going to try to paste the code in here without confusing the issue too much. I’ve got an unordered list that uses a stylesheet to put each list item into a little square… but after a certain point, the line breaks kind of go nuts. If you add or take away different ones, the line breaks move around and I can’t for the life of me figure out what’s happening.
<!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 id="Head1">
<link rel="stylesheet" type="text/css" href="primaryStyle.css" />
</head>
<body>
<center>
<table class="table" border="0" width="750">
<tr>
<td>
<div id="productresults">
<ul class="productlist" >
<li class="productresultli"><center>
<span id="Span3">Seasonal Fruit Tray</span><br />
<span id="Span4">$9.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="Span5">Seasonal Fruit Tray</span><br />
<span id="Span6">$9.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="Span17">Seasonal Fruit Tray</span><br />
<span id="Span18">$9.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_12">Mayonaise</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_12">$5.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="Span17">Seasonal Fruit Tray</span><br />
<span id="Span18">$9.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_12">Mayonaise</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_12">$5.00</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_13">Ketchup</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_13">$3.50</span><br /></center>
</li>
<li class="productresultli"><center>
<span id="ContentPlaceHolder1_lvProducts_NameLabel_14">Raspberry Chiptole Sauce</span><br />
<span id="ContentPlaceHolder1_lvProducts_PriceLabel_14">$10.00</span><br /></center>
</li>
</ul>
</div></td></tr>
</table>
</center>
</body>
</html>
This is the stylesheet I’m using (primaryStyle.css)
body
{
margin: 20px 0;
padding: 0;
font: Verdana, Arial, Helvetica, sans-serif;
color: #000;
background-attachment: fixed;
text-align: center;
height: 100%;
background: #ABCDEF;
}
.productresultli
{
display: inline;
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 113px;
padding: 5px;
text-align: center;
}
.productlist
{
float: left;
}
Does anyone have ANY idea why this is happening? Any help would be appreciated. If I’m not quite making sense, please let me know. THANKS!
The varying heights of the
lielements are causing the elements to be placed unevenly. For eg, if you define a fixed height of sayheight:200px, you’ll notice that theli'salign properly. Since the heights of the individualli'sare different and eachlihas amargin-bottom, the list items are being arranged based on the space available. Set a fixed height and theli'swill align properly.I’ve created a fiddle for you to well, fiddle with – http://jsfiddle.net/2YSdT/1/