My left footer

Having image replacement and cross browser layout troubles

[pample]

Morning all,
I am currently having problems with the footer of a site I am designing. I am trying to display a copyright sign in one div inline with the w3c xhtml and css validation links. I don't want the images in the xhtml page but am having problems. Currently looks well in FF and Safari but IE7 is all over the shop. Also the links on the w3c images aren't working.

All help gratefully received!

<snip>

Code

xhtml 1.0 strict

<div class="footer">
<div class="borderTopWhite"><b></b></div>
<div class="borderLeftWhite">
<div class="borderRightWhite">
<div class="borderMiddleWhite">
<div class="copyright">copyright © 2008 example.com <br />All rights reserved</div>
<div class="validXHTML"><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></div>
<div class="validCSS"><a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a></div>
</div>
</div>
</div>
<div class="borderBottomWhite"><b></b></div>
</div>

CSS

.footer {
clear:both;
text-align:center;
color:#336699;
font-weight:900;
font-size:12px;
width:700px;
border:none;
}

.copyright {
float:left;
text-align:left;
margin:0;
display:inline;
font-size:10px;
width:250px;
letter-spacing:normal;
text-indent:0;
}

.validXHTML {
position:relative;
padding:0px;
width:88px;
height:31px;
background:url(../images/valid-xhtml10-blue.png);
display:inline-block;
letter-spacing:-1000em;
font-size:1px;
}
/* Just for Opera, but hide from MacIE */
/*\*/*/html>body .validXHTML {
letter-spacing :normal;
text-indent :-999em;
overflow :hidden;
}

.validCSS {
position:relative;
padding:0px;
width:88px;
height:31px;
background:url(../images/vcss-blue.gif);
display:inline-block;
letter-spacing:-1000em;
font-size:1px;
}
/* Just for Opera, but hide from MacIE */
/*\*/html>body .validCSS {
letter-spacing :normal;
text-indent :-999em;
overflow :hidden;
}
/* End of patch */

[edited by: swa66 at 8:54 am (utc) on Oct. 16, 2008]
[edit reason] personal URLs not allowed, use example.com [/edit]

[swa66]

With those hacks it's hard to explain.

text-indent-999em puts the text (which is the link) way to the left.
Hence you won't have the ability to click on it.

A solution might to add a span inside the <a> and do the image replacement there.

To make things simpler on yourself: loose the hacks, there really isn't a need anymore to have that. Next only add what you *need* for the standards compliant browsers (e..g. get rid of position:relative, the letter spacing, the oveflow, the inline block display etc. Just a display block, the size and the text-indent should do the trick.

To fix it then for IE: use conditional comments.

But if you want those links to display, why not use the images in the html as well ? It'll simplify your life a lot.