3 Pixel Abstand beim IE

Bei meinem aktuellem Projekt ist mir wieder ein altbekannter Internet Explorer-Bug ĂŒber den Weg gelaufen :-). Es handelt sich dabei um “IE Three Pixel Gap” bzw. “The IE Three Pixel Text-Jog” (frei ĂŒbersetzt: die drei Pixel breite LĂŒcke/Kluft/Abstand). Dieses PhĂ€nomen tritt auf in Verbindung mit floatenden MenĂŒs und Internet Explorer (Windows 5.0-6).

Beispiel

Hier ein Screenshot eines einfachen 3-Spalten-Layouts:

3-Spalten-Layout

Nichts besonderes, es ist nur ein Beispiel. Das linke und rechte Navigationselement floaten (float: left; und float: right;) und der Inhalt bekommt jeweils rechts und links den entsprechenden Margin-Wert (Ă€ußerer Abstand).

3Pixel-Abstand-Zoom Sieht soweit gut aus. Aber der Fehler taucht auch erst auf wenn man im Inhalstbereich den Text einfĂŒgt und ihn durch AbsĂ€tze (<p>) strukturiert. An der Stelle bzw. Höhe wo das linke floatende Element aufhört, verschiebt sich der Text im Inhaltsbereich um 3 Pixel nach links.

Die VergrĂ¶ĂŸerung des oberen Screenshots, aus dem problematischen Bereich, verdeutlicht dies. Um den Fehler zu verdeutlichen, habe ich im Bild eine vertikale Linie gezogen. Je nach dem, wie man den Text strukturiert kann sich die optische Wirkung dieses Fehlers vergrĂ¶ĂŸern und richtig auffallen. Der Fehler tritt auf weil der Internet Explorer allen AbsĂ€tzen, die den floatenden Bereich berĂŒhren bzw. an ihn angrenzen, einen Abstand von 3 Pixel zufĂŒgt. Jegliche Versuche die AbstĂ€nde zu vergrĂ¶ĂŸern bzw. zu verkleinern helfen nicht.

Lösung

Auf Positioniseverything.net gibt es eine Lösung zu diesem Problem. Man nutzt dabei den HTML-Selektor in der CSS-Datei.:


* html #floatbox {
margin-right: 10px;
}
* html p {
height: 1%;
margin-left: 0;
}

Alle Browser außer Internet Explorer ignorieren * html als CSS-Selektor und ĂŒbergehen diese Angaben. IE Mac, der * html interpretiert, aber nicht den 3-Pixel-Abstand zufĂŒgt, wird durch den Kommentartrick (\) von dieser Angabe ausgesperrt.

Bei dieser Angabe geht es darum den AbsÀtzen eine sehr kleine Höhe zu geben, die nachher durch den Inhalt angepasst wird. Angeblich wÀre das Problem somit gelöst. Die Betonung liegt auf angeblich, da es bei mir nicht funktioniert hat :-). Ich habe alles versucht, aber es hat nicht geklappt .

Meine Lösung

FĂŒr dieses Problem ist es auch dem Inhaltsbereich eine feste Breite zu geben. Somit verschwindet das Problem. Aber es taucht ein neuer Problem auf. Und zwar wieder im Internet Explorer (wer den sonst *g*). Mozilla, Opera und Safari geben sich zufrieden mit der ausgerechneten Breite. Aber alle Internet Explorer Versionen (Windows) sind mit der richtigen Breite nicht zufrieden und verschieben den Inhalt unter der Hohe der Navigation, obwohl rechts und links noch genug Platz war.

Im konkreten Beispiel war die ausgerechnete Breite 470 Pixel und alle IEs haben den Inhalt auf die richtige Höhe eingereiht, als ich die Breitenangabe von 462px angegeben habe. Soweit ich das nachvollziehen kann, fĂŒgt IE in solchen FĂ€llen zusĂ€tzliche AbstĂ€nde. Ich habe alle Angaben zum Padding (innerer Abstand) und Border (Rahmen) weggelassen, damit nicht der Box-Modell-Bug zum Vorschein kommt. Aber das hat den IE nicht beeindruckt. Daher habe ich fĂŒr mich folgende Eingabe entwickelt:


* html #inhalt {
width: 462px;
}

Alle Browser die keine Probleme mit den 3-Pixel-Abstand haben passen sich die Breite fĂŒr den Inhaltsbereich automatisch an und die IEs in Windows bekommen eine feste Breite. Und somit war fĂŒr mich das Problem gelöst.

Diesen Beitrag teilen:

Verwandte BeitrÀge:

12 Kommentare

  1. Hatte ich auch schon; bei einer Layer die mit einem Bild abschließt. Unten waren beim Internet Explorer diese 3px zu viel. Ich hab’ dem Bild einfach margin-bottom:-3px; gegeben und es war Ruhe. Die anderen Browser hat dies nicht gestört. Manchmal sehr frustrierend. FrĂŒher musste man bei solchen Sachen Netscape berĂŒcksichtigen, heute muss ich den Code fĂŒr den Internet Explorer verstĂŒmmeln.
    ps: soeine Mozilla Installationsanleitung hab’ ich auch schon gemacht, nur fĂŒr den Firefox. Gut geworden 😉

  2. Hallo!
    Auf http://www.yaml.de/artikel/css/ie_hacks.html habe ich einen Ă€hnlichen Hack wie hier beschrieben gefunden. Ich glaube der Grund, warum es bei dir mit dem * html p {….} nicht funktioniert, ist, dass die s innerhalb eines weiteren Containers stecken.
    Lösung: FĂŒr das Element, das direkt ❗ an das floating-element anschließt einfach:
    * html #idVomElementRechtsNebenFloat { height: 1% }
    So klappt es bei mir. 😉

  3. Elegante Lösung fĂŒr den 3 PX Bug im IE6…

    Es haben sich schon viele die ZĂ€hne am sogenannten 3 Pixel Text – Jog Bug ausgebissen. Ich auch. Das Problem besteht unter anderem in der folgenden hĂ€ufiger verwendeten 3-spaltigen Layout-Konstruktion: <div id="container"> <div id=…

  4. […] Danke ert mal fĂŒr den Link: hier ist das auch auf deutsch: http://https://www.perun.net/2004/07/09/3-pixel-abstand/ —> bei mir klappts aber nicht. ich habe keine p-tags in meinem dokument dann hab ich ĂŒber oberen link gelesen ich solle die box die rechts neben der floatbox steht mit {height: 1%} versehen. Aber ich möchte doch eine bestimmte höhe haben so 300 pixel und mein bild, welches im Hintergrund liegt verĂ€ndert ja meine box nicht. wie mache ich das nun??? […]

  5. Benutze CSS, haben sie gesagt. Vergiss Tabellen, haben sie gesagt. Nun sitze ich hier an meinem ersten CSS-Layout und endlich hat das große Problem auch einen Namen!
    Ich danke dafĂŒr! Allerdings half mir erst Joes Lösung wirklich weiter, da ich mir keine feste Breite bei dem komischen Template hier erlauben kann. Danke! Hat mir den Abend gerettet 😉 Nu macht’s wieder Spaß!

  6. Ach danke – viele graue Haare spĂ€ter hat auch bei mir Joes Lösung geholfen (genau wie Daniel habe ich auch keine festen Breiten!) – Yipeeee!

  7. Die perfekte Lösung fĂŒr den 3px-Bug ist folgende:

    meinDIV {margin-right: 0px !important; margin-right: -3px;}

    Vorteil: es funktioniert mit IE6 / 7, FF etc.

    Frank

Kommentare sind geschlossen.