✔ Fehler im Stylesheet?

[netsrac91]

Hi!
Ich hab eine Container erstellt und in den 4 divs gepackt. Das Problem ist jetzt, dass ich dem 2. div von oben keine Höhe zugewiesen habe, weil ich es später über eine SQL-Datenbank füllen lassen will und deshalb nicht genau weiß wie hoch es sein muss. Firefox macht jetzt über und unter diesem div ca. 10px abstand, obwohl ich die gar nicht definiert habe. Im IE (6) sieht das Layout völlig normal aus, bis auf einen grauen Streifen rechts neben den divs. Wo der herkommt weiß ich auch nicht so genau, weil dieser Streifen ist im Firefox nicht zu sehen.

Link zur Problemseite:
http://www.carsten-porth.de/problem/index.html
Link zum Problemstylesheet:
http://www.carsten-porth.de/problem/styleneu.css

Ich wäre sehr dankbar wenn mir jemand sagen könnte, wie ich diese 2 Probleme lösen könnte.

MfG Carsten

 

[Maik]

Hi,

die Lücken im Firefox stammen vom h1- und p-Element und deren Polsterungseigenschaften, die derzeit nicht auf null gesetzt sind, und somit einen Absatz im Textfluss erzeugen.

Durch die folgenden Regelerweiterungen lassen sie sich schliessen:

#content h1 {
margin:0;
}

#content p {
margin:0;
margin-left:25px;
}

Der graue Streifen am rechten Rand ist das Resultat des "3px-Gap-Bug" im IE, der die Box #main um drei Pixel verbreitert, und deshalb der graue Hintergrund zum Vorschein kommt.

Der Bug lässt sich auf diese Weise fixen:

#menu {
width:770px;
height:30px;
background-color:#252523;
float:left;
background-image:url(img/menu.png);
background-repeat:repeat-x;
background-position:top;
color:#FFFFFF;
margin-left:25px;
margin-right:25px !important; /* Für moderne Browser */
margin-right:22px; /* Für IE um drei Pixel verringern */
text-align:center;
}