CSS Font Color Mis-interpretation by IE8, but not IE7 or IE9

Question

I'm having an issue with a WordPress theme project I'm working on (the theme is based on the Roots Theme for WordPress).

I'm having trouble controlling the font color of the main navigation sub-menus: but only in IE8. The font appears to be the same color as the background for the submenu, making it invisible to the user. Oddly, this issue only happens in IE8, and doesn't happen in chrome, firefox, IE7 or IE9.

The site is http://precisionmfgmn.com, to see the error try hovering over the "companies" link on the main navigation.

Here are some details that may be relevant: I am using cufon font replacement.

Any ideas?

Answer 1

It looks like cufon is using canvas with IE8 and not IE7. IE8 doesn't seem to support it but IE9 does. Here is 2 possible solutions : - modify the source code of the module, if the browser is IE8 then it should not use canvas - force the IE7 compatibility view, you can do that by adding

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

in your template file

The first solution is probably the best but the second is easier.

Answer 2

hmm very odd, Cufon is usually pretty universal with the way it displays, I have used it before and not had a problem. Do you have any style sheets on Wordpress that are browser specific ?, I know they have them on Joomla, but not sure if they have them on Wordpress or not. If there is, one of those may be applying a slightly different style to IE8 that is breaking Cufon somehow, if there is a IE specific stylesheet try renaming it to temp remove it, to see if it makes any difference.

I have just taken a look at it with IE9 in IE8 compatibility mode and cant see a problem with it ?, have you tried clearing your browser cache and reloading the page ?, it might have cached previous changes you have made, so the text is showing an old version.