Pourquoi mon formulaire de contact ne s'affiche pas correctement sur les navigateurs Windows?

Question

J'ai créé un formulaire de contact sur la page contactez-nous d'un site que je suis en train de construire. Les navigateurs Mac le rendent correctement, tout comme IE7 et IE8 sur Windows.

FF, Chrome et Safari ont des problèmes d'espacement sur la plate-forme Windows. Mon code est listé ci-dessous;

<form action="" method="post"> 
    <fieldset id="fs1"> 
     <div id="formLeftCol"> 
      <ol> 
       <li> 
        <label for="name">Your Name*</label> 
       </li> 
       <li> 
        <input id="name" name="name" type="text" /> 
       </li> 
       <li> 
        <label for="email">E-mail*</label> 
       </li> 
       <li> 
        <input id="email" name="email" type="text" /> 
       </li> 
       <li> 
        <label for="website">Website</label> 
       </li> 
       <li> 
        <input id="website" name="website" type="text" /> 
       </li> 
       <li> 
        <input type="submit"name="submit" value="SUBMIT" /> 
       </li> 
      </ol> 
     </div> 
     <div id="formRightCol"> 
      <ol> 
       <li> 
        <label>Your Message*</label> 
       </li> 
       <li> 
        <textarea name="message" cols="40" rows="7"> 
         Please leave us a message... 
        </textarea> 
       </li> 
      </ol> 
     </div> 
    </fieldset> 
</form> 

Maintenant, le CSS:

#formLeftCol, #formRightCol { 
    float: left; 
} 
#formLeftCol { 
    width: 150px; 
} 
#formRightCol { 
    width: 473px; 
    margin-left: 15px; 
} 
input, textarea { 
    background: #f9f9f9; 
    border: 1px solid #c1c1c1; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #818181; 
    margin: 10px 0; 
    padding: 10px; 
} 
fieldset { 
    padding: 15px; 
} 
textarea { 
    width: 451px; 
} 
#fs1 { 
    border: 1px solid #c1c1c1; 
} 

Le textarea ne sera pas lui-même l'espace en conséquence, il est trop large sur ces navigateur, mais tous les autres on travaille.

Merci

Answer 1

Votre problème est dans le CSS à coup sûr. Je ne suis pas sûr de ce que vous avez fait avec OSX, mais je vois le problème dans un tas de navigateurs sur Windows (IE, FF, Chrome).

Essayez spécifier une largeur pour vos entrées via CSS:

input { 
    width:141px; 
} 

Cela semble donner l'effet que je me fais que vous voulez: http://jsfiddle.net/P5jkJ/1/