Padding in Firefox und IE

Hi,
in einem Menu mit CSS und <UL> benötige ich eine feste Breite und Höhe in beiden Browsern.

Wenn ich die Padding-Angaben für die Abstände von Links und Rechts auf Null setze, dann sind die Breiten in beiden Browsern identisch. Sobald ich Padding von links oder rechts oder Sachen wie text-indent angebe, benötigt der FF mehr Platz und verbreitert das Menu - trotzdem die width angegeben wurde.
Wie kann ich den FF oder den IE überzeugen, dass gelich zu interpretieren?

Viele Grüße
Andrea

Mahlzeit,

also... mal davon abgesehen, dass eine Frage zum CSS nichts in einem Typo3-Forum zu suchen hat, kommt hier eine Erklärung:

Der Firefox interpretiert das Box-Model so: Breite (width) + Rahmen (border) + Rand (margin).
Der Internet-Explodierer interpretiert das Box-Model so: Breite (width) + Rand (margin).

Das heisst der IE rechnet die Breite inklusive Padding und Border. Der Firefox rechnet die Breite nur inklusive Padding (so isses auch korrekt).

Will heissen: die Breite (width) im IE muss um die Dicke des Rahmens (border) grösser sein als im Firefox.

Wie löst man das? Es gibt verschiedene Kommentare für das CSS. Die "//" Kommentarzeichen interpretiert der IE nicht. Das heisst, wenn man eine Zeile im CSS mit "//" auskommentiert, dann sieht der Firefox dieses auch als Kommentar an. Der IE jedoch interprtiert die Zeile trotzdem.

Beispiel HTML:

<div id="test-box">
trallala
</div>

Beispiel CSS:

#test-box {
/* 4 Pixel Rahmen (links 2 Pixel, rechts 2 Pixel) */
  border: 2px solid #000;
/* Breite für Firefox 200 Pixel; IE sieht das auch */
  width: 200px;
/* Neue Breite für IE */
// width: 204px;
}

Das Problem mit der Höhe ist leider noch schlimmer, weil sich der IE nicht an die festgelegt Höhe hält. Wenn mehr Inhalt drin ist, dann wird die Box einfach ausgeweitet.

MfG, Lars Thalheim

Hallo Lars,
vielen Dank, dass mit dem Kommentar ist sehr klasse. Habe ich nicht gewusst.

Wieso findest du, dass diese Frage hier nichts verloren hat?
Wir arbeiten doch damit und ich finde es gehört dazu. Vielleicht sollte es ein entsprechendes Board geben für die Browser - Problematik.

Danke für deine Hilfe.

Viele Grüße
Andrea

Andrea_Herzog schrieb

Wieso findest du, dass diese Frage hier nichts verloren hat?

War etwas überspitzt formuliert. Lars hat Recht wenn er sagt, dass dies kein TYPO3-Problem ist, sondern ein reines CSS-Problem.

Andrea_Herzog schrieb

Vielleicht sollte es ein entsprechendes Board geben für die Browser - Problematik.

Diverse Fragen 😉
Es gibt bessere Foren zu diesem Problem bzw wird das meiste per google lösbar sein, aber wir sind ja sonst e auch noch da

georg

Hallo Georg,
ich gebe mich geschlagen. Aber nett, dass dass du trotzdem da bist... 😉

Viele Grüße
Andrea

also wenn ihr Zeit habt zu dem Posting einen Kommentar abzugeben solltet ihr auch Zeit für eine Lösung parat haben.

Übrigens, Laptop, die ganzen CSS-Browser-Hacks sind nicht notwending wenn man HTML-Spezifikationen einhält und von Anfang an den richtigen Doctype setzt.
Egal ob HTML4.1 oder XHTML - sobald die Browser im Standard Mode arbeiten interpretieren IE und Firefox (und all die anderen) 99% der CSS-Eigenschaften richtig (und vorallem gleich), auch das Boxmodel.
Dann spart man sich alle Hacks und hat eine schöne, HTML-konforme Webseite die auf allen Browsern gleich angezeigt wird.

siehe:
http://www.stichpunkt.de/css/css-tipps.html#doctype
http://www.blooberry.com/indexdot/html/tagpages/d/doctype.htm
http://www.css4you.de/ (allgemein CSS)