Problem with image buttons in the footer

Weirdness on mouseovers

[alephOne]

In my footer, I have four button-links, using <img> elements, for various validation links. In Gecko/KHTML/Opera/Omniweb, the mouseovers for these buttons are weird, but acceptable - they have a thick background colour change, but only on the bottom and right-hand side of each button.

IE5/Mac gives no mouseover behaviour.

IE6/Win, however, has a completely wacky glitch: when I mouseover any of the buttons, I get no mouseover effect on the buttons themselves, but below the footer there suddenly appears a few more lines of the faux columns image!

It's really hard to explain, and I'd post images if I was allowed. If anybody wants to see it for themselves, the URL is in my profile. The CSS and XHTML validates and I personally can't see anything wrong with it, so it would likely be easier for me to be able to show you what's going on.

If anybody wants the XHTML and CSS, a stripped-down version of it was posted in [webmasterworld.com...]

the only difference is the following addition to the HTML and CSS:

<div id="footer">
<p>Copyright &copy; 2004 Ian Adams</p>
<p><a href="http://example.com/css/"><img src="http://example.com/images/tableless.gif" alt="Tableless" /></a><a href="http://validator.w3.org/check/referer"><img src="http://example.com/images/xhtml.gif" alt="XHTML" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://example.com/images/validcss.gif" alt="CSS" /></a><a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://example.com/"><img src="http://example.com/images/sec508.gif" alt="508" /></a></p>
</div>

#footer {
margin: 0;
border: 0;
border-top: 1px dotted #555;
color: #666;
background: rgb(134,156,178);
padding: 7px 8px 5px 10px;
text-align: left;
clear: both;
font-size: 0.8em;
}

#footer img, a{
float: none;
padding: 0;
margin: 0 2px 0 0;
}

#footer p{
line-height: 0.8em;
margin: 0.8em 0em 0.8em 0em;
}

[garann]

I'd have to vote with IE5 and 6 - I see nothing in your code that would give these images a mouseover behavior... No a:hover, no onmouseover...

When I copy that code into a new page, I get no weird effect in any browser. So I'd suspect that you're inheriting something you didn't anticipate. If you override any properties of a or img that you're setting earlier in your CSS (especially borders, margins, positioning, background-colors...), that should eliminate or at least help you narrow down your answer.

So if you have this somewhere up above:

a {
margin: -5px;
background-color: #f00;
font-weight: bold;
}

Make sure to update that block like so:

#footer img, #footer a{
float: none;
padding: 0;
margin: 0 2px 0 0;
background-color: transparent;
font-weight: normal;
}

[alephOne]

Hmmm... okay. Yeah, the A element has a :hover property that changes a link's background colour. That mouseover I would say is definitely being inherited, then. I'll tinker around with it and let you know what happens.

Thanks for your help! :)

-ian

[alephOne]

Okay, I played around for a bit, including trying the rules that you suggested, but I can't get anything to change. This is really weird. Any other ideas?

-ian