Float left list gets indented in IE6/7?

HTML & CSS
1

Hello,

Ive got this rule…

.holiday {
float:left;
margin-right:100px;
padding:0;
list-style-position outside /* ie6/7 /
display:inline; / ie6 */
}

Two things get mucked up here. I seem to of fixed them but I’ve never seen this and want to better know whats happening. Via my reset there is zero padding and margin and list style none on all lists. There are two .holiday lists side by side. The .holiday lists gets indented in ie6/7. I added list-style-position outside and that fixes it but is that the correct fix? Two, my whole container drops (its floated) because ie6 needed display inline for some reason. But you only need that hack when its floated in the direction of the margin right?

Note: I removed the “:” from the list style because the editor was making them a surprised face icon.

2

I would think so. That’s a standard setting. It makes the LIs align with the container and the bullets (if any) hang outside (unless there’s padding to pull them in).

Note: I removed the “:” from the list style because the editor was making them a surprised face icon.

You need code tags. :smiley:

3

Ahh - it’s early.

4

Bump. Still don’t know why the floated list gets indented. I imagine it has something to do with floated list loose there bullets in IE too? Also, still don’t know why I have to give ie6 display inline when the margin is applied to the opposite side of the floated direction? Maybe because there are two floated lists side by side and the one on the right runs into the margin-right of the first?

5

Have you got a working demo of that Eric with html as I will probably build something different?

The double margin bug in IE6 applies the the side edge of a container no matter which way it is floated.

If there was only one float in a containing block then both its right margin and left margin would be doubled in error.

6

HI Eric,

It’s ok I built a test case that exhibits the bug.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0
}
ul,li {
    list-style:none;
}
.holiday {
    float:left;
    margin-right:100px;
    padding:0;
    display:inline; /* ie6 */
    border:1px solid #000;
    background:red;
    /*list-style:outside;*/
}
</style>
</head>
<body>
<ul class="holiday">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<ul class="holiday">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
</html>

It seems that when you add display:inline to the floated list then IE set the space for the bullet to list-style:inside although the bullet is not actually showing because you have specified none.

Using list-style:outside corrects this.

When you use list-style:inside it turns the bullet marker into an inline element so I guess this is some kind of reverse logic in that if you have an inline element then the list-style:inside is probably the default for IE6 and 7.

This seems to hold true as this simple test case shows space on the left as soon as you make the ul display:inline.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0
}
ul {
    list-style:none;
    display:inline;
}
</style>
</head>
<body>
<ul>
    <li>test</li>
</ul>
</body>
</html>

IE6/7 have loads of bugs with lists and it seems they were very poorly implemented from the start.

IE8 seems ok.

7

Thank you Paul for the detailed breakdown. More clear now. I don’t know why I didn’t do this from the start, but from the sounds of it I will just give it padding instead and then remove the display inline. That should trim two rules. Always makes me happy when I can trim.