Gestaltungsprobleme mit einem Listenformular
0 
molily
Gestaltungsprobleme mit einem Listenformular
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>
-
Hallo,
Das Problem kann ich im IE, aber auch in Chrome und Firefox nachvollziehen. Das Verhalten erscheint mir auch völlig logisch.
input-Elemente haben standardmäßig eine border. Die ist im Allgemeinen dem Browser überlassen, üblicherweise ist sie 2px groß. Wenn du sie beim Fokus auf 1px setzt, so wird das ganze floatende Elemente um 2px schmaler. Das nächste floatende Element rutscht also nach oben, wird unter dem zweiten und neben dem ersten angezeigt.
Float: left/right hat eigentlich nichts mit festem Spaltenlayout zu tun, man missbraucht diese Technik nur dafür, weil es lange keine bessere gab. Elemente mit float: left/right werden soweit oben wie möglich dargestellt und stapeln sich vertikal sowie horizontal in Float-Richtung. Wenn viele aufeinander folgende Elemente floaten und eine unterschiedliche Höhe haben, landen die Boxen oftmals, wo sie nicht landen sollen, und es entstehen unschöne Lücken.
Du solltest beim Fokus also keine CSS-Eigenschaft ändern, die die letztliche Höhe des floatenden Elemente ändert. Definiere z.B. für den Normal-Status eine border (1px solid black oder so etwas). Dann ändert sich beim Fokus nur noch die Farbe, aber nicht die Höhe und damit das ganze Layout. Oder setzte eine großzügige min-height für die floatenden Elemente, die gegenüber Höhenänderungen der Inhalte tolerant ist.
Eine Alternative zu float in solchen Fällen ist übrigens display: inline-block. Es sorgt für eine Anordnung in Zeilen, anstatt dass Boxen so hoch wie möglich gezogen werden.
Mathias