My Menu won't work in IE

[dpDesignz]

Hey guys

I'm having a little trouble with one of my sites in IE, but can't work it out.

The site is www.dbnzcoatings.co.nz, and I'm having clients tell me the menu won't show in IE, however it works for me.

Can anyone see anything wrong?

Thanks.

[calsta]

it works for me

[dpDesignz]

This is what they see



This is my code
php

PHP Code:

    <div id="menu">
        <div class="centre">
            <ul>
                <li class="active first">Home</li>
                <li><a href="info.html">Company Info</a></li>
                <li class="submenu">Product Range</li>
                <li class="products"><a class="fancybox fancybox.iframe" href="http://www.debeer.com.au/" title="De Beer Australia">De Beer</a></li>
                <li class="products"><a class="fancybox fancybox.iframe" href="http://www.valsparautomotive.com.au/" title="Valspar Australia">Valspar</a></li>
                <li class="products"><a class="fancybox fancybox.iframe" href="http://www.licindustrial.com.au/" title="LIC Australia">LIC</a></li>
                <li class="products"><a href="saima.htm">SAIMA</a></li>
                <li><a href="fleetlink.html">Fleetlink</a></li>
                <li><a href="distributors.html">Distributors</a></li>
                <li><a class="fancybox fancybox.iframe" href="http://www.smart-trade.co.nz/" target="_blank">Rewards</a></li>
                <li><a href="contact.html">Contact</a></li>    
<?php 
if (isset($_SESSION['user_id'])) {
echo "<li><a href='members/myaccount.php'>My Account</a></li>";
} else {
            echo "<li><a href='members/login.php'>Distributor Login</a></li>";            
}
?>
                </ul>
        </div>
    </div>

css

#menu {background:url('../images/menu_bg.png') repeat-x; background-color:#000; height:30px;}
#menu ul {list-style:none; height:auto;}
#menu ul li {background:url('../images/separator.jpg') no-repeat top left; color:#fff; font-family:"ITC Stone Sans", "lucida Grande", "Lucida Sans Unicode", Verdana, Arial; font-style:italic; font-size:12px; float:left; height:17px; padding:3px 0 5px 25px;}
#menu ul li.submenu {color:#79858b;}
#menu ul li.products, #menu ul li.first {background:none;}
#menu ul li.first {padding-left:0;}
#menu ul li.active {color:#e42518;}
#menu ul li a:link, #menu ul li a:visited {color:#fff; text-decoration:none;}
#menu ul li a:hover {color:#e42518;}

[sunfighter]

In IE8, I see the menu, but the top log in section is gone.
http://validator.w3.org/ says you have 12 errors. Don't know if that will cause this problem, but they should be fixed so they wont cause others.

PS. with IE different ver. yield different errors. What ver. are your users using that have this problem?

[dpDesignz]

Originally Posted by sunfighter

In IE8, I see the menu, but the top log in section is gone.
http://validator.w3.org/ says you have 12 errors. Don't know if that will cause this problem, but they should be fixed so they wont cause others.

PS. with IE different ver. yield different errors. What ver. are your users using that have this problem?

Thanks. Yes some customers had problems with the login box not showing so we hid that for IE and it's an extra button on the menu.

Thanks. I hadn't even thought of validating. Such an idiot.

I think the problem IE is IE7-8 and 9 without compatibility on it

EDIT: did you say you got 12 errors? I only came up with 2? they were both margins

[dpDesignz]

Ok so validated and fixed but still can't find any errors. Could it be the custom cufon text?

[sunfighter]

I did it (validate) by giving it the page name = http://www.dbnzcoatings.co.nz/
Did it again and got 4 errors:
Line 60, Column 40: there is no attribute "src"

… <embed src='header-image.swf' width='308' height='1…
Error Line 60, Column 65: there is no attribute "width"

… <embed src='header-image.swf' width='308' height='150'></embed>
Line 60, Column 78: there is no attribute "height"

… <embed src='header-image.swf' width='308' height='150'></embed>
Line 60, Column 83: element "embed" undefined

