Floating image one place works while identical elsewhere doesn't

I've got a weird situation I just can't figure out. I've using essentially the exact same scripting one place and it works, elsewhere and it doesn't.
(Oh, this issue is only in IE 7 and 8. In 9 and in Chrome and Firefox, everything is just fine.)

This page:
http://www.girlscoutsmoheartland.org/pages/suinfo.php
Notice down where it says "EVENTS" with a globe icon, and below that, "COUNCIL NEWS" next to an exclamation point.

The scripting for council news looks great with the icon overlapping the colored div box beautifully, but for events, the box is missing the top border line and it's overlapping the icon.

Here's the script for these two sections:


<div id="sudiv_events" style="margin-bottom:60px;">
<h4><a name="events" id="events"></a></h4>
<h3><img src="../images/suportal/events_60w_trans.png" alt="su events" width="60" height="61" style="float:left" />events</h3>
<div class="content_specialbox"><strong><em>Here is a listing of council-run events for this service unit for the next 90 days -- </em></strong><em>(for questions or concerns regarding these events, <a href="http://www.girlscoutsmoheartland.org/pages/contact.php?pid=prg">contact the council programs department</a>)</em><strong><em>:</em></strong>
</div>
<?=$resultdisplay?>

<div class="content_specialbox"><strong><em>Here is a listing of locally-run events for this service unit -- </em></strong><em>(for questions or concerns regarding these events, <a href="mailto:<?=$sumngr_email?>">contact the team manager</a>)</em><strong><em>:</em></strong>
</div>
<div><?=$events?>
</div>
</div>


<div class="su_menureturn" style="text-align:right; font-family:Verdana, Geneva, sans-serif; font-size:x-small;">
<a href="#sutop">^-- return to the top</a>
</div>


<div id="sudiv_conews" style="margin-bottom:20px;">
<h4><a name="news" id="news"></a></h4>
<h3><img src="../images/suportal/news_60w_trans.png" alt="su news" width="60" height="61" style="float:left" />council news</h3>
<div class="content_specialbox"><?=$gl_news?>
</div>
</div>


Notice that the scripting for the two images and the two div boxes in question are identical in class and style and order of nested elements.

What in the world could be causing this disparity? I appreciate any feedback.
Thanks.

There is the difference, if nothing else.

<div id="sudiv_events" style="margin-bottom:60px;">
<div id="sudiv_conews" style="margin-bottom:20px;">

There is the difference, if nothing else.

<div id="sudiv_events" style="margin-bottom:60px;">
<div id="sudiv_conews" style="margin-bottom:20px;">


Ah, I should have mentioned: I did try changing the 60px to match the 20px, but that didn't make any difference.
Thanks for the reply, though. :)