robs132

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

Aronya

Robs,
You're only specifying a margin in one instance; .fl2. Have you tried specifying top & bottom margins for all of the classes?

bazzais

Try deleting the character returns between the lines so:-

<div class="myacc_formwrapper">
<div class="fl2">Password:</div>
<div class="fr3">***** </div>
<div class="fr2"></div>
</div>


Ta

Baz