CSS - Rollover image problem with IE

Neo824 · 10-26-2007

I use CSS to create a rollover image. Here is my code:

Code:

CSS - 
/* EOSS Style Sheet */

/* Banner */
.banner
{
margin: 0px 0px 0px 100px;
}

/* Navigation */

/* Home Button */
a.navigation_home
{
display: block;
margin: 0px 0px 0px 100px;
height:30px;
width:64px;
background-image: url(navigation_home.gif);
background-repeat: no-repeat;
}

/* Home Button -- Hover */
a.navigation_home:hover
{
background-image: url(navigation_home_hover.gif);
}

/* Downloads Button */
a.navigation_downloads
{
display: block;
margin: -30px 0px 0px 164px;
height: 30px;
width:  89px;
background-image: url(navigation_downloads.gif);
background-repeat: no-repeat;
}

/* Downloads Button -- Hover */
a.navigation_downloads:hover
{
background-image: url(navigation_downloads_hover.gif);
}

/* Endless Online Button */
a.navigation_endlessonline
{
display: block;
margin: -30px 0px 0px 253px;
height: 30px;
width: 114px;
background-image: url(navigation_endlessonline.gif);
background-repeat: no-repeat;
}

/* Endless Online Button -- Hover */
a.navigation_endlessonline:hover
{
background-image: url(navigation_endlessonline_hover.gif);
}

/* Navigation Bar -- Finish */
.navigation_barfinish
{
margin: -30px 0px 0px 367px;
}

HTML - 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" />
<title>
EOSS - Endless Online Super Speed
</title>
<!--East Parade-->
<embed src="east_parade.mp3" autostart="true" hidden="true"/>
</head>

<body>
<!--Banner-->
<div class="banner">
<img src="banner.gif"/>
</div>

<!--Navigation-->
<!--Home Button-->
<a class="navigation_home" href="index.html">
</a>

<!--Downloads Button-->
<a class="navigation_downloads" href="downloads.html">
</a>

<!--Endless Online Button-->
<a class="navigation_endlessonline" href="http://www.endless-online.com">
</a>

<!-- Navigation Bar - Finish-->
<div class="navigation_barfinish">
<img src="navigation_barfinish.gif"/>
</div>

<!--Announcements-->

<!--Header-->
<div class="header_announcement">
<img src="header_announcements.gif"/>
</div>
</html>

This works fine in the Mozilla Firefox browser, but it doesn't work at all in Internet Explorer. Can anyone tell me how to fix this? Thank you.

*notjustgraphics* · 10-26-2007

The above code works fine in both IE6 and Firefox

I suspect you've only posted a portion of the code and i think the full code (or a link to the page) would be helpful.

Cheers,

Mike.

Jolt · 10-26-2007

add the link, visited, and active states to the CSS. Sometimes IE6 needs specific declarations based on other portions of CSS code.

Code:

a.navigation_home:link, a.navigation_home:visited {
display: block;
margin: 0px 0px 0px 100px;
height:30px;
width:64px;
background-image: url(navigation_home.gif);
background-repeat: no-repeat;
}

/* Home Button -- Hover */
a.navigation_home:hover a.navigation_home:active {
background-image: url(navigation_home_hover.gif);
}

Neo824 · 10-27-2007

Quote:

Originally Posted by Jolt

add the link, visited, and active states to the CSS. Sometimes IE6 needs specific declarations based on other portions of CSS code.

Code:

a.navigation_home:link, a.navigation_home:visited {
display: block;
margin: 0px 0px 0px 100px;
height:30px;
width:64px;
background-image: url(navigation_home.gif);
background-repeat: no-repeat;
}

/* Home Button -- Hover */
a.navigation_home:hover a.navigation_home:active {
background-image: url(navigation_home_hover.gif);
}

That messed it up entirely. :P

Neo824 · 10-27-2007

Quote:

Originally Posted by notjustgraphics

The above code works fine in both IE6 and Firefox

I suspect you've only posted a portion of the code and i think the full code (or a link to the page) would be helpful.

Cheers,

Mike.

I've edited my post, the entire code is now shown.