CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Elaniobro
Elaniobro

Reputation: 21

nested element inheriting parent Div's margin in ie7

Trying to figure out why in IE7, the nested input element is taking on the margin of the parent div. So in essense the margin is being doubled.

    <style>
    <!--
    h1.redsubhead{font-size:14px;}
    .accountInfo,.loginInfo{-moz-border-radius: 6px 6px 6px 6px;background: #EBFBFF; border: 1px solid #8DCAD9;margin-bottom: 30px;padding:10px;}
    #ai_pw_wrap,#li_pw_wrap{border:1px solid #f0f;margin-right: 30px;padding:0;}
    #ai_email_wrap{margin-right:30px;padding:0;}
    .ai_wrap,.li_wrap{float:left;}
    .ai_email_input, .li_email_input,.li_pw_input{width:170px;}
    .ai_pw_input{width:130px;}
    .ai_label,.li_label{font-size: 11px; font-weight: bold;}


    .ai_link,.li_link{font-size: 9px; float:right}
     h1.redsubhead{float:left;}
     #li_btn_wrap{margin-top:10px;float:right;}
     .ai_wrap input{margin:0 !important;}
     .ai_label{margin:0}
    -->
    </style>
    <div class="accountInfo">
      <h1 class="redsubhead">Account Info</h1>
      <a class="ai_link" href="#">Returning Member Login</a>
      <div class="clear"></div>

      <div id="ai_email_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">E-mail: </label><br>
   <input type="text" class="ai_email_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div id="ai_pw_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password: </label><br>
   <input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div  id="ai_pwc_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password Confirm: </label><br>
   <input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div class="clear"></div>
    </div>
    <div class="loginInfo hide">
      <h1 class="redsubhead">Login</h1>
      <a class="ai_link" href="#">New User Signup</a>
      <div class="clear"></div>
      <div id="li_email_wrap" class="li_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="li_label">E-mail: </label><br>
   <input type="text" class="li_email_input" value="John Doe" size="60" maxlength="128">
      </div>
      <div id="li_pw_wrap" class="li_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="li_label">Password: </label><br>
   <input type="text" class="li_pw_input" value="John Doe" size="60" maxlength="128">
      </div>
      <div id="li_btn_wrap">
       <input type="image" src="/img/checkout/li_login.png" class="li_submit" value="start" name="submit_order">
      </div>
      <div class="clear"></div>
    </div>

Any suggestions?? I did find a fix, if I change the margin-right:30px to padding-right:30px. I still want to know why the margin on the nested input is taking on the margin of the parent div.

Upvotes: 2

Views: 1273

Answers (2)

unexplainedBacn
unexplainedBacn

Reputation: 768

You're looking at a known bug in IE7 (and, I think, 6) called the "inherited margin bug".

The first child input of an element with the hasLayout property triggered (for example via zoom:1, a clearfix, setting a height or width) will inherit the sum of the left margins of its ancestors.

The workarounds (from this article) are:

  1. (Most common) Set a negative margin-left on the input. That will counteract the inherited margins. Use something like input { *margin-left: -30px; } to only target IE7 and below.
  2. Don't use margins on the ancestors of the input.
  3. Un-do whatever triggered hasLayout on the parent element of the input.
  4. Put an inline element (say, a <label>) and some text immediately before the input.
  5. Wrap the input in another inline element (<span>, <label>, whatever).

Upvotes: 4

Logesh Paul
Logesh Paul

Reputation: 7700

Can you try applying a display: inline rule to your floated element. 

.ai_wrap,.li_wrap{float:left; display:inline;}

and check again?

Upvotes: 0

Related Questions