Pourquoi ma zone de textarea est-elle positionnée différemment dans différents navigateurs

Question

c'est la structure html. Je souhaite que la zone textarea se trouve à droite du nom, de l'adresse e-mail et du texte du site Web. comme cette photo montre. http://run.xxmn.com/1.png

quand j'ajouter ce style à la "zone de texte",

width:400px; 
    position: relative; 
    top: -70px; 
    left: 3px; 

dans Chrome et IE 8, div id de UNORDER du textarea, il est au-dessus de la partie du nom, email, site web.

Dans Firefox, IE6,7.it s'affiche correctement.

Comment puis-je faire en sorte qu'il soit correct dans Chrome et IE 8 aussi?

Answer 1

La façon correcte de disposer ceci serait de créer un nouveau div représentant les colonnes pour le formulaire et placer les trois entrées dans la colonne de gauche et la zone de texte dans la colonne de droite.

Par exemple:

<div class="left"> 
    <div id="name"><input....>....</div> 
    <div id="email"><input....>....</div> 
    <div id="website"><input....>....</div> 
</div> 
<div class="right"> 
    <div id="textbox"><textarea...>....</div> 
</div> 

Puis:

.left { 
    float: left; 
    width: 50%; 
} 

.right { 
    float: right; 
    width: 50%; 
} 

#name, #email, #website, #textbox { 
    width: 100%; 
} 

#testbox { 
    height: 300px; /* However tall it needs to be */ 
}