✔ 3px Bug?

[philippme]

Hallo,
hab ein Problem mit dem Layout meiner Seite. Der Fuchs und Opera zeigen soweit alles richtig an, aber IE macht Probleme

Folgende Seite:

http://www.nabobgroup.com/de/unser-unternehmen.html

Im horizontalen Menü im Oberen Bereich - links direkt neben dem ersten Eintrag "Home" läßt IE eine 3px breite Lücke.
Woher kommt sie, und - noch viel wichtiger - wie bekomm ich sie weg

Hoffe ihr könnt mir helfen.

Vielen Dank im vorraus,

Philipp

 

[Maik]

Wie der Topic schon sagt, handelt es sich hierbei tatsächlich um den "3px-Bug", der im IE bei floatenden Boxen auftritt.

Erweiter daher mal den Klassen-Selektor .spacer_menu_top mit folgenden margin-Angaben, um die Lücke zu schliessen:

.spacer_menu_top {
float:left;
margin-right: 0 !important; /* Für nicht-IE-Browser */
margin-right: -3px; /* Für IE */
padding: 0px;
width:200px;
background-color: #FFFFFF;
}

 

[philippme]

danke das hat geholfen. unglaublich, wieviel zeit man in sowas stecken kann. und dann ist man nichtmal selber schuld, sondern ein ie-bug... sehr ärgerlich

 

[PuReSteeL]

Hallo Michael,

mich würde mal interessieren wie Du auf diese Lösung gekommen bist?
Ist irgendwo Dokumentiert das der IE bis Version 6 die !important Anweisung ignortiert, oder nachfolgende Anweisungen zum gleichen Attribut den Vorzug vor !important gibt?

Viele Grüße
Heiko

 

[BehindTheScenes]

Hallo Michael,

mich würde mal interessieren wie Du auf diese Lösung gekommen bist?
Ist irgendwo Dokumentiert das der IE bis Version 6 die !important Anweisung ignortiert, oder nachfolgende Anweisungen zum gleichen Attribut den Vorzug vor !important gibt?

Viele Grüße
Heiko

Diese Frage wird sehr oft gestellt, auch hier. Bei google gibt es tausende antworten darauf
Da M$ den source von IE net Preis gibt musste andere Lösung her ...
Jemand hat einfach rumexperementiert und hat es festgestellt, wie man den Bug behebt ...

MfG BehindTheScenes

 

[PuReSteeL]

Während des googlens (schlimmes Wort) fand ich lediglich Lösungen und eigentlich kannte ich Sie auch alle. Aber kein Einziger hat bei der hier einfachsten Variante etwas dazu geschrieben, wie er eben auf diese Lösung kam, bzw. ob es da mittlerweile einen Dokumentierten Bug zu gibt, bezüglich der !important-Anweisung.

Grüße
Heiko

 

[Maik]

Hallo Michael,

mich würde mal interessieren wie Du auf diese Lösung gekommen bist?
Ist irgendwo Dokumentiert das der IE bis Version 6 die !important Anweisung ignortiert, oder nachfolgende Anweisungen zum gleichen Attribut den Vorzug vor !important gibt?

Viele Grüße
Heiko

Hallo Heiko,

die Lösung stammt nicht von mir - hab die Technik selber irgendwann irgendwo aufgeschnappt

Zur Implementierung der !important-Regel in den einzelnen Browsern gibt es eine Übersicht -> http://www.css4you.de/wscss/css06.html#h.


Gruß
Michael

 

[PuReSteeL]

Hallo Michael,

die Tabelle erklärt alles, danke Dir für den Link.

Grüße
Heiko

 

[hela]

... die Tabelle erklärt alles, ...

Das finde ich überhaupt nicht, m.E. wird durch die Tabelle mehr Verwirrung gestiftet. Insbesondere wenn man wirklich mal darüberstehendes Beispiel ausführt, dann merkt man staunenderweise, dass sich Beispiel und Tabelle widersprechen.

Der Internet-Explorer kennt die (!important)-Regel! Er wendet sie allerdings bis einschließlich IE6 nur nicht an, wenn die gleiche Eigenschaft mehrmals in einem Selektor notiert ist.

Also zwei Beispiele:

1. Text, der folgendermaßen formatiert ist:

p {
   color: green !important;
   color: red;
}

wird vom IE7 grün dargestellt und bis einschließlich IE6 rot.

2. Text, der folgendermaßen formatiert ist:

p { color: green !important; }
p { color: red; }

wird von IE5.5, IE6 und IE7 grün dargestellt.

Das Verhalten noch früherer Versionen des IE habe ich nicht ausprobiert, ist vielleicht auch nicht relevant. Leider geht die o.g. Seite auf diesen Umstand nicht ein.