Hallo,
ich versuche unsere Vereinswebseite Stück für Stück vom Tabellendesign auf CSS (und wenn Möglich W3 konform) umzustellen.
Dabei sind mir beim Firefox zwei Dinge aufgefallen, bei denen ich nicht wirklich verstehen kann, dass sie Falsch laufen. Beide Probleme tauchen im IE nicht auf (was ja nichts heissen muss).
Problem 1:
Ich habe ein DIV definiert, das ein Hintergrundbild besitzt. Dieses Bild besitzt wiederum einen kleineren Rahmen, in dem einige Links auftauchen sollen.
Dieses Kontainer habe ich wie folg definiert:
#haupt_menue {
background-image: url(backgrounds/nav-complete.gif);
width: 241px;
height: 314px;
position: absolute;
top: 5px;
left: 5px;
}
Bis hier funktioniert alles wunderbar. Der im Bild sichtbare Rahmen hat einen bestimmten Abstand zum Rand. Daher habe ich mit padding einen inneren Rand definiert. Die Definition sieht dann wie folgt aus:
#haupt_menue {
background-image: url(backgrounds/nav-complete.gif);
width: 241px;
height: 314px;
position: absolute;
top: 5px;
left: 5px;
padding-bottom: 16px;
padding-left: 68px;
padding-right: 14px;
padding-top: 94px;
}
Füge ich dann Text innerhalb des Kontainers ein
<div id="haupt_menue">
Dies wird mal ein Link
</div>
wird dieser korrekt innerhalb des im Bild enthaltenen Rahmens angezeigt. Allerdings vergrössert der Forefox den DIV Kontainer um die als padding angegebenen Werte, so dass das Hintergrundbild gekachelt angezeigt wird.
(siehe http://www.paderborn-vikings.de/intern/css_probs.html)
Ich finde dieses Verhalten völlig unlogisch.
Problem 2:
Auf der gleichen Seite ist auch das zweite Problem zu sehen. Neben dem Menü sollen einige Kontainer auftauchen, die den restlichen Platz des Browserfensters nutzen. Also habe ich die Breite mit 100% definiert. Im IE sind diese Kontainer dann auch so lang. Nur im Firefox bleibt die Breite auf der benötigten breite stehen.
MfG
