Disappearing borders dropdown menus in IE6

[Pennywaffer]

I have a sample here that displays a bug in IE6 which I can't seem to fix:

http://www.pennywaffer.net/testcase/sample.html

What happens is:

When you open one of the two dropdown menus in IE6, the bottom border will be partially invisible. It only happens the first time the menu is opened. Also, when IE loses focus to a different app and then gets focus again (while the dropdown is still open with partially gone borders), the borders will be normal again.

Does anybody know why this happens, and most of all, how it can be fixed?

The dropdown menus are revealed and positioned through JS in the file

http://www.pennywaffer.net/testcase/menu.js,

the relevant function being revealMenu()

The css can be found here:

http://www.pennywaffer.net/testcase/sample.css

The style for the dropdownmenu is ul#nav3 li ul.displaynav

The problem does not occur in IE7, Firefox or Opera

If someone recognizes this and or knows how to fix it, I would be very grateful. I originally posted this in the html & css section, but since the problem might be JS related I included it here as well.

Thanks!

 

[theniteowl]

This MIGHT be the result of a bug in how IE handles images set in CSS. I do not remember the details thoroughly but this may give you something to search on.

IE had/has a problem with images set with CSS that are toggled on/off visible/not visible. IE tends to go back to the server to get a new copy of the image every time an event occurs to show it on the page and then re-renders it to the screen. The common symptom is that the image flickers which is the result of the delay between the display trying to show the image and the time it actually takes for the image to be retrieved from the server rather than from the local cache of the browser.

You typically do not see this effect if you are testing the page on your local machine but it becomes evident when the page is moved to a server where retrieval takes longer.

At my age I still learn something new every day, but I forget two others.

 

[Pennywaffer]

Thanks for the reply!

That doesn't seem to be it though, that caching problem can be fixed by

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

I did manage to sort of fix the issue by giving the listitems in the dropdownmenus a relative position in the css:

  ul#nav3 li ul li {position: relative;}

Now it displays correcly the first time the menu is opened, but all the subsequent times IE messes it up again...

 

[theniteowl]

It may also be the way in which IE is rendering the display changes. It tends to create and then re-size the fields to fit especially if some items are set by percentage and others fixed. The order in which they display may help aleviate the problem or perhaps having them render invisible then toggling the visibility or display property but then you are using Javascript to prop up CSS when using CSS this way is generally to get away from using the Javascript.

I am just guessing at possibilities. I have seen unusual CSS rendering issues in IE but have not always found the cause or solution for them.


At my age I still learn something new every day, but I forget two others.