Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Internet Explorer not honouring "clear" style on list items

Status
Not open for further replies.
Dec 8, 2003
17,047
GB
I have a problem where IE (at least v5.0, v5.5, and v6.0 on Windows) does not honour "clear:left" when applied to list elements.

Here's my test harness:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="Some content">
    <title>List Test Page</title>

    <style type="text/css">
		div#myList ul {
			margin: 0px;
			padding: 0px;
			margin-top: 1em;
			margin-bottom: 1em;
			float: left;
			list-style-type: none;
		}

		div#myList ul li {
			margin: 0px;
			padding: 0px;
		}

		div#myList ul li.cell,
		div#myList ul li.break {
			float: left;
			clear: none;
			width: 5em;
			margin-right: 0.5em;
			background-color: red;
		}

		div#myList ul li.break {
			clear: left;
		}
    </style>
</head>

<body>
	<div id="myList">
		<ul>
			<li class="cell break">Item 1</li>
			<li class="cell">Item 2</li>
			<li class="cell">Item 3</li>
			<li class="cell break">Item 4</li>
			<li class="cell">Item 5</li>
			<li class="cell">Item 6</li>
			<li class="cell break">Item 7</li>
			<li class="cell">Item 8</li>
			<li class="cell">Item 9</li>
		</ul>
	</div>
</body>
</html>

The DOCTYPE must remain unchanged. Everything else is fair game.

The page is validating with no errors, and exhibits the expected behaviour in NN v7.0 and FF v1.0.4.

I would expect to see a grid of 3 cols x 3 rows... but in IE, the list simply repeats to the right until it wraps.

I've search on Google for a bit, but can't find any reference to this specific issue.

Does anyone have any ideas about (a) why IE is doing this, and (b) how I could possibly fix this?

Thanks!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Have you considered doing it like this?:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="Some content">
    <title>List Test Page</title>

    <style type="text/css">
        div#myList ul {
            margin: 0px;
            padding: 0px;
            margin-top: 1em;
            margin-bottom: 1em;
            float: left;
            list-style-type: none;
            [b]width: 16.5em;[/b]
        }

        div#myList ul li {
            margin: 0px;
            padding: 0px;
            float: left;
            width: 5em;
            margin-right: 0.5em;
            background-color: red;
        }

    </style>
</head>

<body>
    <div id="myList">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </div>
</body>
</html>
By explicitly setting a width for the <ul>, I can force the <li>s to show up three-per-line. It makes it easier to change the layout to something else too, without having to change the HTML.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Hmm.. it looks like IE is honouring the clear, in that items 1, 4, and 7 do appear on their own line. The problem is that other content flows back up to the top - which is still not what I'm after.

While I could make the UL the same width as 3 LIs, some of my rows only have 2 items, so that won't always work.

I've a feeling this one is going to drive me potty!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
a) I'm not sure.
b)
Code:
        div#myList ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            clear: left;
        }

        div#myList ul li {
            margin: 0px;
            padding: 0px;
        }

        div#myList ul li.cell {
            float: left;
	    clear: none;
            width: 5em;
            margin-right: 0.5em;
            background-color: red;
        }
Code:
    <div id="myList">
        <ul>
            <li class="cell">Item 1</li>
            <li class="cell">Item 2</li>
            <li class="cell">Item 3</li>
	</ul>
	<ul>
            <li class="cell">Item 4</li>
            <li class="cell">Item 5</li>
            <li class="cell">Item 6</li>
	</ul>
	<ul>
            <li class="cell">Item 7</li>
            <li class="cell">Item 8</li>
            <li class="cell">Item 9</li>
        </ul>
    </div>
You had a "margin-top: 1em" and "margin-bottom: 1em" on the original UL element. This added space between the 3 ULs in this code of course, so it was removed. A simple <br> or maybe add a style rule to have a margin of 2em should fix it.
 
This seems to work too (though it's less elegant than my first solution):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="Some content">
    <title>List Test Page</title>

    <style type="text/css">
        div#myList ul {
            margin: 0px;
            padding: 0px;
            margin-top: 1em;
            margin-bottom: 1em;
            float: left;
            list-style-type: none;
        }

        div#myList ul li {
            margin: 0px;
            padding: 0px;
        }

        div#myList ul li.cell,
        div#myList ul li.break {
            float: left;
            clear: none;
            width: 5em;
            margin-right: 0.5em;
            background-color: red;
        }

        div#myList ul li.break {
            clear: none;
            float:none;
        }
    </style>
</head>

<body>
    <div id="myList">
        <ul>
            <li class="cell">Item 1</li>
            <li class="cell">Item 2</li>
            <li class="cell break">Item 3</li>
            <li class="cell">Item 4</li>
            <li class="cell">Item 5</li>
            <li class="cell break">Item 6</li>
            <li class="cell">Item 7</li>
            <li class="cell">Item 8</li>
            <li class="cell break">Item 9</li>
        </ul>
    </div>
</body>
</html>
Note that I now apply the "break" class to the last column, not the first. Maybe you have a good reason for applying .cell to every <li>, I can't see one.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top