5 replies [Last post]
Andrew Morton
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-11-10
Posts: 5
Points: 0

I'm not sure where this belongs but as changing a style isn't working, I'm asking in this forum.

I'm trying to change the className for a div containing a hyperlink sitting on an image, and it goes wrong in various ways. The idea is to have one image for all the buttons and place the hyperlink text on it, then when the mouse enters the button image the style applied to the link text changes.

http://www.in-press.co.uk/example/rollover.html

For the rollover to work, it should not matter where the mouse is over the graphic. In practice, if the mouse is to the right of the link text it does not always work.
Changing the color of the text usually does not work, although all other attributes will (text-decoration, font-size, font-family). What happens is the browser uses the default hyperlink colour instead.

Platform: W2000
IE6 Rollover works/text colour fails
NS7.2 Rollover messy/text colour fails
Mozilla 1.0 Rollover messy/text colour fails
Opera 7.54 Rollover messy/text colour works

Paltform: MacOS 9.2.2
IE5 Rollover messy/text colour fails
NS7.0 Rollover messy/text colour fails

The CSS validates as OK at w3c.org.
Things I've tried which don't make any difference:-
Put the hyperlink in a span.
Not hyperlink the image.
Use an external stylesheet.

I could make different images for every button and rollover state, but it would be nice if this worked as I know the client will want to change the wording and colour of the buttons lots of times.

Am I doing something wrong in the html page or have I found bugs in every browser I've tried?

Andrew

<html>
<head>
<title>Rollover bug example</title>
<style type="text/css">
.thinButton {
}

.thinButtonText {
	font-family: Arial, sans-serif;
	font-size: 8pt;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	position: relative;
	top: -20px;
	left: 22px;
	padding: 0px;
	border-width: 0px;
	margin: 0px;
}

.thinButtonTextHover {
	font-family: Arial, sans-serif;
	font-size: 8pt;
	/* font-weight: bold; */
	color: #ffff00;
	text-decoration: underline;
	position: relative;
	top: -20px;
	left: 22px;
	padding: 0px;
	border-width: 0px;
	margin: 0px;
}

.thinButtonText a:link {
	text-decoration: none;
	color: #333333;
}

.thinButtonText a:hover {
	text-decoration: underline;
	color: #ffff00;
}

.thinButtonText a:visited {
	text-decoration: none;
	color: #333333;
}
</style>
</head>
<body>
<div class="thinButton">
	<a href="search.html">
	<img src="button.gif" border="0" width="80" height="32"
		onmouseover="document.getElementById('searchBn').className='thinButtonTextHover'"
		onmouseout="document.getElementById('searchBn').className='thinButtonText'">
	</a>
	<div class="thinButtonText" id="searchBn">
		<a href="search.html">Search</a>
	</div>
</div>
</body>
</html>

Andrew Morton
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-11-10
Posts: 5
Points: 0

Disjointed rollover woe

I've realised why the rollover was messy in all but PC IE6, the correction is to use a span instead of a div in this part:-

<span class="thinButtonText" id="searchBn">
	<a href="search.html">Search</a>
</span>

thus getting its containing box to be the same size as the text of the link, and adjust the top and left in the CSS.

But now the <A> doesn't change in PC IE6, and in NS7.2 and Firefox there is a small phantom link below and to the right of the image.

Changed page:-
http://www.in-press.co.uk/example/rollover2.html

Andrew

Andrew Morton
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-11-10
Posts: 5
Points: 0

Disjointed rollover woe

Quote:
But now the <A> doesn't change in PC IE6

..because I had :link, :visited and :hover in the wrong order.

If I keep talking to myself like this, I'll have it working by the end of today!

Andrew

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 21 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Disjointed rollover woe

Hi Andrew,
I thought you might be getting a bit lonely talking to your self :roll:

Another way you could get a similar affect is to remove the span, set the link to display block with width and height values then use the hover pseudo class to swap position of the background image.

This should help http://wellstyled.com/css-nopreload-rollovers.html

Andrew Morton
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-11-10
Posts: 5
Points: 0

Disjointed rollover woe

That's an interesting technique, and if I can't persuade the disjointed rollover target to obey the color setting in the style I might end up using it.

Andrew

Andrew Morton
Offline
newbie
Last seen: 16 years 11 weeks ago
Joined: 2004-11-10
Posts: 5
Points: 0

SOLVED!

Solved: also set a:link etc. to change the "default" in the browser.

This talking to yourself thing really works! Wink

Andrew