nested element inheriting parent Div's margin in ie7

Question

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.

Answer 1

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

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

and check again?