Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu looking different in IE8 but fine with FF and Chrome

    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:

    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:



    And the menu in Firefox or Chrome:



    What am I doing wrong?
    Last edited by Niels80; 12-17-2009 at 10:44 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you post a link to your page?

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    seems like a problem with png saving options.

    what options were selected while saving png in photoshop.

    vineet

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vineet View Post
    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.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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 this for a fix.

  • Users who have thanked SB65 for this post:

    Niels80 (12-17-2009)

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that link

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •