IE6 background appears-disappears on scrolling

Question

Hi,

Given IE6, an UL-LI list and a background image for the UL container.

<style>
  ul {background-image: url(images/bgr.png);}
</style>
...
<ul>
  <li>...</li>
  ...
</ul>

When I load the page, the background is randomly loaded, some parts are visible, some are not. Moreover, it changes on runtime when I'm scrolling on the page. When I scroll out the UL list and scroll back, different parts of the background will be visible, depends on the speed of scrolling. Do you have any idea? Thanks in advance.

Answer 1

IE6 struggles when it comes to using .png files full stop. There are various suggestions for fixes, but unless you have a specific reason for using a .png file (for instance transparency) I would suggest using a different file format. I've worked around it before by detecting when I have an early version of IE and substituting a .jpg for the .png file I wanted to use, so that most users with up to date browsers get a .png background but IE users get a .jpg.

Answer 2

I've encountered similar problem some time ago (but it was simple background-color, without image) and if I remember correctly, adding position:relative to parent element solved this. So something like this:

<div style="position:relative">
 <ul>
  <li>...</li>
 </ul>
</div>

Answer 3

Does li float or something? Try putting... ul {

zoom:1; overflow:hidden; display:block; }