Pixelfehler im FF 3.0

[Alpax]

Hallo zusammen

Ich hab gerade eine Website (noch nicht live) hier und der FF 3.0 zeigt mir diverse Elemente um ein paar Pixel zu weit rechts/links/oben/unten ... die simple Frage, kennt jemand nen "einfachen" Weg wie ich das im CSS so anpassen kann, dass es nur der FF 3.0 merkt ... :root funktioniert btw nicht (also funktioniert schon aber leider auch in anderen Browsern)

Falls jemand ne Idee hat wäre das echt spitze

mfg

Edit: Das ganze läuft übrigens mit Typo3 ... entsprechend würde auch ein passendes Typoscript funktionieren ... habe auch dazu einiges gefunden aber wie gesagt .. funktioniert net so wirklich ^^

 

[Zukane]

Hm also bin noch selber neu in der Sprache CSS.

Also was grundlegen eigentlich nur für den IE gilt ist:

* 
{
padding: 0px;
margin: 0px;
}

Hier bekommst du immer Hilfe: http://xhtmlforum.de/css/

Bzw schau dir mal da den FAQ Sticky an: http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html

 

[Yadiz]

Bei padding (sollte ja eigentlich nur Innenabstand sein) ist mir aufgefallen, dass der Innenabstand bei manchen Browsern zwar richtig angezeigt wird. Aber gleichzeitig der Außenabstand zu andern Objekten außen herum um gleichen Betrag erhöht wird.
Mit margin (also nur Außenabstand) hingegen hatte ich noch nie Pobleme. Probier mal padding durch margin zu ersetzen, also margin auf das "eingerückte" Objekt zu machen, statt padding auf den Container darüber.

Also mache aus:

das hier:

ein Versuch ists wert :-)

 

[Zukane]

Öhm du weißt schon das padding der Innenabstand und margin der Außenabstand ist? ;D

 

[Yadiz]

Die verwechsle ich immer =) Aber vom Sinn müssts dann stimmen. Habs mal abgeändert im Post zuvor.

Ich hab keinen Plan woran das liegt. Aber im google Chrome oder Opera ist die Anzeige durch padding wie gesagt ok, in IE fehlerhaft.

 

[Heynrich]

wenn du einen div in einem anderen hast, und gleichmäßigen abstand haben möchtest, nimmst du margin bei dem darinliegenden.

bsp:

#layer {
width:250px;
height:250px;
background-color:#999999;
border:1px solid #000000;
}
#inlay {
margin:15px;
width:200px;
height:200px;
background-color:#FFFFFF;
padding:10px;
}

#HTML
<div id="layer"><div id="inlay">Ich bin ein test!</div></div>

Wenn du im Inlay dann noch Text haben möchtest, der einen Abstand zum Rand des inneren Divs hat, nimmst du padding. Beachte aber, dass du den inneliegenden Div von width und heigth kleiner machen musst, wenn du padding benutzt, sonst verschiebt sich alles. In dem Beispiel möchte ich, dass der inlay an jeder seite 15px abstand zu dem layer hat. also muss der inlay logischerweise 30px (2x15px) kleiner sein. Hätten wir eine width von 220 dazu ein padding:15px

Der Text im inlay soll aber auch nochmal 10px abstand haben, weils sonst scheiße aussieht. also bekommt der inlay zusätzlich noch ein padding von 10px. Dadurch verschiebt sich aber alles, also muss ich nochmal den inlay um 20px (2x10px) kleiner machen.

Das oben genannte Beispiel *müsste* in allen Browsern gleich aussehen. Vielleicht konnte ich ja helfen.

 

[Alpax]

okay hab jetzt herausgefunden:

#headerTopMenu {line-height:24px;} sorgt dafür das es im FF3.0 richtig aussieht - Problem: jetzt passts im 3.6 nicht mehr ... kennt jemand ne funktionierende Browserweiche für FF3.0

mfg

edit: ok jetzt gehts ... die Weiche die ich hatte, hat funktioniert nur habe ich da etwas "übersehen" ... naja danke auf jedenfall für eure Hilfe .. jetzt gehts

 

[Whitechapel]

Am besten ist es wenn man sich bevor man sich an's CSS setzt eine Reset CSS Datei runterlädt
um in allen Browsern ein gleiches und pixelgenaues Layout zu haben.

Da gibt es dann wenn überhaupt eigentlich nur noch Probleme im tollen Internet-Explorer für
den man dann bei Bedarf und vielleicht in Ausrichtung auf die Zielgruppe der Website einige
Anpassungen vornehmen sollte. Ich bin jedoch der Meinung dies nicht mehr zu tun, da man
die Leute langsam mal dazu bewegen sollte, ihre Browser auf dem aktuellsten Stand zu halten
um eine optimale Webseiten-Darstellung zu erhalten.

Edit: von der Variante des * Selektors ( * {margin:0; padding:0;} ) kann ich nur abraten, da
dies einiges an Geschwindigkeitseinbußen beim Aufbau der Seite bewirkt, da dann jedes Objekt
auf der Seite dadurch angesteuert wird.. Funktioniert aber übrigens in allen Browsern und nicht
nur im IE