homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

bgsleight css hover problem

5+ Year Member

Msg#: 9316 posted 11:20 am on Jun 28, 2006 (gmt 0)

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. :)



10+ Year Member

Msg#: 9316 posted 1:56 pm on Jun 28, 2006 (gmt 0)

Have you got a code snippet?


5+ Year Member

Msg#: 9316 posted 4:04 pm on Jun 28, 2006 (gmt 0)

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]


10+ Year Member

Msg#: 9316 posted 5:53 pm on Jun 28, 2006 (gmt 0)

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.


5+ Year Member

Msg#: 9316 posted 11:20 pm on Jun 28, 2006 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved