I'm using the following and it works fine in firefox and opera but not ie. any workarounds?
Craig.
#languages a span { display: none; } #languages a:hover span { color:#665531; background:#F9F7F2; font: 18px bold Arial, Helvetica, sans-serif; display: block; position: absolute; top: 0px; left: 200px; width: 350px; margin: 2px 2px 2px 2px; padding: 4px; text-align:left; }
<div id="languages"> <ul> <li><a href="index1024.htm">English<span>View the site in English</span></a></li> <li><a href="indexEspañol.htm">Español<span>Vea la página web en español</span></a></li> </ul> </div>
Thanks.
ie fix for span a:hover span
Hi craigtaylor74,
You need to make a change to something in the "A" on hover to get it to work in IE.
Try something like
#languages a{color:blue;} #languages a:hover{color:red;}
Hope that helps
ie fix for span a:hover span
sorry, I don't really understand. I`ve changed the code to add a color to a span but no difference (a:hover span already had a color!). Is this what you meant? Earlier in the code #languages a and #languages a:hover already had a color defined. I've pasted the whole lot:
#languages{ margin: 0px auto 5px auto; position:relative; background:#F9F7F2; width:900px; height:30px; font: bold Arial, Helvetica, sans-serif; } #languages ul { margin: 2px 2px 2px 2px; padding: 0px; list-style-type: none; } #languages li { margin: 0px 2px 0px 0px; padding: 0px; float: left; width: 80px; text-align: center; } #languages a { display: block; width: 77px; padding: 4px; text-decoration: none; } #languages a:link, #languages a:visited { color: #665531; background: #F9F7F2; font-size: 15px; font-weight: bold; } #languages a:hover { color: #665531; background: #F9F7F2; font-size: 15px; font-weight: bold; } #languages a span { color:#99FF00; background:#F9F7F2; display: none; } #languages a:hover span { color: #ffcc00; background:#F9F7F2; font: 18px bold Arial, Helvetica, sans-serif; display: block; position: absolute; top: 0px; left: 200px; width: 350px; margin: 2px 2px 2px 2px; padding: 4px; text-align:left; } #language_uberlink a:link, #language_uberlink a:visited, #language_uberlink a:hover { background: #F9F7F0; font: 20px Arial, sans-serif; color: #F99000; }
ie fix for span a:hover span
Hi craigtaylor74,
Not the span, you need to change someting in the link itself.
ie fix for span a:hover span
You need to specify a style for a:hover for the a:hover span to be recognised in IE.
#languages a:hover {background:#fff;}
#languages a:hover span { .......etc. }
The background color can be anything suitable.
ie fix for span a:hover span
Hi
Just as a bit of fun, I even put an imaginary style in once, and it worked! Literally like this:
#languages a:hover span {foo:bar}
Trevor
ie fix for span a:hover span
You need to specify a style for a:hover for the a:hover span to be recognised in IE.
#languages a:hover {background:#fff;}
#languages a:hover span { .......etc. }
The background color can be anything suitable.
but haven't I done that already?
#languages a:hover { color: #665531; background: #F9F7F2; font-size: 15px; font-weight: bold; } #languages a:hover span { color: #ffcc00; background:#F9F7F2; font: 18px bold Arial, Helvetica, sans-serif; display: block; position: absolute; top: 0px; left: 200px; width: 350px; margin: 2px 2px 2px 2px; padding: 4px; text-align:left; }
sorry but I cannot see what it is that i haven`t done.
ie fix for span a:hover span
but haven't I done that already?
You have indeed, but the value of the background color has not changed between a:hover and a:hover span.
IE requires a change of color to work. Even a small change will do.
So
#languages a:hover { background: #F9F7F3; }
#languages a:hover span { background: #F9F7F2; }
and you will need to do the same with
#language_uberlink a:link, #language_uberlink a:visited, #language_uberlink a:hover {
where #language_uberlink a:hover will need a separate style.
ie fix for span a:hover span
I promise I`m not trying to annoy you ... but I`ve done what you say and see no difference.
#languages a:hover { color: #665531; background: #F9F7F2; font-size: 15px; font-weight: bold; } #languages a:hover span { color: #ffcc00; background:#00FF00; font: 18px bold Arial, Helvetica, sans-serif; display: block; position: absolute; top: 0px; left: 200px; width: 350px; margin: 2px 2px 2px 2px; padding: 4px; text-align:left; }
ie fix for span a:hover span
no need to answer as I've gotten to the bottom of it by starting with code that i know works and step by step changing it to what I had and thus found my error (most likely exactly what you were telling me)
Thanks,
Craig.
understood after a while too
Hi, i had exactly the same problem and i also seemed to do everything right but afterwards i just try to put to #div a:hover {background:#fff;} and to #div a:hover span{background:#fffe;} ... simply the background property, nothin else seemed to work. But this does
, thx people!
It seems like the original
It seems like the original idea didn't get through. IE simply needs a special something to get going... like kicking your car to get it started down the hill.
thing {
styles;
}
thing:hover {
something extra special for IE;
}
thing:hover {
this is the actual hover code...
}
And I LOVE Trevor's answer, I never thought to try something imaginary before... I'm going to do it too!
It does NOT have to be a colour or a background. I was using
thing:hover {
visibility: visible;
}
earlier since it makes no stylistic changes. Apparently anything will do : )