Cufon Text Dissappears in IE

CSSQuest · 09-26-2010, 04:02 AM

The site: http://homemastergroup.com

You'll notice the drop-down navigation text doesn't appear in Internet Explorer.

Any ideas why? Thanks!

Apostropartheid · 09-26-2010, 04:36 PM

That's odd.
Have you considered using proper CSS 3 web-fonts? They'd work well in IE and any modern browser.

CSSQuest · 09-30-2010, 02:04 PM

I've started thinking about those. I've been nervous about using them because I'm not always 100% of how loading a full font file online would work copyright-wise.

I started using the font-kits from places like Font Squirrel - but the @font-face attribute still looks so different from browser to browser. Top that off with the fact Macs always seem to thicken the font / Windows always seems to make the font really thin.

Cufon seems to be the only solution that won't risk using fonts inappropriately and won't display so differently cross browser/platform.

Thanks for the tip though!

_Aerospace_Eng_ · 09-30-2010, 02:12 PM

Where is your call to Cufon.now()? It has been recommended that IE needs this for Cufon to work properly.

CSSQuest · 09-30-2010, 08:59 PM

Thanks Aerospace_Eng - I added the Cufon.now() function at the footer of my page.

Unfortunately still no luck. Any other ideas?

Thanks!

_Aerospace_Eng_ · 10-01-2010, 01:13 AM

Do your links show up in IE if you disable Cufon?

SB65 · 10-01-2010, 08:17 AM

There was a similar thread here a few months ago. You'll see that a user fixed a similar problem by changing the way the menus are hidden - looks like IE8 doesn't play nice when the menu is hidden via visibility:none - as here. So you could try changing your show/hide from visibility:hidden/visible to display:none/block or via a left margin.

Alternately, if this doesn't work, the links are OK in IE7 so you could as a fallback apply compatibility mode to the page via

Code:

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

EDIT: Ah. From the Cufon css page:

Quote:

You can’t use visibility: hidden with elements containing Cufónized text in Internet Explorer 8 unless you set it after calling Cufon.replace(). In other words, visibility must not be hidden when Cufon.replace() is called. Other than that it is fine. There are no problems with display: none.

CSSQuest · 10-01-2010, 02:04 PM

SB65,

Thanks for your help! I'll give these solutions a shot - it makes sense. It looks like the easiest is to change from visibility to display and hide it that way.

CSSQuest · 10-01-2010, 02:24 PM

Just changed the drop downs from visibility to display:none and everything works flawlessly.

That would have taken me forever to figure out.

Thanks so much!