Glossy Vertical Menu - IE and Chrome not displaying correctly

[DAN682]

Hi As per plenty of the comments actually on the following page:
http://www.dynamicdrive.com/style/cs...vertical-menu/

I am having the world of problems making this menu work with IE7 and 8 but mainly 8.

I am using Safari 4 and Firefox and it displays perfectly.

However, running Google Chrome and IE8 I just get a white box.

Even when I mouse over it just stays white.

I have not modified the CSS except for the image locations, but here it is anyway.

Please help!!

Thanks

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(/pages/media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 170px;
}


.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(/pages/media/glossyback2.gif);
}

[ddadmin]

Does the issue occur on the DD demo page as well? If not, it sounds like an image path issue on your end. Try changing them inside the code to absolute URLs, for example:

http://mysite.com/pages/media/glossyback.gif

[Elkidogz]

are you using PNG's? if so you might want to look around for the png IE fix that resolves transparency issues within IE.

Also, your hover class probably isn't working correctly with multiple versions of IE. there is also a fix for that. I will see if I can dig them up.

[DAN682]

Hi, Thanks for the replies.

Firstly I am using Gif's.

When I go to dynamicdrive with IE, it works.

I put the gif up a level and it still didn't work, so I tried downloading the gif and was presented with a red cross.

I re-created the files (as I changed the colour to yellow) and re-uploaded.

It works!

The new problem I have, is if I leave the <style> tags in the .css, I get bullets in Safari but not IE. If I remove the <style> it displays perfect in Safari and Firefox, but not IE, I get a think Band on the left hand side.

Also another thing which is annoying me and please help me if you know the fix, is that the menu is centring on the frame so I am getting scrollbars on the frame.

Cheers

[Elkidogz]

actually you can specify IE code with comments specificly for IE.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

This link explains it in good detail. but you can also just label these with <!--[if IE]> for all versions of IE... but beware that sometimes IE6, 7, 8 will all act differently. so put the style code in the brackets at top and bottom of the css and that should do the trick.
http://www.quirksmode.org/css/condcom.html