Grow your CSS skills. Land your dream job.

Navigation menu with png transparency dont show off in IE

  • # May 27, 2009 at 10:43 pm

    Hello guys,

    I Look in the forum but all the solution just dont seems to fit in my problem… here is the thing, i used the "better coda slider (JQuery)" to make my site, but after a few fix like png transparency and some margin problems with ie i can finally solve all the problems… but not the navigation menu problem… in ie my background image dont appear… it can be clicked but it just dont show off…

    the link:
    http://www.1deia.com/indexsli.html

    Any… any suggestion is welcome, and i really sorry for my bad english…
    Thankz for the attention!

    # May 28, 2009 at 3:33 am

    I must admit I can’t see why it’s not showing in ie but try this:

    Code:
    #slider {
    margin:auto;
    position:relative;
    width:620px;
    z-index:1;
    }

    ul.navigation {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:12px 15px 0 40px;
    position:relative;
    z-index:2;
    }

    # May 28, 2009 at 5:51 am

    Actually I just had another look and I’m pretty sure it’s because your nav is empty. The images in your css are supposed to replace the nav links, you have nothing there to replace. After messing about with firebug I think this should work:

    and the css:

    Code:
    ul.navigation {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    position:absolute;
    top:-30px;
    z-index:1;
    }

    ul.navigation li {
    display:inline;
    float:left;
    }
    ul.navigation a {
    color:#FFFFFF;
    padding:0 37px 0 0;
    text-indent:-9999px;
    display:block;
    height:86px;
    }

    ul.navigation li.empresa a {
    background:transparent url(images/ehome.png) no-repeat scroll 0 0;
    width:143px;
    }

    ul.navigation li.empresa a:hover, ul.navigation li.empresa a.selected {
    background-position: 0 -120px;
    }

    ul.navigation li.portfolio a {
    background:transparent url(images/port.png) no-repeat scroll 0 0;
    width:143px;
    }

    ul.navigation li.portfolio a:hover, ul.navigation li.portfolio a.selected {
    background-position: 0 -122px;
    }

    ul.navigation li.contato a {
    background:transparent url(images/cont.png) no-repeat scroll 0 0;
    width:157px;
    }
    ul.navigation li.contato a:hover, ul.navigation li.contato a.selected {
    background-position: 0 -121px;
    }

    .scroll {
    background:transparent url(images/bgcontainer.png) repeat scroll 0 0;
    clear:left;
    height:260px;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    top:34px;
    width:620px;
    z-index:0;
    }

    # May 28, 2009 at 10:22 am

    Wow!
    Works like a charm! Nice hacks!
    i get some margin problems but i can figute it out, but in ie6 i can get the effect a:hover on the menu, u know why?

    Thankz for this, i really appreciate it. :mrgreen:

    # May 28, 2009 at 10:48 am

    I forgot to put the link again of the new site with the hacks by apostrophe,

    http://www.1deia.com/indexsli.html

    # May 28, 2009 at 10:59 am

    I’m on a mac so I can only guess. I reckon it’s because whatever png hack you are using for ie6 doesn’t support background position.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".