Margin not appearing in ie7?

by robs132 2 replies
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
#website design #appearing #ie7 #margin
Avatar of Unregistered
  • Profile picture of the author Aronya
    Robs,
    You're only specifying a margin in one instance; .fl2. Have you tried specifying top & bottom margins for all of the classes?
    {{ DiscussionBoard.errors[1403930].message }}
    • Profile picture of the author 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
      {{ DiscussionBoard.errors[1404322].message }}
Avatar of Unregistered

Trending Topics