My drop down menu works fine in Firefox, Chrome, and Opera, but won't display properly in Explorer. I want my main menu bar to have the gradient background and the submenu to have a white background. However, this problem occurs only in Explorer, the submenu will drop down with gradient bars for each menu item instead of displaying the white background. Below is a screen shot and the website is: vacuumchambers.net. How do I fix this? Thank you!!! I really appreciate any help you can give me. I've been struggling with this for weeks!
What version if IE are you seeing this on? IE6 or below don't support native PNG transparency. I notice your 'yellow' gradient is a png file - wont work on IE without a fix.
You can add the PNGFIX script from here: http://www.twinhelix.com/css/iepngfix/
On a sidenote, if you are testing on IE7 or lower, I dont think you should really break your head doing this - as they're almost already obsolete.
Thank you for the info regarding the PNG transparency. I decided to remove the PNG and replace it with a border. I'm using IE10 and I was able to figure out how to get the drop down background to display as white. Now, IE is showing a large gap between the main menu links and the drop down menus. Chrome is showing a very small gap, and Opera is aligned perfectly. How do I remove this space?
Also, this is probably a very silly observation and question, but I noticed on the FTP site that 3 index pages exist.
Did I create all these files and are all of them necessary? If I don't need all of them, which one should I keep? All 3 index pages seem to update when I make changes.
It would have made this a lot easier if you had posted the link to your site. Because we are now not in a position to look at your markup and CSS, we are only guessing.
In SpryMenuBarHorizontal.css, near the bottom of the page, you will see the style rules for IE and a line that shows the background colour as #FFFFFF. Change the value to transparent and see what happens.
Looking at your site at http://vacuumchambers.net, I can see you've made a lot of changes to your Spry CSS code. Quite frankly, nothing about it looks right. I don't blame you for this. Spry code is clunky & hard to work with. Spry was built in 2006 way before most of the modern browsers we use today. Also spry drop-menus don't work on touch screen devices. So long story short, Adobe abandoned Spry last year.
I think your site deserves a better menu system. One that looks professional & actually works in all modern devices. Pre-IE8 browsers shouldn't be a major concern to you. Almost nobody uses them.
If you have a budget to work with, get PVII's Pop-Menu Magic2.
Or use jQuery.