XHTML
[code]
<div id=”footer”>
<div id=”logo”>
<img src=”footer.gif” id=”loon_logo” alt=””/>
</div>
<div id=”footerText”>
<div id=”footerLinks”>
<p>| <a href=”#”>Home</a> | <a href=”#”>Links Index</a> | <a href=”#”>Publications</a> |
<a href=”#”>Related Sites</a> | <a href=”#”>HWW</a> |</p>
<p>
| <a href=”#”>What’s New</a> | <a href=”#”>About Us</a> |
<a href=”#”>Topics</a> | <a href=”#”>Publications</a> | <a href=”#”>Weather</a> |
</p>
<p>| <a href=”#”>Français</a> | <a href=”#”>Contact Us</a> | <a href=”#”>Help</a> | <a href=”http://www.ec.gc.ca/search_e.html”>Search</a> | <a href=”#”>Environment Canada Site</a> | <a href=”#”>Canada Site</a> |</p>
</div>
<div id=”topPage”>
<a href=”#autop”><img src=”pageup.gif” title=”Top of page” alt=””/></a>
</div>
<div id=”disclaimer”>
<div id=”leftDisc”>
Last update: 2003-07-18
</div>
<div id=”rightDisc”>
<a href=”#”>Important Notices</a>
</div>
<div id=”pageUrl”>
URL of this page: [url]http://this[/url] and that dot com
</div>
</div>
</div>
</div>
CSS…
[code]
**/
/* Footer styles*/
/**/
#footer{
clear:both;
padding-top: 15px;
width: 600px;
}
#footer #logo{
float: left;
width: 86px;
height: 69px;
margin-left: 134px;
}
#footer #footerText{
float: right;
width: 380px;
font-size: 70%;
border-top: 3px solid #508CC8;
}
#footer #footerText P{
margin-top: 2px;
margin-bottom: 2px;
text-align: center;
}
#footer #footerText #topPage{
background-color: #508CC8;
width: 100%;
text-align: right;
}
#footer #footerText #topPage img{
border: 0px;
}
In Mozilla, great. In Netscape 7, great. In IE, it doesn’t align properly. Instead of the logo being parallel to the left of the text, it comes and places itself between the content of the page and the footer text. I figure its probably due to a hack that I’m missing.