… <embed src='header-image.swf' width='308' height='150'></embed>

Looked at site again with IE8 and it looks correct. The DBNZ is down from the top, in same place as it is in FF. Menu is there.

Menu in both IE and FF, the word 'product range' is grayed out and does not turn red on mouse over.

[dpDesignz]

Yup. I get the exact same results as you, but the clients all seem to get the screenshot above. Any ideas?

[sunfighter]

Here's my guess, and it is a guess, the two divs one contains the player and the other is the logo. They seem to be out of sync.

Here is just the basic divs with most things removed:

// this is the main div
<div id="header" style="border: blue solid 1px;">
    // this is auto centered to display the next two divs
    <div class="centre header" style="border: purple solid 1px;">
	// this is the movie player it is floated right
        <div id='logo2' style="border: red solid 1px;">
	        <object width='308' height='150'>
                <param name='movie' value='header-image.swf' />
                <embed src='header-image.swf' width='308' height='150'>
            </object>
        </div>
		
	// this is the logo. And what I think is the problem
	<div class="intro" style="border: green solid 1px;">
            <img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
        </div>
    </div>
</div>

The logo comes after the player. The logo is not floated left. The logo has to be squashed to get it to appear before the player.

What I suggest is to change the css this way:

#logo2
{
	float:right;
	padding-bottom:5px;
}
.intro
{
	float:left;
	padding-top:85px;
	width:550px;
}

and put the logo before the player in the html:

<div id="header">
    <div class="centre header">
	<div class="intro">
            <img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
        </div>
        <div id='logo2'>
	        <object width='308' height='150'>
                <param name='movie' value='header-image.swf' />
                <embed src='header-image.swf' width='308' height='150'>
            </object>
        </div>

    </div>
</div>

[dpDesignz]

Originally Posted by sunfighter

Here's my guess, and it is a guess, the two divs one contains the player and the other is the logo. They seem to be out of sync.

Here is just the basic divs with most things removed:

// this is the main div
<div id="header" style="border: blue solid 1px;">
    // this is auto centered to display the next two divs
    <div class="centre header" style="border: purple solid 1px;">
	// this is the movie player it is floated right
        <div id='logo2' style="border: red solid 1px;">
	        <object width='308' height='150'>
                <param name='movie' value='header-image.swf' />
                <embed src='header-image.swf' width='308' height='150'>
            </object>
        </div>
		
	// this is the logo. And what I think is the problem
	<div class="intro" style="border: green solid 1px;">
            <img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
        </div>
    </div>
</div>

The logo comes after the player. The logo is not floated left. The logo has to be squashed to get it to appear before the player.

What I suggest is to change the css this way:

#logo2
{
	float:right;
	padding-bottom:5px;
}
.intro
{
	float:left;
	padding-top:85px;
	width:550px;
}

and put the logo before the player in the html:

<div id="header">
    <div class="centre header">
	<div class="intro">
            <img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
        </div>
        <div id='logo2'>
	        <object width='308' height='150'>
                <param name='movie' value='header-image.swf' />
                <embed src='header-image.swf' width='308' height='150'>
            </object>
        </div>

    </div>
</div>

Thanks heaps. I tried this, in fact I actually removed the player as we don't want that any more but still no change. hmm. any other ideas?

[Candygirl]

Hello,

	<!--[if IE]>
		<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<![endif]-->

This seams to be for IE6 only but you use it for all IE versions. Is it normal?

For your main problem, look at your website in IE9, open the debug bar with F12. Click on the + next to html to open it, same for the head. Look at the end in the head and you will see 2 <style> tags. You click on the second one to open it:

.cufon-vml-canvas{text-indent:0}@media screen{cvml\:shape,cvml\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute}.cufon-vml-canvas{position:absolute;text-align:left}.cufon-vml{display:inline-block;position:relative;vertical-align:middle}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none}.cufon-vml .cufon-alt{display:inline}}

then click on the css line, use the keyboard "delete", click anywhere else and you'll see your menu appearing in IE9.

You should looking where this comes from...