Beat: Firefox stellt display:table falsch dar

Beitrag lesen

SELF-Forum

Firefox stellt display:table falsch dar

Beat Homepage des Autors
– Informationen zu den Bewertungsregeln

Der Aufbau ist folgender

...

<input type="text" value="" name="text_1" class="table_cell"/>

...

mit entsprechender css (.table{ display: table}; .table_row{ display: table-row}; ...)

Es ist davon abzuraten, Formularelementen irgend einen display-typen verschienden von inline, inline-block oder block zu geben.

Folgender Code erzeigt im FX ein nettes Grid, aber viele Formatierungsoptionen hat man ersichtlicherweise nicht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
 "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
<title>Test</title>  
<style type="text/css">  
form{display:table; border:2px solid #00c;}  
form > div{display:table-row;}  
form > div > * {display:table-cell; width:5em;border:1px solid #f00;}  
form > div > * + * {width:10em;}  
</style>  
  
</head>  
<body>  
  
<form action="">  
   <div>  
   <label>1</label><input type="text" value="text">  
   </div>  
   <div>  
   <label>2</label><select><option>Selectfeld</option></select>  
   </div>  
   <div>  
   <label>Check</label><input type="checkbox">  
   </div>  
   <div>  
   <label>Radio</label><input type="radio">  
   </div>  
   <div>  
   <label>Submit</label><input type="submit" value="Submit">  
   </div>  
</form>  
  
</body>  
</html>

Wie erhalte ich ein nettes Grid mit soweinig Code?
Antwort: Nicht mit display:table

Besser ist es, den label Elementen display:inline-block mit definierter Breite zu geben. Dadurch erscheint für die erste "Spalte" also Grid.

mfg Beat

--
><o(((°>           ><o(((°>
   <°)))o><                     ><o(((°>o
Der Valigator leibt diese Fische
Beitrag melden
–
Informationen zu den Bewertungsregeln