Cufon text not appear IE8

Question

The url http://www.sydneybeeandwaspremoval.com.au it works fine in IE9 and Chrome, etc. But in IE8 it doesn't work quite as expected, in IE7 it also works properly.

But basically the top navigation menu is all a custom font using cufon, the first level links are working fine, however the second level links are replaced appropriately with cufon canvas and cufontext BUT you cant see it, I have inspected the elements to find the positions are correct, i have also tried removing all background images and changing color just in case, but this also did not help, its as if it has visibility hidden on them but I couldn't find any CSSthat could cause it. Any ideas suggestions or experience will be much appreciated.

Answer 1

This bug is discussed here: http://drupal.org/node/834636

The problem is, hidden elements with visibility: hidden are not properly rendered by Cufon in IE8. Then the solution is to replace the visibility property for the display property.

In your templates/theme484/css/template.css file, replace the line 431 by this one:

.menu-nav li ul { position: absolute; top: 44px; left: -14px; z-index: 100; width: 300px; display: none; }

And replace the line 433 with this:

.menu-nav li.parent:hover ul { display: block; }

Answer 2

Kieran,

If everything is working in ie7, one solution could be to force ie8 to run your site in compatibility mode. In the < head > of page:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Further more, you can target ie8 only to run in compatibility mode by doing this:

<!--[if IE 8]>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<![endif]-->

Good luck.