View Full Version : Menu Not Showing Up In IE 9.0 - Browser Bug?

02-02-2012, 02:03 PM
I'm having an issue in Internet Explorer 9.0 that is not happening in any other browsers that I've checked. I can't pinpoint where the issue is, but I gather it's a browser bug, probably in the stylesheet. I've validated the entire site, it's error free.

Here's the link:
Promote First (http://www.promote1st.com)
(Keep in mind the site is a work in progress so it's unfinished yet)

You'll notice that it should look fine in all browsers except Internet explorer 9.0. In IE 9.0 the menu at the top right disappears and doesn't show up properly.

Link to stylesheet:

I'm thinking it has something to do with the navigation class in the stylesheet, something in there bugging IE out.

Link to the navigation menu:

Code to navigation menu:

<ul class="navigation">
<li><a href="http://www.promote1st.com/clients/">Login</a></li>
<li><a href="#">sitemap</a></li>
<li><a href="#">Help</a></li>
</ul><?php /* End Sub-menu */ ?>

<div class="clear"></div>

<ul class="menu">
<li><a class="active" href="http://www.promote1st.com">about us</a></li>
<li><a href="">services</a></li>
<li><a href="">solutions</a></li>
<li><a href="">support</a></li>
<li><a href="">partners</a></li>
<li><a href="mailto:don@promote1st.com">contact us</a></li>
</ul><?php /* End Menu */ ?>

Thank you for your time and any assistance with this issue.

02-02-2012, 03:18 PM
Good morning wolfcry044,
I didn't mess with this a lot once I saw you were using cufon so I may be wrong.
When you don't give your floated elements a width, it has to be inherited from something. The only thing .fright, .menu or .menu li can get a width from is the text of the anchors and those have no width if your cufon is not working.


02-02-2012, 03:22 PM
Oh.. Cufon doesn't work in IE 9.0... that explains it.

02-02-2012, 03:28 PM
*Edit* I replaced the cufon file and now the font is dark and bold, the same as it is without cufon active

02-02-2012, 03:28 PM
Hi there wolfcry044,

it seems that the cause of your problems in IE9 is this...

<script src="js/cufon-replace.js" type="text/javascript"></script>

...which has this single line of code...

Cufon.replace('.menu li, h3', { fontFamily: 'Swis721 Lt BT', hover:true });

I have not tested the problem in IE8.

This code...

<!--[if !IE 9]><!-->
<script src="js/cufon-replace.js" type="text/javascript"></script>

...would resolve the problem for IE9 only.
This code..

<!--[if !IE]><!-->
<script src="js/cufon-replace.js" type="text/javascript"></script>

...would resolve the problem for all IE browsers.


02-02-2012, 03:33 PM
Like this?

<?php /* IE Conditional Styling */ ?>
<!--[if lt IE 7]>
<link href="ie_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">

<!--[if !IE]><!-->
<script src="js/cufon-replace.js" type="text/javascript"></script>

<?php /* Script Sources*/ ?>
<script src="http://www.promote1st.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Swis721_Lt_BT_400.font.js" type="text/javascript"></script>

02-02-2012, 03:37 PM
When I put the new cufon file in, it works in all browsers but the font goes from smaller and lighter (the way it was originally) to extremely dark and bold. How do I fix that?

02-02-2012, 04:01 PM
For the life of me I can't figure out why that new cufon file messed up the font. Tried looking at the code in the cufon file but it's just a big wall of code, don't know where to begin to look for what's causing it.

It doesn't look good dark and bold like that.

Looks like the cufon-yui isn't being read now, that's why it's bolded. For some reason it's not reading that it's there anymore

02-02-2012, 04:19 PM
I got it. I downloaded cufon-yui.js from the following location:

And it works now. The file they had on the other site must have not been in the right format or something.