CSS + IE 6 = Image caching and padding.

Question

I have a web page. This web page looks correct in IE 7, 8 FF 2, 3, 3.5 Safari 3, 4 Opera 9, 10 and Chrome. Essentially everything except IE 6.

The layout even looks fine. There are seemingly two things that are not showing properly.

1. Each list item has a gray vertical line in it. This line moves if I adjust my padding value. I do not want the gray vertical line. This line only appears in IE 6.
2. I have a list that drops down. When this list appears the first time, the background-images appear. However, on subsequent attempts, the image does not appear. Once again, this is only on IE 6.

Here is the general code I am using. I have moved the styles inline for the sake of readability.

<div id="theDiv" style="height:29px; width: 100%; background-image: url('./Images/bg.jpg');position:absolute; top:10px;">
  <ul style="list-style-type:none; position:relative; display:inline;">
    <li style="position:relative; display:inline; background-image: url('./Images/bg2.jpg'); padding:5px 6px;">Item 1</li>
    <li style="position:relative; display:inline; background-image: url('./Images/bg2.jpg'); padding:5px 6px;">Item 2</li>
  </ul>
</div>

How can I over come these silly issues? Thank you!

Answer 1

Usually this kind of problems depend on the IE6 border bug. See for example this:

http://www.simple-site.eu/test-lab/ie-bugs/ie6-border-bug.html

The grey line is probably due to some div not fully covering the background.

A screenshot woul be helpful for a useful answer, since I don't have IE6.