...

View Full Version : Menu looking different in IE8 but fine with FF and Chrome



Niels80
12-17-2009, 10:33 AM
Hi,

I'm working with a downloaded template which I've edited a bit to my personal style. However after editing some parts of the CSS the menu it doesn't look right anymore in IE8. It works fine with Firefox and Chrome however.

Below is the code:


/* @override http://demotemplates.joomlashack.com/optimus/templates/js_optimus/css/nav.css */
/* @group NAVBAR */
#nav {height:42px;z-index:500;float:none;}
#nav ul {list-style:none;line-height:42px;padding-top:0px;}
#nav ul li {position:relative;margin:0;}
#nav a {text-decoration:none;display:block;cursor:pointer;height:42px;padding:0px 0px 0px 7px;margin:0px 0px 0px 8px;}
#nav li a:hover {height:42px;}
#nav li {float:left;padding:0;padding:0px 7px 0px 0px;}
#nav ul ul a {background:none;}
#nav ul ul {border:none;}
#nav li li a {font-weight:normal;padding:0;margin:0;height:26px;line-height:26px;text-indent:5px;}
#nav ul ul a {display:block;text-decoration:none;text-transform:none;}
#nav li li {padding:0;background:none;}
#nav li li {float:left;padding:0;}
#nav li:hover, #nav li.iehover {left:0;}
#nav ul ul a:hover {background:none;height:26px;line-height:26px;padding:0;margin:0;}
#nav li ul {position:absolute;left:-999em;height:auto;font-weight:normal;border-width:0;margin:0;padding:0;border-bottom:none;}
#nav li:hover,#nav li.iehover {position: static;}
/* Pro */
#nav ul li ul li a.child,#nav ul li ul li a.child:hover,#nav ul li#current ul li a.child,#nav ul li#current ul li a.child:hover {background:url(../images/arrow_right.gif) 100% 50% no-repeat;}
#nav ul li.active ul li a.child,#nav ul li.haschild.active ul li#current a.child {background:url(../images/arrow_right.gif) 100% 50% no-repeat;}
#nav li:hover ul ul, #nav li:hover ul ul ul,#nav li:hover ul ul ul ul, #nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul ul ul {left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,#nav li li li li:hover ul,#nav li.iehover ul, #nav li li.iehover ul,#nav li li li.iehover ul,#nav li li li li.iehover ul {z-index:100;left:auto;}

#nav ul ul li a {border-right:none;}
#nav a {text-transform:none;}
#nav ul li:hover li:hover,#nav ul li#current ul li a,#nav ul li#current ul li,#nav ul li#current ul li a:hover,#nav ul li#current ul li.hover, #nav li.haschild:hover li span,#nav li.haschild.iehover li span,#nav li.iehover li span,#nav ul li li a,#nav ul li.haschild li#current a,#nav ul li.haschild li#current,#nav ul li.iehover li.iehover, #nav ul li ul li a:hover,#nav ul li ul li:hover,#nav ul li ul li.iehover {background-image:none;}
#nav li ul ul {margin: -26px 0 0 173px;}

/* @end */

I've edited line 3, height value was 52px now 42px and line 4, padding top was 10px now 0px

Before this edit it all looked fine in all browsers. After the edit it looks like this in IE8:

http://www.cilentocasa.nl/pics/menu.jpg

And the menu in Firefox or Chrome:

http://www.cilentocasa.nl/pics/menu2.jpg

What am I doing wrong?

SB65
12-17-2009, 12:19 PM
Can you post a link to your page?

Niels80
12-17-2009, 12:24 PM
http://cilentocasa.nl/dev/

vineet
12-17-2009, 01:06 PM
seems like a problem with png saving options.

what options were selected while saving png in photoshop.

vineet

Niels80
12-17-2009, 01:30 PM
seems like a problem with png saving options.

what options were selected while saving png in photoshop.

vineet
The original files were included within the template package.

I've edited the menu images however in Paint and just saved them (there's no other option). Don't have Photoshop here.

SB65
12-17-2009, 01:44 PM
I agree with Vineet - just tried a local copy and converted your pngs to gifs - and changing nav_bg.png is what fixed IE. This might be an option for you or have a read of thi (http://www.spencersundell.com/blog/2006/11/29/png_color_gamma_issues_in_ie7_and_a_workaround/)s for a fix.

Niels80
12-17-2009, 01:55 PM
Thanks for that link :D

Downloaded the software and deleted the gamma chunk from the png-file. Problem solved :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum