2010-07-14 8 views
1

Ayant quelques problèmes désagréables avec IE6 et lire ma forme div mise en page, le code html:forme IE6/div flottant questions

<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post"> 
     <div class="row"> 
      <div class="label"> 
       <label for="szName">Name</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szName" id="szName" value="#form.szName#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szCompanyName">Company Name</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szAddress">Address</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szTown">Town/City</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szTown" id="szTown" value="#form.szTown#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szPostcode">Postcode</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szTelephone">Tel</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szEmail">E-mail</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="submitrow"> 
      <input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" /> 
     </div> 
    </form> 

Et puis le CSS:

.row {width:314px;margin:0 0 8px 0;} 
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;} 
.row .field {width:195px;float:left;} 
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;} 

Le résultat peut être montré ici :

http://yfrog.com/ccieisshitej

fonctionne bien dans IE8/7 etc. Firefox Des conseils seraient application reciated!

Répondre

1

Aussi, en règle générale lorsqu'ils traitent avec IE6, essayez d'ajouter display:inline à vos divs flottant

+1

Cela a fonctionné un régal (ainsi que de jouer avec marge, bug 3px IE6 stupide) –

0

IE6 parfois n'obtient pas les marges et les paddings à droite. Essayez de les réduire de quelques pixels.