"padding" lässt FIREFOX layer falsch positionieren

alko

css stört layer-darstellung in mozilla

Da die besucher der von mir betreuten website zu 20% mozilla benutzen, muss ich sie wohl oder übel auch für diesen browser optimieren. (Bei IE6 & Opera funktioniert alles klaglos!)

Mein problem:
Zwei css-einträge in der klasse "feldtext" (abgelegt in einer externen css-datei) veranlassen mozilla, den layer versetzt darzustellen. (nach links & oben)

Das sind die "übeltäter"
(ohne sie wird der layer_frame korrekt angezeigt. Allerdings der text im layer_grau ohne die "gepaddingten" seitenabstände. Mit ihnen aber wird der 2.te layer falsch positioniert)

padding-right: 7px;
padding-top: 5px;

Das sind die layer, die einander offenbar - in ungebührlicher weise - beeinflussen. Und das durch nichts als die oben erwähnten css-einträge:

<div id="Layer_grau" style="position:absolute; left:0px; top:82px; width:189px; height:119px; z-index:3; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;" class="feldtext">
<p>Für Sie gelesen:</p>
</div>
<div id="layer_frame" style="position:absolute; left:0px; top:201px; width:190px; height:450px; z-index:6; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">
<iframe frameborder="0" scrolling="no" height="450" width="190" src="steuerung_buch.htm" name="steuerung"></iframe>
</div>

Weiß irgendjemand rat?
Zu sehen ist der fehler auf
http://www.litges.at ->rezensionen

Cyberman

IE und Firefox behandeln Padding unterschiedlich - der eine zählts zur Gesamtbreite, der andere nicht.
Firefox hat recht.

Lösung weiß ich allerdings auch keine - entweder versuchen ohne Padding auszukommen, oder einen Weg finde daß nur IE den Padding-Befehl bekommt.

Das ginge ev. mit IEs geparsten Kommentaren:

Code

<!--[if lt IE 8]>
<![endif]-->

In dem Beispiel würde das was in dem Kommentar ist ausgeführt werden wenn die IE Version kleiner 8 ist.

Ich bin nicht sicher ob das bei ALLEN IE Versionen funktioniert. Es sollte bei 5+ gehen, aber ob´s auch am Mac geht?...

Dr. Evil

Zitat von Cyberman
Code

Da ich keine propietäre Befehle mag, benutze ich immer für den IE erst bspw. das:

Code

div#layer

und DANACH für anständige Browser das:

Code

div[id="layer"]

alko

Danke erstmal für den tipp.
funktioniert dieser kommentar auch in einer externen css-datei?
Also etwa so:

.feldtext {
kommentaranfang

padding-top: 7px;

kommentarende
}

alko

Für den code ist dreamweaver verantwortlich.
Aber ich werd das einmal so händisch umtippen & sehen, ob es der firefox dann lieber hat.

Cyberman

Die MS-Kommentare funktionieren meines Wissens nach nur im HTML Coding.

Dr. Evil: Ich mag proprietäre Befehle auch nicht - aber noch weniger will ich non-HTML im Coding haben oder zweideutige Tags einsetzen.

bugcatcher

Ich trickse IE genre mit max-height/max-width aus.

Code

#lalala{
 width:100px;
 max-width:80px;
 height:100px;
 max-height:80px;
 padding:5px;
 border:5px black solid;
}

Allerdings muss man aufpassen.

Erstens... wenn ein neue version von IE plötzlich max/min-width/height lernt, ohne das Boxmodel zu korrigieren, kommt Müll bei rum.

Zweitens... Opera hat nach 7.0 irgendwie max-height verlernt und macht nurnoch max-width richtig. Sehr seltsam und vor allem doof. Der Trick geht also nurnoch mit max-width.

Drittens... wenn man den richtigen Doctype nimmt, kann IE das richtige Boxmodel (z.B. in XHTML 1.0 Strict).

Ob man jetzt mehrfachangaben macht (sich überschreibende Klassen, ob per IE-Spezial-Code "if IE", oder über unkorrekte Addressierungen, oder halt per browserweiche andere css-dateien) oder direkt xhtml benutzt ist immer etwas Glaubensfrage.

In der Regel umgehe ich solche probleme in dem ich die kombination von height/width zusammen mit padding/border vermeide. lieber einen zusätzlichen container. da bin zumindest ich auf der sicheren seite.

Code

<div style="width:100px; height:100px;">
 <div style="border:5px black solid; padding:5px;">
  5px border, 5px padding, 80px inhalt
 </div>
</div>

alko

:idea:
Danke erstmals für die anregungen. Es wird aber eine weile dauern, sie durchzuprobieren.

bugcatcher

auch interessant:
http://webfx.eae.net/dhtml/boxsizing/boxsizing.html
http://www.fabrice-pascal.de/artikel/ie5boxmodel/
http://www.howtocreate.co.uk/wrongWithIE/
http://barrierefrei.e-workers.de/workshops/ie-fun/index.html

Cyberman

Zitat von bugcatcher

http://barrierefrei.e-workers.de/workshops/ie-fun/index.html

Genial. Den Link merke ich mir.