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!

Register Log in
  • Congratulations Mike Lewis 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.
BillyRayPreachersSon

BillyRayPreachersSon

Programmer
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]
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
409
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
558
spamjim
spamjim
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
143
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top