bgsleight css hover problem

[theylan]

Hi all,
I'm having awful problems getting png transpancy in IE on the "hover" pictures of my css script. The initial pictures show the transparency fine, but when I hover over them it doesn't show the transparency on those images. I've googled it but can't find anything - if someone could point me in the right direction I would be most appreciative. :)

[collymellon]

Have you got a code snippet?

[theylan]

the files I've got are:

#navbar {
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
width: 608px;
height: 75px;
margin: 0;
padding: 0;
position: relative;
}

#navbar ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;

}

#navbar ul li {
position: absolute;
}

#navbar li ul {
position: absolute;
left: 0px;
top: 55px;
display: none;
}

#navbar ul li a {
display: block;
height: 83px;
width: 131px;
text-indent: -5000px;
text-decoration: none;

text-decoration: none;
color: #777;
/*background: transparent; */
padding: 5px;
border: none;
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: bottom; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#navbar li:hover ul, li.over ul { display: block; } /* The magic */

#btn01 {left: 50px;background: transparent url(../images/HOME1.png) no-repeat; }
#btn01 a:hover {background: transparent url(../images/HOME.png) no-repeat; }

#btn02 {left: 150px;background: transparent url(../images/about1.png) no-repeat; }
#btn02 a:hover {background: transparent url(../images/about.png) no-repeat; }

#btn03 {left: 250px;background: transparent url(../images/events1.png) no-repeat; }
#btn03 a:hover {background: transparent url(../images/events.png) no-repeat; }

#btn04 {left: 350px;background: transparent url(../images/shop1.png) no-repeat; }
#btn04 a:hover {background: transparent url(../images/shop.png) no-repeat; }

#btn05 {left: 450px;background: transparent url(../images/contact1.png) no-repeat; }
#btn05 a:hover {background: transparent url(../images/contact.png) no-repeat; }

#btn06 {background: transparent url(../images/instructor1.png) no-repeat; }
#btn06 a:hover {background: transparent url(../images/instructor.png) no-repeat; }

#btn07 {background: transparent url(../images/swimschool1.png) no-repeat; }
#btn07 a:hover {background: transparent url(../images/swimschool.png) no-repeat; }

#btn08 {background: transparent url(../images/facilities1.png) no-repeat; }
#btn08 a:hover {background: transparent url(../images/facilities.png) no-repeat; }

#btn09 {background: transparent url(../images/clients1.png) no-repeat; }
#btn09 a:hover {background: transparent url(../images/clients.png) no-repeat; }

#btn10 {background: transparent url(../images/gladiators1.png) no-repeat; }
#btn10 a:hover {background: transparent url(../images/gladiators.png) no-repeat; }

#btn11 {background: transparent url(../images/termtimes1.png) no-repeat; }
#btn11 a:hover {background: transparent url(../images/termtimes.png) no-repeat; }

a cut down version of the index just showing the menu bit that needs to be formatted - this doesn't really look how it would as it is missing most of the pictures, but you get the idea! :)
Thanks for your time!

[edited by: jatar_k at 4:34 pm (utc) on June 28, 2006]
[edit reason] added css file, no urls thanks [/edit]

[doodlebee]

Correct me if I'm wrong - but IE doesn't support transparency in PNGs - only GIFs.

Again, I may be wrong on that, but I'm pretty sure I'm right.

[theylan]

IE supports png transparency natively if restricted to 256 colours, but there are a number of workarounds in order to get better results - the javascript I mentioned is one such workaround, google it and it's all over the place. I have not had a problem with getting transparency normally - I am just having problems getting the hover pictures to have transparency.

Thank you for the suggestion though, I would use gifs, but I need higher quality menu components and 256 colours just doesn't cut it :)

The only thing I can think is that the javascript is not working on the hover components as the hover components are not loaded at the same time as the css is called, so maybe i could call the java script in the css file? I don't really know 100% how to do that though, and I have read that it isn't the best of ideas to do that anyway :S

Anywho, any other ideas as to why the normal menu pngs are displaying the transparency fine with the workaround, whereas the hover components don't, will be welcomed with open arms! :)

Thanks again all