✔ IE rückt Text auf höhe von DIV Container ein

[chris4712]

Hallo,

der Internet Explorer rückt einen Text, der auf Höhe eines anderen DIV Containers ist, weiter ein, als den restlichen Text (siehe SceenShot).
Blau ist der Seitenhintergrund, grün ist der eine DIV Container (Menu) und weiß der andere (Content).
Damit man es besser sieht habe ich den Text mal markiert.

Hier der CSS Code:

  #Menu{
   float: left;
   width: 200px;
   margin: 0px;
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
   padding-bottom: 45px;
   background-image: url(../layout_images/menu_bg.jpg);
   background-repeat: repeat-y;
  }
 
  #Content{
   margin-left: 200px;
   padding: 20px;
   min-width: 16em;
   background-color: #FFFFFF;
   color: #000000;
  }

Woran liegt dies?

Gruß

Christian

 

[Maik]

Hierbei handelt es sich um den "3px-Bug", der im IE bei floatenden Boxen auftritt.

Setze daher mal folgende CSS-Regel ein:

 #Content{
   margin-left: 200px;
   display: block !important; /* Für moderne Browser */
   display: inline-block; /* Für IE */
   padding: 20px 20px 20px 20px !important; /* Für moderne Browser */
   padding: 20px 20px 20px 17px;  /* Für IE */
   min-width: 16em;
   background-color: #FFFFFF;
   color: #000000;
  }

 

[chris4712]

Hallo Michael!

Danke für die Lösung! Klappt!
Wusste nur nicht wie das Problem heißt

Gruß

Christian

 

[chris4712]

Leider zu früh gefreut...
Nun habe ich einen blöden Abstand (siehe wieder ScreenShot) zwischen Menu DIV und Content DIV.
Natürlich nur im IE...
Wenn ich diese Zeile auskommentiere, ist das alte Problem da, das neue Problem wieder weg :suspekt:

display: inline-block; /* Für IE */

 

[Maik]

Hier das erweiterte Stylesheet:

#Menu{
   float: left;
   width: 200px;
   margin-right: 0px !important; /* Für moderne Browser */
   margin-right: -3px; /* Für IE */
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
   padding-bottom: 45px;
   background: url(../layout_images/menu_bg.jpg);
  }

#Content{
   margin-left: 200px !important; /* Für moderne Browser */
   margin-left: 197px;  /* Für IE */
   display: block !important; /* Für moderne Browser */
   display: inline-block;  /* Für IE */
   padding: 20px 20px 20px 20px !important; /* Für moderne Browser */
   padding: 20px 20px 20px 17px;  /* Für IE */
   min-width: 16em;
   background-color: #ffffff;
   color: #000000;
  }

 

[chris4712]

Danke,

ich sehe schon dass ich noch einiges lernen kann / muss.

Gruß

Christian