Hmm, you seem to have approached this particularly awkwardly. I would recommend reevaluating your code.
Firstly, I’d move away from the absolute positioning of html tags. I would look at something like this:
h1 a{
display:block;
height:77px;
width:385px;
background: url(../images/logo_off.gif);
text-indent:-9000px;
overflow: hidden;
margin:8px 0 0 122px;
}
h1 a:hover {
background-image: url(../images/logo_on.gif);
}
That literally is all your unnecessary h1 css condensed and the positioning fixed.
This is your code for the h1 tags at the moment:
h1 {margin:0;
position:absolute; /*move away from absolute positioning*/
z-index:3; /*""*/
top:-8px;/*""*/
left:122px;/*""*/
text-indent:-9000px;/*common fix - doesnt work in IE5 and has accessibility issues*/
width:385px;
height:77px;
background-image: url(../images/logo_off.gif);
background-repeat: no-repeat; /*unneccessary - you've already specified width and height*/
border:none;} /*there wouldn't be a border anyway*/
h1 a:link {display:block; /*this should be declared in the previous statement*/
height:77px; /*already declared*/
background-image: url(../images/logo_off.gif); /*already declared*/
background-repeat: no-repeat; /*unneccessary and already declared*/
border:none;} /*there wouldn't be a border anyway*/
h1 a:visited {
border:none; /*there wouldn't be a border anyway*/
}
h1 a:hover {
display:block; /*already declared*/
height:77px; /*already declared*/
background-image: url(../images/logo_on.gif);
border:none;} /*already declared*/
h1 a:active{display:block; /*already declared*/
height:77px; /*already declared*/
background-image: url(../images/logo_off.gif);
background-repeat: no-repeat; /*unneccessary - you've already specified width and height*/
border:none;}/*there wouldn't be a border anyway*/
Although this would clean up your code and make it more logical, it doesn’t guarantee it will fix your problem - though I’m pretty sure it’s your declaration of display types in the link states that are your problem.
☆ A M B ☆