✔ Darstellungsunterschiede IE <--> Firefox TEIL II

[WIK-Lars]

Hallo,

vielen Dank für die Hinweise zu meinem CSS-Code aus dem letzten Posting. Natürlich werde ich jetzt immer erstmal selbst validieren ;-) . Tatsächlich lag daran auch die Unterschiedliche Darstellung im IE 6 bzw. Firefox.

Der folgende Quellcode ist auf Richtigkeit geprüft. Auch hier habe ich einen gravierenden Unterschied in der Darstellung in den beiden Browsern. Während der IE 6 mir eine ordentliche Aufteilung der Site liefert, werden im Firefox nur schmale Streifen angezeigt, wo höchstens die Breiteneinstellungen stimmen.

#header {       height: 15%;
  background-color: blue; } 
 
#menu {         height: 5%;
  background-color: aqua; }
#left {         width: 15%;
  height: 75%;
  float: left;
  background-color: black; }
#right {        width: 15%;
  height: 75%;
  float: right;
  background-color: yellow; }
#content {      height: 75%;
  background-color: red; }
#footer {       height: 5%;
  background-color: orange; }

<div id="header">&nbsp;</div>
<div id="menu">&nbsp;</div>
<div id="left">&nbsp;</div>
<div id="right">&nbsp;</div>
<div id="content">&nbsp;</div>       
<div id="footer">&nbsp;</div>

Woran liegt dies?

VIELEN DANk für Eure Antworten!

 

[Maik]

Hi,

ich kann da mit dem gezeigten Quellcode keine Darstellungsunterschiede zwischen den beiden genannten Browsern entdecken, außer, dass im IE zwischen den floatenden Spalten der "3px-Gap-Bug" in Erscheinung tritt, der sich folgendermaßne fixen lässt:

#left {
width: 15%;
height: 75%;
float: left;
background-color: black;
margin-right:0 !important;
margin-right:-3px;
}

#right {
width: 15%;
height: 75%;
float: right;
background-color: yellow;
margin-left:0 !important;
margin-left:-3px;
}

Falls du die 75%-Höhe der Elemente vermisst, solltest du das Stylesheet noch mit dieser Regel erweitern:

html,body {
margin:0;
padding:0;
height:100%;
}

 

[WIK-Lars]

SUPER!

Das war genau DAS, was ich braute!

!! Tausend Dank !!