Border-top on hover not showing in IE8

[Wickham]

For those of you with IE8, here's a very odd situation. I was asked to find out why a border-top was not showing on hover in IE8 so I deleted virtually all the page content until I was left with the problem areas. The code validates and the hover border does show in IE7 and Firefox but not in IE8. The designer only wants a border-top for the hover state, not other states.

 

http://w'>http://w ww.wickham43.supanet.com/forumposts/aero090610.html (delete space in www).

http://w ww.wickham43.supanet.com/forumposts/aeromain_styles090610a.css

 

I found two work-arounds:-

 

1. If using XHTML Transitional doctype you can remove the inline style for the image size width="960" height="144" in the header div in the html page and put the sizes width: 960px; height: 144px; in the #header div style in the css file (does not work with Strict doctypes - my page is HTML Strict) and then the menu border-top will show on hover, but why would editing an image style in one div affect the border in another? Very odd.

 

The designer used the old inline coding width="960" height="144" but if you change that to style="width: 960px; height: 144px;" or code a style

#header img { width: 960px; height: 144px; } in the stylesheet, it makes no difference.

 

or

2. Put border-top: 2px solid black; in the style for #navbar_links a:link and this enables the border-top on hover in IE8 but then you have a border-top showing for the link state which is unwanted. Using border-top: none; here and putting a general border-top in the #navbar_links a style for all states still stops the border-top in IE8 showing on hover.

 

You can therefore code a border-top in the link state the same color as the div background to hide it, but if you have a background image with several colors, the border-top will show in the link state when it's not wanted.

 

So IE8 does seem to have a problem.