Welcome to WebmasterWorld Guest from 107.20.34.173

Forum Moderators: not2easy

Message Too Old, No Replies

bgsleight css hover problem

     

theylan

11:20 am on Jun 28, 2006 (gmt 0)

5+ Year Member



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

1:56 pm on Jun 28, 2006 (gmt 0)

10+ Year Member



Have you got a code snippet?

theylan

4:04 pm on Jun 28, 2006 (gmt 0)

5+ Year Member



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

5:53 pm on Jun 28, 2006 (gmt 0)

10+ Year Member



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

11:20 pm on Jun 28, 2006 (gmt 0)

5+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month