No replies
asdf
Offline
newbie
Last seen: 15 years 27 weeks ago
Joined: 2004-06-01
Posts: 2
Points: 0

I've used CSS to create an image link rollover. To avoid the flicker, the background image i've used contains the normal, hover and visited state. The CSS basically changes the position of the background image on each instance.

This seems to work fine on the browser I'm using IE6 on a PC. However this doesn't seem to work on IE5 for a Mac.

I know there are a number of issues with IE5 on Macs but is there any way of making this work?

Here's my CSS...

td.navlink {
float: left;
width: 164px;
height: 40px;
margin: 0 0 0 0;
background: url(buttons3/allbuttons.gif);
background-image: url(buttons3/allbuttons.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

td.navlink a {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
background: url(buttons3/allbuttons.gif);
background-image: url(buttons3/allbuttons.gif);
background-repeat: no-repeat;
background-position: left center;
}
td.navlink a:visited {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
background: url(buttons3/allbuttons.gif);
background-image: url(buttons3/allbuttons.gif);
background-repeat: no-repeat;
background-position: left top;
}
td.navlink span {
display: block;
margin:0; padding: 2px 0 0 3px;
}
td.navlink a:hover {
background: none;
background-image: none;
}
td.navlink a:active {
}

I've used transparent gifs as the actual link which sits within div tags. However, these transparent gifs don't seem to be appearing. Are they hiding behind the background image of the CSS? Because I can only see the background image but not the transparent gif buttons that sits within the div tags.

Here's an example of the html...

<td class="navlink"><a href="contact_us.html"><img src="buttons3/contact_us.gif" width="160" height="36" border="0"></a></td>