11 replies [Last post]
craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 21 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

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.

http//www.ctam.co.uk

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 21 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

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;
}

http//www.ctam.co.uk

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

ie fix for span a:hover span

Hi craigtaylor74,
Not the span, you need to change someting in the link itself.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 23 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 34 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 21 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

ie fix for span a:hover span

Stu wrote:
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.

http//www.ctam.co.uk

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 23 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

ie fix for span a:hover span

Quote:
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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 21 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

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;
}

http//www.ctam.co.uk

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 18 years 21 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

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.

http//www.ctam.co.uk

i.m.your.perfect.day
i.m.your.perfect.day's picture
Offline
newbie
Prague
Last seen: 13 years 46 weeks ago
Prague
Joined: 2008-08-09
Posts: 1
Points: 0

understood after a while too

Hi, i had exactly the same problem and i also seemed to do everything right Shock 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 Wink, thx people!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 35 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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 : )

I'm no expert, but I fake one on teh Internets