SitePoint.com

NZ Joe · Mar 9, 2004, 16:52

Hi,

I am rebuilding http://www.justice.govt.nz/maorilandcourt/ in HTML/CSS without the Javascript and images for text. The funtionality has to be the same and the look too (as much as possible). The problem I have is that in IE, the text is not changing when I hover over the links (It is meant to change from the English to Maori, and it works in Firefox and Opera). Any help appreciated.

HTML snippet

Code:

 <div id="faq">
  <a href="faq.htm">
   <img src="images/buttong.gif" width="26" height="25" alt="FAQ">
   <span class="en">FAQ</span>&nbsp;<span class="mi">Rarangi Patai</span>
  </a>
 </div>

CSS

Code:

 
a span.en, a:hover span.mi {
 display: inline;
}
a:hover span.en, a span.mi {
 display: none;
}

Paul O'B · Mar 9, 2004, 17:05

Hi,

This is a known bug with ie and it requires that a property must change on a:hover otherwise the span won't show.

Adding this to your above code will make it work in IE:

Code:

a:hover {background:#FFFFFC}

Paul

NZ Joe · Mar 9, 2004, 17:13

Thanks Paul O'B. Works great, and even in IE4

jamesxv7 · Mar 9, 2004, 21:01

Hi:
If you want more fun with the hover CSS rule. Try this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Playing with hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { text-decoration:none; }
a:hover {background:#FFFFFC; background-image:url(hoverline.gif); background-position:bottom; background-repeat:repeat-x; text-decoration:none;}
</style>
</head>

<body>
<a href="http://www.ecodig.com">Use any URL here, see the nice hover decorarion.</a>
</body>
</html>

Hope you enjoy it!

MissAlexy · Sep 17, 2006, 01:56

well, i have this problem.

i did all the coding, to change links when hovered over.
except for the
a.hover {background:#FFFFFC}
because when i click to save changes, it changes the "#" and adds some numbers.
so, instead, i changed the value slightly.
but, it just shows both the text for the link, and the text for the link when it's hovered, one next to the other.
here is the page i'm working on, the text in the left box is what i am having problems with.

could you help me?
alex.

Dan Schulz · Sep 17, 2006, 02:41

Quote:

Originally Posted by MissAlexy

well, i have this problem.

i did all the coding, to change links when hovered over.
except for the
a.hover {background:#FFFFFC}
because when i click to save changes, it changes the "#" and adds some numbers.
so, instead, i changed the value slightly.
but, it just shows both the text for the link, and the text for the link when it's hovered, one next to the other.
here is the page i'm working on, the text in the left box is what i am having problems with.

could you help me?
alex.

Hello, and welcome to Sitepoint. You're declaring an anchor with a class of hover. If you want to apply a hover effect to the anchor, you need to change the period to a semi colon so it looks like this:

a:hover

Then you'll be able to change the background color when you hover over the link. Also, don't forget to assign a color value to the rule as well, even if you only use color: inherit; instead of an actual color value.

You can learn more about creating hover effects here:
http://www.sitepoint.com/forums/show...79#post2957279

Webby007 · Sep 17, 2006, 04:38

You have IE4! - did I hear that right! :O

MissAlexy · Sep 17, 2006, 04:54

okay.
i don't think you got me...

so i have this CSS coding:

a span.sm, a:hover span.lg {display: inline; }

a:hover span.sm, a span.lg {display: none; }

a:hover {text-colour: 000000}

and then a bit of the HTML is:

<div id="aboutme">
<a href="http://">
<span class="sm">cold</span> <span class="lg">i like the cold side of the pillow</span>
</a>
</div>

so, it's supposed to jut show "cold", and when you hover over it, it'll say "i like the cold side of the pillow"

but it just shows

"cold i like the cold side of the pillow".

help please?

Dan Schulz · Sep 17, 2006, 04:59

Yup, I have Internet Explorer 3, 4, 5.01, 5.5, 6 and 7(RC1) running simultaneously on the same system without the need for a virtual machine. Only IE4 is not working, and that was only after I upgraded from IE6 to IE7RC1 as my default IE installation.

Dan Schulz · Sep 17, 2006, 05:43

Well for starters, you have 374 HTML errors and at least 205 CSS errors on your page. I also saw two different layouts trying to load at the same time. You may want to take a day off, sit down and fix them all, starting with the HTML errors, then worry about the CSS.

And for the record, I tested your page in FireFox, and it took over five minutes to load.

MissAlexy · Sep 17, 2006, 09:11

oh dear.
haha.

Paul O'B · Sep 17, 2006, 09:59

Quote:

o, it's supposed to jut show "cold", and when you hover over it, it'll say "i like the cold side of the pillow"

The code on its own seems to be working ok (apart form the fact there is no property as text-color:! It should be color if you want to change the text color or if its just to counter the ie bug then use visibility:visible as below.).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a span.sm, a:hover span.lg {display: inline; }
a:hover span.sm, a span.lg {display: none; }

a:hover {visibility:visible}

</style>
</head>
<body>
<div id="aboutme"> <a href="http://"> <span class="sm">cold</span>&nbsp;<span class="lg">i like the cold side of the pillow</span> </a> </div>
</body>
</html>

MissAlexy · Sep 17, 2006, 13:33

oh my god.
thank you so much

just one more thing, if i have lots of links, how can i make then be next to each other?
because right now theyre one underneath the other.
do i need to take something out?

Paul O'B · Sep 17, 2006, 13:39

It depends how you have organised them in the html. Links are inline elements by default and will align next to each other anyway. If you have them contained in block elements such as p tags or have made the links display:block then you will need to float them next to each other.

If you have lost of links then they should probably be contained within a list structure and then you can float the li items next to each other by applying float:left to them. (or make the list and the anchors display:inline and they should still line up alongside.)

MissAlexy · Sep 17, 2006, 13:42

okay.
so part of it is:

<div id="aboutme">
<a href="http://">
<span class="sm">cold</span> <span class="lg">i like the cold side of the pillow</span>
</a>
</div> <div id="aboutme">
<a href="http://">
<span class="sm">hate</span> <span class="lg">i hate anything blackcurranty</span>
</a>
</div> <div id="aboutme">
<a href="http://">
<span class="sm">pjs</span> <span class="lg">nighties pwn pjs</span>
</a>

but it shows up as

cold
hate
pjs

and i want it to say

cold hate pjs

anything i can do?

MissAlexy · Sep 17, 2006, 14:06

oh, and one last thing.
i promise.

how do i get the text to be black when it's hovered over?

Paul O'B · Sep 17, 2006, 15:16

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul#aboutme{
	list-style:none;
	margin:0;
	padding:0;
}
ul#aboutme li{
	display:inline;
	margin-right:20px;
	position:relative;
}
a span.sm, a:hover span.lg {display: inline; }
a:hover span.sm, a span.lg {display: none; }
a:hover {visibility:visible;color:#000;}

</style>
</head>
<body>
<ul id="aboutme">
	<li> <a href="http://"> <span class="sm">cold</span><span class="lg">i like the cold side of the pillow</span> </a></li>
	<li> <a href="http://"> <span class="sm">hate</span><span class="lg">i hate anything blackcurranty</span> </a></li>
	<li><a href="http://"> <span class="sm">pjs</span><span class="lg">nighties pwn pjs</span> </a></li>
</ul>
</body>
</html>

Mar 9, 2004, 16:52	#1
NZ Joe SitePoint Zealot Join Date: Apr 2001 Location: Kapiti, New Zealand Posts: 185	Change link text with :hover Hi, I am rebuilding http://www.justice.govt.nz/maorilandcourt/ in HTML/CSS without the Javascript and images for text. The funtionality has to be the same and the look too (as much as possible). The problem I have is that in IE, the text is not changing when I hover over the links (It is meant to change from the English to Maori, and it works in Firefox and Opera). Any help appreciated. HTML snippet Code: <div id="faq"> <a href="faq.htm"> <img src="images/buttong.gif" width="26" height="25" alt="FAQ"> <span class="en">FAQ</span> <span class="mi">Rarangi Patai</span> </a> </div> CSS Code: a span.en, a:hover span.mi { display: inline; } a:hover span.en, a span.mi { display: none; }

Mar 9, 2004, 17:05	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,619	Hi, This is a known bug with ie and it requires that a property must change on a:hover otherwise the span won't show. Adding this to your above code will make it work in IE: Code: a:hover {background:#FFFFFC} Paul

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Mar 9, 2004, 17:13	#3
NZ Joe SitePoint Zealot Join Date: Apr 2001 Location: Kapiti, New Zealand Posts: 185	Thanks Paul O'B. Works great, and even in IE4

Sep 17, 2006, 01:56	#5
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	well, i have this problem. i did all the coding, to change links when hovered over. except for the a.hover {background:#FFFFFC} because when i click to save changes, it changes the "#" and adds some numbers. so, instead, i changed the value slightly. but, it just shows both the text for the link, and the text for the link when it's hovered, one next to the other. here is the page i'm working on, the text in the left box is what i am having problems with. could you help me? alex.

Sep 17, 2006, 04:38	#7
Webby007 Non-Member Join Date: Sep 2005 Location: UK, England Posts: 215	You have IE4! - did I hear that right! :O

Sep 17, 2006, 04:54	#8
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	okay. i don't think you got me... so i have this CSS coding: a span.sm, a:hover span.lg {display: inline; } a:hover span.sm, a span.lg {display: none; } a:hover {text-colour: 000000} and then a bit of the HTML is: <div id="aboutme"> <a href="http://"> <span class="sm">cold</span> <span class="lg">i like the cold side of the pillow</span> </a> </div> so, it's supposed to jut show "cold", and when you hover over it, it'll say "i like the cold side of the pillow" but it just shows "cold i like the cold side of the pillow". help please?

Sep 17, 2006, 04:59	#9
Dan Schulz In memoriam Join Date: May 2006 Location: Aurora, Illinois Posts: 15,648	Yup, I have Internet Explorer 3, 4, 5.01, 5.5, 6 and 7(RC1) running simultaneously on the same system without the need for a virtual machine. Only IE4 is not working, and that was only after I upgraded from IE6 to IE7RC1 as my default IE installation.

Sep 17, 2006, 05:43	#10
Dan Schulz In memoriam Join Date: May 2006 Location: Aurora, Illinois Posts: 15,648	Well for starters, you have 374 HTML errors and at least 205 CSS errors on your page. I also saw two different layouts trying to load at the same time. You may want to take a day off, sit down and fix them all, starting with the HTML errors, then worry about the CSS. And for the record, I tested your page in FireFox, and it took over five minutes to load.

Sep 17, 2006, 09:11	#11
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	oh dear. haha.

Sep 17, 2006, 13:33	#13
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	oh my god. thank you so much just one more thing, if i have lots of links, how can i make then be next to each other? because right now theyre one underneath the other. do i need to take something out?

Sep 17, 2006, 13:39	#14
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,619	It depends how you have organised them in the html. Links are inline elements by default and will align next to each other anyway. If you have them contained in block elements such as p tags or have made the links display:block then you will need to float them next to each other. If you have lost of links then they should probably be contained within a list structure and then you can float the li items next to each other by applying float:left to them. (or make the list and the anchors display:inline and they should still line up alongside.)

Sep 17, 2006, 13:42	#15
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	okay. so part of it is: <div id="aboutme"> <a href="http://"> <span class="sm">cold</span> <span class="lg">i like the cold side of the pillow</span> </a> </div> <div id="aboutme"> <a href="http://"> <span class="sm">hate</span> <span class="lg">i hate anything blackcurranty</span> </a> </div> <div id="aboutme"> <a href="http://"> <span class="sm">pjs</span> <span class="lg">nighties pwn pjs</span> </a> but it shows up as cold hate pjs and i want it to say cold hate pjs anything i can do?

Sep 17, 2006, 14:06	#16
MissAlexy SitePoint Member Join Date: Sep 2006 Posts: 6	oh, and one last thing. i promise. how do i get the text to be black when it's hovered over?