Die magischen 7 Pixel

7px spielen bei der Anzeige von

 <hr /> 

im Internet Explorer (IE) eine wichtige Rolle (Die beschriebenen Unterschiede sind nur im IE zu sehen):

1:

Setzt man

 margin 

und

 padding 

im CSS auf

 0 

behält

 <hr /> 

im IE nach oben und unten einen Abstand zu anderen Elementen von

 7px

.

2:

Den Abstand nach oben kann man durch

 margin:-7px 0; 

entfernen. Ein Abstand nach unten bleibt (jetzt anscheinend mehr als 7px).

3:

Es verschwindet der Abstand ab einer hr-Höhe von

 14px 

(2 mal 7) und dem

 margin 

von

 -7px

.

4:

Ohne das negative margin bleibt der Abstand egal wie groß die Höhe ist.

5:

Setzt man für den IE

 <hr /> 

auf

 display:block; 

verringert sich der Abstand nach unten wieder auf

 7px 

(bringt aber manchmal andere Probleme mit sich.)

6:

Auch bei einer Höhe ab

 14px 

und

 display:block; 

bleibt der Abstand.

7:

Übrigens (um die 7 noch einmal voll zu bekommen) zeigt der IE die Farbe an, die im CSS für

 color 

angegeben ist, Gekko-Browser und Opera zeigen die Farbe an die für

 background 

angegeben ist.

Lösung?

Für meinen Regenbogen hier heißt die Lösung:

• Das erste

   <hr /> 

  bekommt für den IE die nachfolgenden zusätzlichen Angaben im CSS:

   display:block; margin: -7px 0; 

  .
• Die darauf folgenden

   <hr /> 

  bekommen für den IE die nachfolgenden zusätzlichen Angaben im CSS:

   display:block; margin: -14px 0; 

• Die Farben für color und background sind gleichlautend.

Wenn ich auch das erste

 <hr /> 

auf margin -14px 0; setze, rutscht das ganze ins darüberliegende div hinein.

Weitere CSSperimente von web.radunz.net