HR tag and margins

[gldweb]

I am working on page where I am using <hr /> to provide visual divisions on tha page between news articles. Each news article has a floated image along with some text. I clear the floats by using <div style="clear:both"></div> after the news articles and before the <hr /> tag.

My problem is that I cannot get the top and bottom margins to display in Firefox. IE appears to display the margins correctly.

Here is the CSS of the <hr />:

hr.break {
height:2px;
margin: 2em 0 2em 0;
color:#003399;
background-color:#003399;
display: block;
}

Here is the HTML for the news articles:

<h5>Some heading</h5>
<p><span class="imgholder_left"><img src="images/image1.jpg" width="202" height="152" alt="iamge" /></span>Blah blah blah</p>
<p>Blah blah blah</p>
<p><a href="contact_us.htm">Contact name</a></p>
<div style="clear:both"></div>
<hr class="break"/>
<h5>Another heading</h5>
<p><span class="imgholder_left"><img src="images/image2.jpg" width="202" height="180" alt="MARV robot " /></span>Blah blah blah</p>
<div style="clear:both"></div>

Any input would be appreciated. Thanks

[gldweb]

BUMP!

Just bumping this up and hoping for a reply from someone.

Thanks