Wed, 2004-11-10 13:20
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> 
Wed, 2004-11-10 14:27
#1
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
Wed, 2004-11-10 14:35
#2
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
Wed, 2004-11-10 21:41
#3
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
Thu, 2004-11-11 09:56
#4
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
Thu, 2004-11-11 10:31
#5
SOLVED!
Solved: also set a:link etc. to change the "default" in the browser.
This talking to yourself thing really works! 
Andrew