div & float:left;

Hi. Ich habl folgende Quelltext:

<html>
<head>
<style>
fieldset {
width:98%;
margin:5px 0px;
padding:5px;
text-align:left;
border:1px solid #000;
}

div#left {
float:left;
margin-right:20%;
}

input.text {
background-color: #F6F6F6;
width:30%;
border:1px dashed #000;
color: #000000;
font-size: 10;
font-family: Tahoma,Helvetica,verdana;
}

#smallfont {
font-size: 11px;
font-family: Tahoma,Helvetica,verdana;
}
</style>
</head>
<body>
<fieldset class="fieldset">
    <legend>E-Mail-Adresse</legend>
    <div id="left">
    <label for="username">
     <p id="smallfont" style="margin-top:0px;"><strong>E-Mail-Adresse</strong></p>
    </label>
    <input type="text" name="email" id="email" class="text">
    </div>

    <div>
    <label for="username">
     <p id="smallfont"><strong>E-Mail-Adresse</strong></p>
    </label>
    <input type="text" name="email" value="" id="email" class="text">
    </div>
</fieldset>
</body>
</html>

Die beiden Input-Felder sollen genau nebeneinander Angezeigt werden. Allerdings verschiebt sichd das linke ca. eine zeile nach unten. Dies kann ich in der Zeile 37 durch ändern

<p id="smallfont" style="margin-top:0px;"><strong>E-Mail-Adresse</strong></p>

zwar beheben weis aber nicht woran das liegt, dass sich das verschiebt.

Meine Hauptprobleme sind aber, dass erstens das erste Textfeld nicht die gewünschte größe von 30% hat und zweites das ganze in Firefox wunderbar klaptt aber im ie überhaupt ganz komisch formatiert ist.

Angucken kann man das ganze unter http://www.pherseus.net/test.htm

Bin für jede Hilfe dankbar.

flenders

div schrieb:

Meine Hauptprobleme sind aber, dass erstens das erste Textfeld nicht die gewünschte größe von 30% hat und zweites das ganze in Firefox wunderbar klaptt aber im ie überhaupt ganz komisch formatiert ist.

Ich sehe nirgends, wo du eine Breite oder Höhe von 30% setzt
Evtl. musst du noch position entsprechend setzen

div &amp; float:left;

div & float:left;