I'm having a problem with IE8, nice menus and CUFON font replacement. When IE renders the page and CUFON triggers the text dissapears.

It's okay in Firefox and Opera? Any ideas. I read something about using the Z INDEX:999 but I couldn't get it to work.

Here is the line of code that renders the CUFON font replacement.

<script type="text/javascript">
			Cufon.replace('ul.nice-menu', {hover: true});

Website address is: http://www.equals3.co.uk

Please help! Thanks

#2 Cufon_IE8_issue.jpg24.99 KBdkingofpa
Members fund testing for the Drupal project. Drupal Association Learn more


shahinfard’s picture

Category: support » bug
dkingofpa’s picture

24.99 KB

I'm having the exact same issue. I found an earlier ticket that covers this issue: http://drupal.org/node/787476

I don't think this is a Nice Menus issue. I believe it is a Cufon issue. The Cufon project talks about styling and the :hover option on this page: http://wiki.github.com/sorccu/cufon/styling

Unfortunately, they say "Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results." I don't know for sure, but I'm guessing we are seeing one of the unpredictable results since nice menus are nested?

add1sun’s picture

Component: Browser Compat » Miscellaneous
Category: bug » support

I am totally unfamiliar with Cufon and don't really have the time to sort it out myself. I'm not inclined to take this as a Nice Menus responsibilty either (supporting 3rd party stuff), so I'm moving this to a support request. If someone can determine if this is a Cufon problem, or if Nice Menus is doing something that could easily fix it, that would be great. If this does happen to be something that NM can fix, I'd accept patches, but I won't work on this one myself.

andb’s picture

We had a similar problem with cufon, nice_menus and ie8, with the dropdown menu items (cufon replaced text) not showing. It was fixed by changing from using visible to display in css, there was also a problem with the cufon images displaying below other content. I think the lines required were:

#nice-menu-1 ul {
  visibility: visible;
  display: none;

#nice-menu-1 li:hover ul,
#nice-menu-1 li.over ul {
  display: block;

#nice-menu-1 .menuparent {
  z-index: 20;

#nice-menu-1 .menuparent ul{
  z-index: 10;

If that doesn't help you, let me know and I'll figure out what css might be missing.

The visibility property determines whether a given element is visible or not. When visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page, while with display it doesnt occupy the space it would normally.

There are a number of people with this cufon / ie8 'visibility' issue, just google it. In the use cases I could come up with, I didn't find a problem changing this to 'display'. Are there problems with using display instead of visibility in other browsers? If it works well cross browser, would it make sense to change the module's base css? If it doesn't work cross browser and needs to be put in ie8 specific css files, a note in the README.txt file about this issue with Cufon might be a good idea.

dkingofpa’s picture

This fixed the issue for me. I tested my menus in IE7, IE8, Firefox 3.6, Safari 5, and Chrome 5. Everything appears to be working as expected. Thanks andb!

tomrishworth’s picture

I found I had to add !important to get this to work in ie8

#nice-menu-1 ul {
  visibility: visible !important; 
  display: none;
nitinparge’s picture

cufone hover problem
please help

nitinparge’s picture

please say some steps how to fix hover color to primary cufone

add1sun’s picture

Title: Cufon & IE8 & Hover state » Document Cufon IE8 visibility
Category: support » task

Visibility is used instead of display due to IE7 ghosting bugs. NOt much to do here other than maybe to document what people are using to fix this. Moving to a docs task.

musicnode’s picture

Assigned: Unassigned » musicnode
Status: Active » Fixed

First time drupal contributor. Updated the Nice Menus FAQ with the solutions provided by #4 and #6 comments at http://drupal.org/node/195157.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

bpwt’s picture

Thank you very much for the help andb . It is working fine for me.


extensive’s picture

Many Thanks
This code sortout cufon and ie8 dropdown menus issues.

rajkumar.myth’s picture

million thanks...

this line

#nice-menu-1 ul {
visibility: visible !important;
display: none;

saved me a lot...


tran_tien’s picture

That is. Thank you very much!

omvaishnav’s picture

It's working fine.. Thanks a lot !!!

FilipWitkowski’s picture

The visibility of the tag which it to be replaced by cufon needs to be visible. That worked for me.