Link to the picture:
Opacity Menu
Does it display the same for you in your browser?
How can I fix this?
Yes – the green text is unreadable in Firefox.
The green text should be white…
CSS:
#navigare a {
text-decoration:none;
color:#FFF;
opacity:0.5;
filter:alpha(opacity=50);
}
#navigare a:hover, #navigare li.ales a, #navigare li:hover li.ales a {
opacity:1;
filter:alpha(opacity=100);
color:#000;
}
Definitely looks like a very light lime green here (and this monitor tends to be set with a slightly lower-than-average brightness, so I don’t think it’s just a glare effect).
Have you looked at using rgba for the color instead of hex colors? It might offer better cross-browser rendering.
RGBA works, you rock! THANK YOU!
I have the same greenish effect when using
color: rgba(255, 255, 255, 1);
and it’s all fixed with
color: rgba(255, 255, 255, 0);
Gotta test this on other browsers too.
Excellent! I’ve just started playing with rgba myself and I’m finding it really useful.
Sadly, IE shows the whole menu wrong… The images are pixeled and their contour seems like being cut with an ax!
I found a hack but don’t know what’s with those numbers:
<!--[if IE]>
<style type="text/css">
.color-block {
color:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
This fixes the roughness on the edges but changes the font of the text and the distance between the items, bringing more headaches…
I found a hack
That’s not a hack, as such. That’s conditional comment CSS and it makes living with IE so much more bearable.
It’s a good thing IE supports conditional stylesheets.
It’s not such a good thing some people use IE.
