Navigation menu with png transparency dont show off in IE

[Alexandre Planta]

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!

[apostrophe]

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;
}

[apostrophe]

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:

Code:

• empresa
• portfolio
• contato

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;
}

[Alexandre Planta]

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:

[Alexandre Planta]

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

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

[apostrophe]

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.

[Author]

Posts