list background colour screwed up in IE7

Question

I've styled some unordered HTML lists and their heading to look like this in Firefox:

alt text http://img24.imageshack.us/img24/711/screenshot001nij.png

Unfortunately, in IE7, they look like this:

alt text http://img11.imageshack.us/img11/8343/screenshot002e.png

The relevant HTML is

<div class="list-column">
    <h4>Types de pêche</h4>
    <ul>
        <li>Pêche en lac</li>
        <li>Pêche en Rivière</li>
    </ul>
</div>

And the CSS is:

.list-column {
  float: left;
  margin-right: 20px;
  width: 20em;
}

div.list-column h4 {
  background-color: #FDD041;
  padding: 5px !important;
}

ul li {
  background-image: url(images/arrow.gif);
  background-position: 0 11px;
  background-repeat: no-repeat;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 6px;
  margin-left: -20px;
  margin-top: 2px;
  padding: 2px 0 2px 18px;
}

I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?

Update: I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.

The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).

Thanks, Don

Answer 1

IE and the other browsers have a different default style sheet.

IE indents list items by putting a 'margin-left' on the <ul>. The other browsers put a 'padding-left' on the <ul>.

So if you want to look the same in all browsers, set both 'margin-left' and 'padding-left' explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.

(The default list 'margin-left' in IE is, to be precise, '30pt'.)

Answer 2

A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.

Answer 3

I think this is a case of IE-7 auto indending the li's the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode. then launch the developer tools from the tools menu

You can then inspect the individual elements and check if there are hidden padding or margins being applied

Answer 4

I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.

Ps in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...