[css] Firefox and IE display problem

programming web dev
1

I have two divs. One div is for an image and the other div is for copyright text. In firefox, the copyright text overlaps the bottom part of the image, whilst in IE, the text is right under the image (which is correct).

My css:


#semi-perm{
width:408px;
height:60px;
}

#copyright{
width:536px;
height:150px;
background-color:#242424;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#999999;
}

My html:


<div id="semi-perm"><img src="events.gif" width="42" height="12"/><br /><img src="sp06_sm.jpg" />
</div>
<div id="copyright">All Content &copy; 2006. All Rights Reserved.<br />
Valid <a href="http://validator.w3.org/check/referer" target="_blank">XHTML 1.0</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a>. Hosting: <a href="http://www.eleven2.com" target="_blank">Eleven2, Inc</a>.
</div>