Firefox: 250px != 250px

[Fabian Transchel]

Hallo alle,

ich erlebe gerade ein seltsames Verhalten des Firefox (alle anderen relevanten tun, was ich für richtig halte):

Folgende Situation: Ich habe ein Formular, das mehrere input-Elemente enthält, eines davon ist vom Typ submit. Obwohl ich für alle das gleiche CSS angebe (s.u.), weigert sich der Firefox, dem Submit die gleiche Breite zu geben, er ist in jedem Fall 5 Pixel kürzer.

HTML-Schnipsel:

  
<input name="TEL">  
<input type="submit" name="SUBMIT" value="Abschicken" id="button" onMouseOver="if(this.style.backgroundColor)this.style.backgroundColor = '#374828';" onMouseOut="if(this.style.backgroundColor)this.style.backgroundColor = '#779878';">  

Zugehöriger CSS-Schnipsel:

  
#kontaktform input  
{  
  display:block;  
  font-size:12px;  
  background-color:#779878;  
  border:1px outset #444;  
  width:250px;  
  margin:0px;  
  color:#fff;  
  padding:2px;  
  line-height:12px;  
}  
  
  /* CSS-Hover für standardkonforme Browser*/  
  
#button:hover  
{  
  background-color:#374828;  
}  

Das Dokument, aus dem dieser Ausschnitt ist, enthält valides HTML 4.01 Strict, der Firefox sollte sich also im standards compliant mode befinden. Hat jemand eine Idee, woran das liegt und wie dem Abhilfe zu schaffen ist?

Grüße aus Barsinghausen,
Fabian

[Cheatah]

Hi,

Obwohl ich für alle das gleiche CSS angebe (s.u.), weigert sich der Firefox, dem Submit die gleiche Breite zu geben, er ist in jedem Fall 5 Pixel kürzer.

um 6 Pixel, schätze ich.

Das Dokument, aus dem dieser Ausschnitt ist, enthält valides HTML 4.01 Strict, der Firefox sollte sich also im standards compliant mode befinden.

Mozilla macht die Verwendung des Box-Models nicht am Quirks-Mode fest. Er nimmt mit -moz-box-sizing die CSS/3.0-Eigenschaft box-sizing vorweg.

Hat jemand eine Idee, woran das liegt

Man glaubt es nicht: Um das Verhalten an andere Browser anzupassen. Insbesondere bei Prozentwerten macht sich dies bemerkbar.

Cheatah

[Fabian Transchel]

Hallo Cheatah,

Hat jemand eine Idee, woran das liegt

Man glaubt es nicht: Um das Verhalten an andere Browser anzupassen.

Na super. Als ich die Erklärung las hab ich mir sowas gedacht...

Gut, muss ich halt das Formular anders anordnen, damit es vernünftig aussieht.

Grüße aus Barsinghausen,
Fabian

[Cheatah]

Hi,

Gut, muss ich halt das Formular anders anordnen, damit es vernünftig aussieht.

warum? Verwende die genannte -moz-Eigenschaft. Meines Erachtens ist das unbedenklich: Das -moz-Schema ist nachweislich kompatibel (im Sinne von überschneidungsfrei) mit bestehenden CSS-Standards, und es wird mit CSS/3.0 ratifiziert werden.

Cheatah

[Fabian Transchel]

Hallo Cheatah,

warum? Verwende die genannte -moz-Eigenschaft. Meines Erachtens ist das unbedenklich: Das -moz-Schema ist nachweislich kompatibel (im Sinne von überschneidungsfrei) mit bestehenden CSS-Standards, und es wird mit CSS/3.0 ratifiziert werden.

Weiß ich. Ich hätte allerdings gerne eine CSS-Datei, bei der der Validator _nichts anderes_ als "This is valid CSS" ausspuckt.

Grüße aus Barsinghausen,
Fabian

[Ingo Turski]

Hi,

Weiß ich. Ich hätte allerdings gerne eine CSS-Datei, bei der der Validator _nichts anderes_ als "This is valid CSS" ausspuckt.

dann mach's doch wie ich und binde diese Styles per JS ein. ;-)

freundliche Grüße
Ingo