[HTML/CSS] Problem im IE (Box Modell Bug?)

[Duderich]

Ich arbeite im Momet an einer Seite die ich für die Schule machen muss...

IE 5 und 6 spinnen aber natürlich mal wieder rum und ich bekomms nicht hin das ganze zu Lösen!

Zum einen die Navi oben, der letzte Menüpunkt sollte eigentlich auch noch in einer Reihe mit den anderen stehen... Dann ist beim IE mit 1024 Breite unten ein Scrollbalken (hängt denke ich auch mit dem Menü zusammen, wenn ich mir die Block Level Elements im FF angucke ist aber nichts zu breit...)
Und außerdem die Box unten Links.. ist zu weit rechts im IE, hängt denke ich mal mit dem Box Modell Bug zusammen, aber ich schaffs grad nicht das zu lösen..

Wer kann mir helfen? (Ich muss das ganze bis Montag fertig haben.. )

Edit: Link vergessen.. Hier: klick

 

[theHacker]

Der IE rechnet anders.

Normal: ElementBreite = width + border + margin + padding
IE: ElementBreite = width + margin

Du musst also für IEs ein extra Stylesheet definieren und dort die width-Werte um die Summe aus border und padding erhöhen. Bedenke, das du für links und rechts rechnen musst.

Bsp:

div {
  width: 500px;
  border: 10px;
  margin: 5px;
  padding: 20px;
}

hat im Firefox eine Breite von 570 Pixel, im IE nur 510 Pixel.
Um das für den IE zu fixen, brauchst du zusätzlich im IE-Stylesheet

div {
  width: 560px;
}

 

[No5251]

FF ignoriert korrekterweise den <b>Tag, da er verworfen wurde.
Wenn du dem Anker "font-weight: bold" gibst, sieht es im FF genauso aus.

 

[Duderich]

Ah, das ist ein guter Hinweis, dass blöde <b> Tag hat mich sowieso genervt! Mal gucken...

Das Boxen Problem hab ich gelöst.. Hab sie einfach mit Position Relative positioniert..

 

[Schmitzo]

Du musst also für IEs ein extra Stylesheet definieren und dort die width-Werte um die Summe aus border und padding erhöhen. Bedenke, das du für links und rechts rechnen musst.

Du kannst natürlich anstatt zwei Stylesheets auch den Star-Hack benutzen....

Dann musst du eine Klasse, die andere Werte in den IE's benötigt folgendermaßen definieren..

.Klasse A {
 anweisung;
 anweisung;
 anweisung;
}

/* Für IE6 - Werte werden nur da interpretiert, also aus der vorherigen Klasse auch überschrieben*/
*html .Klasse A {
  anweisung;
}

/* Für IE7 - gilt das gleiche wie beim IE6 */
*+ html .Klasse A {
  anweisung;
}

Natürlich geht das auch so, wie theHacker meinte, jeder hat was sowas angeht ja für bekanntlich seinen eigenen Stil

Viele Grüße
Schmitzo