An IE6 peak-a-boo border

[Feldon]

The problem page is http://chris.paing.com/version5/index.php.

I used suckerfish drop-down menus in that yellow menu (hover over Mission In Canada and you'll see it working).

In IE6, the bottom-border of the drop-down menus does not appear until you hover over the actual dropdown (the nested <ul>). If you move your mouse off it and then put it back onto the drop-down menu, the border is still not visible.

Now, if I change the 'display:block' in '#menu2 li li' to 'display:inline-block', or if I add 'height:1%' to '#menu2 li' then once you hover over the actual dropdown, the border will work correctly unless you refresh the page. However, it is still missing at first.

The problem is not an overlapping background because if you look carefully you can see the border is being added to the bottom of the menu, as opposed to suddenly appearing through the bottom edge of the menu.

Any solutions? Alternatively, any ideas as to which IE bug this might be?

[Kravvitz]

Extra-forum cross-post (http://forums.devshed.com/t296826/s.html)

Sending XHTML as text/html Considered Harmful (http://www.hixie.ch/advocacy/xhtml)
Serving up XHTML with the correct MIME type (http://keystonewebsites.com/articles/mime_type.php)
http://www.w3.org/2003/01/xhtml-mimetype/
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
http://www.w3.org/TR/xhtml-media-types/#summary

Writing Efficient CSS (http://www.communitymx.com/content/article.cfm?cid=90F55)

/* hide from IE5/Mac \*/
* html #menu2 li div {
float:left;
height: 1px;
}
/* end hide */

This might interest you. (http://www.positioniseverything.net/css-dropdowns.html)

[Feldon]

Thank you very much, that did the trick. I tried the Holly Hack but apparently on the wrong element.

[Fang]

Hack at your own risk (http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx)