Ausrichten von input (type=text) in Formular (cross-browser)

[kuhn]

Hi,

habe folgendes Problem:

ich möchte eine Liste von Eingabefeldern nach folgendem (bzw. ähnlichem) Muster ausrichten:

label-1        label-2            label-3             label-4
|-----------|  |-----------|      |----------------|  |--------|
|-----------|  |-----------|      |----------------|  |--------|

label-5                           label-6   label-7   label-8
|--------------------------|      |------|  |------|  |--------|
|--------------------------|      |------|  |------|  |--------|

label-9                           label-10
|--------------------------|      |----------------------------|
|--------------------------|      |----------------------------|

HTML sieht so aus:

  
<ol>  
    <li>  
        <label for="test-1">label-1</label>  
        <input class="input" type="text" name="test-1" id="test-1">  
    </li>  
    <li>  
        ...  
    </li>  
</ol>  

Meine bisheriger Ansatz war dieser:

  
label  
{  
    float:left;  
    clear:right;  
    width: 11em;  
}  
  
.input  
{  
    width:100%;  
    float:left;  
    clear:left;  
}  
  
li  
{  
    float: left;  
    clear: none;  
    overflow:visible;  
    <!-- und dann per style="" dem jeweiligen Element width und margin-right in % zugewiesen -->  
}  

Der ganze Aufwand dient eigentlich nur dazu, die input boxen gleichmäßig
ausrichten zu können, ohne dass diese rechts abgeschnitten werden.
Damit geben die list-items die Abstände und Längen der Textboxen vor,
während die Textboxränder und die Label über den Rand der list-items herausfließen.

Das funktioniert auch in FF, Opera und IE7 ganz gut...
Bei IE6 und älter zerstört aber das Verhalten bei overflow:visible
das layout komplett, da hier die list-items ja mitvergrößert werden.

Alternativ hatte ich noch überlegt
a) den Textfeldern die Länge "mitzugeben", aber das führt zu Cross-
   Browser Problemen durch Rundungen bei den Prozentangaben
b) alles in em zu machen, aber dann verändern sich die Abstände
   wenn man die Schriftgröße global ändert.
c) overflow:hidden in den list-items zu benutzen und mit padding-right in
   den list-items das Abschneiden der Textboxen zu verhindern. Aber dann
   hab ich zum einen Probleme mit dem "addieren" von % und px (da das
   padding dann nicht relativ zu den unterschiedlich großen list-items
   angegeben werden kann) und zum anderen weiß ich nicht, ob die 4px, die
   bei mir gut aussehen, auch auf jedem anderen System korrekt sind.

Meine Fragen wären also:

1.) Gibt es eine Möglichkeit das bestehende css für ie6 und kleiner
    anzupassen (abgesehen von der Möglichkeit overflow:hidden in einem
    conditional comment zu verwenden und alle Textboxen und labels
    abzuschneiden), oder
2.) geht das auch ganz anders, oder
3.) geht das gar nicht :-)

Vielen Dank schonmal
kuhn

[kuhn]

Hi,

falls es hilft, hier noch ein demo-file zur Illustration des Problems:
http://web330.server109.dns-was.de/input_test.html

Sollte in FF, Opera und IE7 richtig aussehen.
In IE6 ist es nur mit overflow:hidden (s. * html hack) halbwegs zu gebrauchen,
aber bei längeren labels würden diese auch abgeschnitten.
IE5 kann ich grad nicht testen, aber ich vermute ähnliches.

Die list-items sind grün eingefärbt, um den overflow zu veranschaulichen.

Merci
kuhn

[kuhn]

Hi,

HINWEIS: nachdem sich hier so gar nichts tut :-), habe ich das Problem noch an anderer Stelle gepostet: http://xhtmlforum.de/56949-horizontales-ausrichten-von-input-type-text.html#post432487

Werde aber weiter auch hier reinschauen, ob noch was kommt.
Merci
kuhn