PDA

View Full Version : jQuery menu and Transparent PNGs



DigitalDisaster
04-13-2009, 09:33 PM
1) Script Title:
jQuery Multi Level CSS Menu #2

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem:
Currently working on a prelim design for my company to submit to our hosts design team (they do a good job but tend to miss understand a lot of what we ask so I've decided to show them what we want) so they can re-write for the xml and all the fancy things they have to make our lives easy and I've hit a small snag. For the jQuery script I've replaced the background image with a transparent PNG file at about 50% opacity and the menu is no longer reading the CSS for a:link and a:active. I've also removed the arrows. It has made the colors white (from a dark gray). Now that wouldn't be a problem if the background image wasn't also white. The a:hover has preserved it's value just fine and turns to the correct shade of blue-gray.

This is not browser specific, I have tested and confirmed on IE6,7&8, Chrome, FF2&3 and Opera 9.

Fixes that I've found so far:
1) Changing background-image to background-color and setting the #html value and applying the opacity and filter settings. The problem with that is the child objects inherit the transparency and at 50-75% opacity even making the text black it becomes hard to read. And I'm unable to find a hack that corrects this (IE 8 appears to have fixed this... but it still has a host of other issues that IE hasn't ditched yet).

2)Applying a non transparent image and setting the transparency to flow with the rest of the site, again leaving me with the child objects inheriting transparency value.

3)Restyle the color for each individual link in the menu on the page (will be a lot of work and make messier code than I'd like to submit to the dev team).

Right now I'm at a loss, I'm either missing something in the code (entirely possible, I'm new to javascript and don't do advanced CSS), it's a problem with the JQuery library or javascript itself. And since it's fixed as simply as resetting the image to a .jpg for example I don't think it's code. I'm also not so sure it's CSS as I'm using the same CSS and background image all over the rest of the site in areas with no javascript and it's working fine. Thoughts, comments, suggestions, experience, criticism, whatever else all welcome.

DigitalDisaster
04-13-2009, 10:57 PM
Got it fixed.

There was a small line that was incomplete in the CSS file for the menu from when I was deciding between a transparent background image or color. I simply didn't delete the whole line. I guess that's the kind of stuff I find when I decide to re-write the CSS top down. Thanks to all those that may have been researching the problem.