CODEWITHSUNDEEP
htmlcssstylesheethtml-lists
Raleigh Chen
Raleigh Chen

Reputation: 3

Weird line breaks in a styled unordered list?

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!

Upvotes: 0

Views: 1013

Answers (2)

aronkerr
aronkerr

Reputation: 314

After looking through the code you have posted I think what you are describing is being caused by not clearing your floats. To fix this add the class last to the final list item on each line. Then use the pseudo class :after to clear them such as the following.

HTML

<ul>
   <li>Item</li>
   <li>Item2</li>
   <li class="last">Item3</li>
</ul>

CSS

li:after {
  clear:both;
}

Upvotes: 0

Sagar Patil
Sagar Patil

Reputation: 1948

The varying heights of the li elements are causing the elements to be placed unevenly. For eg, if you define a fixed height of say height:200px, you'll notice that the li's align properly. Since the heights of the individual li's are different and each li has a margin-bottom, the list items are being arranged based on the space available. Set a fixed height and the li's will align properly.

I've created a fiddle for you to well, fiddle with - http://jsfiddle.net/2YSdT/1/

Upvotes: 1

Related Questions