Margin not appearing in ie7?

Hi,

I'm having problems with the layout of a page appearing differently in ie7 compared to ie8.

In ie8, the page looks fine. However in ie7 the top margin of the div seems to be recognised, but not the bottom margin... so the divs appear all squashed up together

The problem lies with the gaps between the divs with 'change email', 'password' and '****' in

This is the html section I'm looking at:

<div class="buttons" style="height: 20px;">
<div class="right2">
<asp:linkbutton id="buttonChangeEmail" runat="server">
Change email</asp:linkbutton>
</div>
</div>
<div class="myacc_formwrapper">
<div class="fl2">
Password:</div>
<div class="fr3">
***** </div>
<div class="fr2">
</div>
</div>


The CSS for this section is:

.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }
.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }.buttons .right2{ float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }.buttons { list-style:none; font-weight:bold; }
.buttons .right { float:right; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; }
.buttons .right2 { float:left; background:url(/images/button-right.png) 100% 0 no-repeat; padding:3px 24px 3px 0; margin: 5px 0 15px 0; }
.myacc_formwrapper {width: 100%; overflow: hidden; xpadding-bottom: 7px; line-height: 22px;}
.myacc_formwrapper .fl {float: left; width: 90px;}
.myacc_formwrapper .fr {float: left; width: 230px; color: #333;}
.myacc_formwrapper .fr1 {float: left; width: 140px; color: #333;}
.myacc_formwrapper .fr2 {float: right; width: 90px; color: #333; text-align: right;}
.myacc_formwrapper .fl2 {float: left; width: 90px; margin-top: 20px; }
.myacc_formwrapper .fr3 {float: left; width: 230px; color: #333; margin-top: 20px; }


Any help would be amazing. Thanks,

Robs