HTML & Mozilla problem - Oversized DIV

[RLW]

Hi All,

Hope you can help.

I am working on a website http://www.articleplot.com

For some reason, all Mozilla-based browsers that I have tested in are oversizing a div box (http://browsershots.org/http://a1.richard.frih.net/?a=tag_show&t=2008).

The problem happens on some pages but not on others (only on pages where I have a summary box - you'll see what I mean) and I haven't been able to figure out a pattern for what is making the div over sized, but when it does happen, it's always the top summary box on the page.

For example, the top summary box on this page is over sized - http://www.articleplot.com/?a=tag_show&t=2008

The same HTML code on this page is not over sized, nor are any of the other divs on the page - http://www.articleplot.com/

Here is a the offending code:

<div style=" position:relative; padding-top: 30px; width: 471px;">

<div class="content_summary_top" style="width:431px; background: url(http://www.articleplot.com/skins/jxc/images/content_top.gif); text-align: left;"><a href="http://www.articleplot.com/?a=content&id=14">Budget will help working families: Rudd</a></div>
<div class="content_summary_middle" style="width:471px; background: url(http://www.articleplot.com/skins/jxc/images/content_bg.gif)"><div style="width: 100px; float: left;"><div class="style3" style="background: url(http://www.articleplot.com/skins/jxc/images/votesbg3.png) no-repeat 0% 0%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.articleplot.com/skins/jxc/images/votesbg3.png, sizingMethod='crop');_background: none; width: 59px; height: 52px; padding-top: 4px; margin: 0px auto;">0<br/>
  </div>
 
</div>
  The federal government will do all it can in next month's budget to assist working families under stress from increased mortgage repayments and rising petrol and grocery prices.
  <br style="clear: both;"/>

</div>
<div class="content_summary_bottom" style="width:431px; height: 23px; background: url(http://www.articleplot.com/skins/jxc/images/content_bottom.gif)"><img src="http://www.articleplot.com/skins/jxc/images/icons/tag_green.gif" alt="tags" width="16" height="16"  />  <a href="http://www.articleplot.com/?a=tag_show&t=rudd"> rudd</a> <a href="http://www.articleplot.com/?a=tag_show&t=inflation"> inflation</a> <a href="http://www.articleplot.com/?a=tag_show&t=2008"> 2008</a> <img src="http://www.articleplot.com/skins/jxc/images/icons/user_green.gif" width="16" height="16" /> <a href="http://www.articleplot.com/?a=user_show&u=testuser16">testuser16</a> <span class="style4">3 days, 11 hours ago</span></div>

</div>

Something that I found interesting though, is that Dreamweaver (which usually for me accurately shows how a web page will display in Firefox) doesn't show the box over sized.

I used the FF Dom Inspector Tool, and found out that it is the 'content_summary_middle' div that is being mysteriously over sized to 406px high, but there is nothing inside that div that would make it that size.

If anybody has any thoughts on this please let me know.

I have been staring at it for hours and just can't figure it out.

Any help whatsoever would be greatly appreciated


__________________________________________________________________
Problem solved.

I wrapped this around the two divs on the page that had the oversized div.

I just cant figure out why it worked. If anybody can shed some light on this it would be much appreciated.

Heres the code I wrapped around the previous code:

<div style="float: left; width: 471px;">
<!-- Previously quoted code goes here -->
</div>