nicht angemeldet
Hallo Zusammen,
ich bin gerade dabei ein Formular zu bauen und mit dem IE8 (leider wird die Seite mit ihm benutzt) kommt es zu Problemen.
Und zwar werden die Input Felder in der Liste dargestellt und zwar in 2 Spalten. Wenn ich nun auf ein Input Feld auf der rechten Seite klicken, dann wird in der nächsten Reihe die Linke Spalte leer gelassen und alle rutschen 1 Feld weiter nach rechts. Klicke ich nun in das eigentlich Input Feld in der linken Spalte (was ja beim ersten Fall aber in der Rechte spalte steht) rutscht es wieder zurück auf seine richtige Position in der linken Spalte.
Ich Denke der Fehler liegt im Border beim Input:Focus, denn wenn ich das rausnehme ich alles normal, nur leider weiß ich nicht wie ich das beheben kann, außer diese Zeile zu löschen.
Bis jetzt ist der Fehler mir nur im IE8 aufgefallen, im Chrome läuft alles wunderbar.
Weitere Browser habe ich noch nicht getestet!
<!DOCTYPE html>
<head>
<style type="text/css">
<!--
fieldset {
border: none;
}
fieldset legend {
background-color: #ffffff;
color: #006cc0;
font-weight: bold;
display: block;
}
fieldset ul {
border-top: 2px solid #006cc0;
background-color: #f0eeeb;
margin: 0px;
padding: 0px;
list-style: none;
}
fieldset ul li {
float: left;
padding: 7px 0 7px 15px;
width: 45%;
overflow:hidden;
}
ul li label {
display: inline;
float: left;
width: 30%;
}
ul li label span {
float: right;
color: #ff0000;
}
input,
textarea {
margin-left: 10px;
float: left;
width: 40%;
background-color: #F0F0F0;
}
ul li input:focus,
ul li textarea:focus {
border: 1px solid #7BB9B7; /* Erzeugt Fehler im IE 8 */
background-color: #FFFFFF;
}
ul li input.checkbox,
ul li input.radio {
float: left;
width: 20px;
border-width: 0px;
}
p.infotxt {
clear: both;
margin-left: 30%;
width: auto;
text-align: left;
font-size: 10px;
padding: 0px 10px;
}
ul li.ganze-zeile {
width: 100%;
}
-->
</style>
</head>
<body>
<div id="arbeitsbeginn_ma">
<form id="arbeitsbeginn_ma" action="#" method="post">
<fieldset>
<legend>Antragssteller</legend>
<ul class="cf">
<li>
<label><span>*</span>SAP Kürzel</label>
<input id="antragsteller_sapkzl" type="text" required placeholder="SAP Kürzel" value="" pattern="^[a-zA-Z0-9]{4,12}$"/>
<p class="infotxt">SAP Kürzel</p>
</li>
<li>
<label><span>*</span>Name</label>
<input id="antragsteller_name" type="text" required placeholder="Name" value=""/>
<p class="infotxt">Name</p>
</li>
<li>
<label><span>*</span>Vorname</label>
<input id="antragsteller_vorname" type="text" required placeholder="Vorname" value=""/>
<p class="infotxt">Vorname</p>
</li>
<li>
<label><span>*</span>E-Mail</label>
<input id="antragsteller_email" type="email" required placeholder="E-Mail" value=""/>
<p class="infotxt">E-Mail</p>
</li>
<li>
<label><span>*</span>Organisation</label>
<input id="antragsteller_organisation" type="text" required placeholder="Organisation" value=""/>
<p class="infotxt">Organisation</p>
</li>
</ul>
</fieldset>
</form>
</div>
</body>