PDA

View Full Version : Image replacement and cross browser layout problem



pample
10-15-2008, 07:33 PM
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!

Link to example (http://www.keirmcguffogdesign.com/example.html)

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 keirmcguffogdesign.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 */