I have this spry drop down menu and whenever you hover over a menu item using IE6, the hover color changes to #88b2ea. Problem is that IE6 is choosing that color automatically and I cannot figure out how to change it. Any ideas?
Here is the menu:
http://www.jwebxpress.com/portfolio/jwx_2/
Here is the CSS file:
http://www.jwebxpress.com/portfolio/jwx_2/styles/ie6.css
Too bad Javascript is required to view content : (
So based on just your text, likely IE6 is just taking some older value and really wants you to be more specific.
In making dropdowns (and tables and other things) I’ve sometimes found that IE6 required me to make a separate, hidden-away statement that was simply more specific for link colours. I would hide them behind the Tan Hack just to make sure repeating something didn’t screw with other browsers:
(some page I had a calendar table with clickable days)
td {
colour set here;
}
td a {
styles and link colour here;
}
td a.foo {
other styles;
}
td a:hover {
special hover styles and colour;
}
IE would then need something like
or something.
At least testing that out could tell you if my hunch is in the right direction.
Hi, for one thing you are using PNGs on your page so you need to use a PNGfix for that, like twinhelix
Second, remove that stylesheet you have for IE6 specifically, it’s not needed at all.
Get that PNG fix in there first and then we will worry about everything else.
Okay, I got the pngfix in place but I do not know which tags ti add to it.
Well go throuigh your HTML/CSS and figure out which elements have PNGs applied.
Then just add onto the selector as such
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
Note that the location of the PNGfix may vary depending on where you put it.
The only locations where I have png’s are:
These first two are the only transparent ones.
In styles.css
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background:url(../_images/linkBackground.png) repeat-x;
color: #FF0;
text-decoration:underline;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background:url(../_images/linkBackground.png) repeat-x;
color: #FF0;
}
in SpryMenuBarHorizontal.css
#navHeader {
background:url(../_images/navHeader.png) repeat-x;
display:inline;
float:left;
height:300px;
margin:0 auto;
width:900px;
}
Well sincve one PNg is applied to <a> we will addd that to our list…#navHeader in the HTML is a <div> so lets add that…
<style type=“text/css”>
img, div, a{ behavior: url(iepngfix.htc) }
</style>
Can’t for the life of me figure this out. I’ve included a link to the files if anyone is willing to give it a shot.
There’s a little progress but it does not allow repeat-x
Okay, I almost got it working. I added:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
But now I have this problem (Seems to float to the right):
Have you updated the link as I’m seeing something different in Ie6? (I believe you also need to the whatever:hover with that script if you want to add transparency on rollover in IE6 (unless your other script is handling it somehow))
Hi, make sure the padding/margins are set to 0 on the <ul> and you don’t set a width on the <ul> dropdown 
I’m not seeing it either so if you are still seeing it then you might wanna clear your cache.
I’ll look into both suggestion and get back with an update. I did clear my cache however and even tried it on a different computer and I’m still getting the same effect.
Update:
Okay, removed the padding but now all my links are all mushed together. Is there another way beside padding I can us to separate the items?
Think I found the problem. Originally for padding I had
padding: 1em 1.3em;
I seems when I changed the 1.3em to 10px, this fixed the problem. I think that IE6 is having problems with em’s