Works everywhere but IE (Hack missing?)

[autopost]

XHTML

<div id="footer">
<div id="logo">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"footer.gif" id="loon_logo" alt=""/>
</div>
<div id="footerText">
<div id="footerLinks">
<p>| <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a> | <a href="#">Links Index</a> | <a href="#">Publications</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Related Sites</a> | <a href="#">HWW</a> |</p>
<p>
| <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">What's New</a> | <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Topics</a> | <a href="#">Publications</a> | <a href="#">Weather</a> |
</p>
<p>| <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">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=http://www.webdeveloper.com/forum/archive/index.php/"#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=http://www.webdeveloper.com/forum/archive/index.php/"#">Important Notices</a>
</div>
<div id="pageUrl">
URL of this page: <!-- m --><a class="postlink" href="http://this">http://this</a><!-- m --> and that dot com
</div>
</div>
</div>
</div>


CSS...

**/
/* 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.I'm using Win XP Home and viewing your page using Moz 1.4 1.5, Moz FB 0.6 0.7, NN 7.02 7.10 and it looks equally broken in all of them. On the other side of the coin it looks completely different (but still broken) in IE 6. You got a screen shot of what it should look like, I'll re-code the CSS to try and make it work.

Edit: I have managed to avoid all CSS hacks so far, I hope to continue this trend.Change the first, add the second:
#footer #logo{
float: left;
}
#loon_logo{
width: 86px;
height: 69px;
margin-left: 134px;
}


lavalamp wrote:
I have managed to avoid all CSS hacks so far, I hope to continue this trend.
That is the only way Great! It works!

So if I have images, I should always specify their dimensions in CSS? At least those who impact the layout I guess?

For me, in Firebird 0.7 and Netscape 7.1 it worked fine. Now, I can add IE 6.0.2xx It's always good practice to define image height and width