Pixelgenaues CSS-Layout im IE

[halla]

hallo alle zusammen,

ich versuche per CSS ein pixelgenaues Layout zu erstellen.
Über Sinn und Unsinn von einem pixelgenauen Layout kann man sich streiten, Tatsache ist aber, daß ich es mit dem MSIE6 nicht hinbekomme...

Seht euch bitte mal http://halla.homelinux.net an.

Die grüne Box ist 770px breit.

Die rote Box hat eine Breite von 170px, mit einer linken Margin zur grünen Box von 25px.

Die blaue Box ist 545px Breit, mit einer linken Margin von der grünen Box aus von 200px.

Zwischen der roten und der blauen Box sollen 5px Abstand sein,
der rechte Abstand von der blauen Box zum rechten grünen Rand wieder 25px.

Also quasi von links aus gerechnet:
25px Abstand, dann rote Box 170px Breit, 5px Abstand, dann blaue Box 545px Breit, 25px Abstand zum rechten Rand.
25px+170px+5px+545px+25px=770px (das ist dann genau die Breite der grünen Box)

Im Moz/FF sieht das alles auch super aus...
Aber eben nicht im IE - der knallt zwischen der roten und der blauen Box einfach 7px Abstand rein ?!?
Weiß jemand, wiso? Ich verstehs nicht...

Vielen Dank für eure Hilfe im voraus,
Grüße,
Daniel

P.S.: HG-Bilder, Paddings, Border und alles andere hab ich der Einfachheit halber gleich mal rausgelassen... trotzdem klappt es nicht :-(((

[Terry]

Das ist der altbekannte 3-Pixel-Bug - d.h. der IE macht immer eine 3px-Lücke beim Floaten.

2 Möglichkeiten:
1. Du floatest auch den #content - wenn mehrere floats aneinanderstoßen, passiert das nicht.

2. schau dir mal dieses Beispiel an: http://scholz-webdesign.de/css/demo/3-pixel-sprung/

Mehr Erklärungen dazu findest du in diesem Thread, die Demo ist doch extrem minimalistisch: http://www.xhtmlforum.de/viewtopic.php?t=1770

[halla]

hi terry,

sorry, war übers WE und kam davor nicht zum antworten.

ich würde sagen du lagst genau richtig mit diesem 3px-Bug.
Lt. positioniseverything.net sollte aber schon ein 1% als Höhe helfen.
Tut es bei mir aber nicht. Alles probiert.

Hab mal weiter gegoogelt und bin dabei auf das hier gestoßen:
http://www.perun.net/archiv/2004/07/09/3-pixel-abstand/

sehr guter artikel. bei ihm hats aber auch nicht geklappt mit dem 1% Höhe ;-)

Des Rätsels Lösung: ein "* html" Selektor der nur vom IE gelesen wird,
und ein entsprechend verringerter linker Abstand.

#content	{
  	background:url(/media/images/bg/bg-content.jpg) left top repeat-x #F3EFE4;
	border:1px solid #d3be99;
	margin: 0 0 0 200px;
	width:533px;
   padding:5px;
}

/* MSIE 3-Pixel-Abstands Bug, nur MSIE liest diesen Teil \ */
* html #content	{
    margin: 0 0 0 197px;
}

jetzt mal im ernst: das ist doch mist.
ich bin nicht mal mit ein bißchen layout durch, und schon auf den 2ten fetten Bug gestoßen, und das bei einem aktuellen (!!!!!) (naja, fast aktuell... ;-)) browser.
so vergeht einem echt die lust an CSS.

und das beste: als nächstes darf ich mich dann gleich um das falsche box-modell des IE kümmern und die nächsten hacks einbauen. super.

tortzdem danke, terry - ohne dich wäre ich da gar nicht drauf gekommen !

grüße,
daniel

[Terry]

Zitat von halla

ich würde sagen du lagst genau richtig mit diesem 3px-Bug.
Lt. positioniseverything.net sollte aber schon ein 1% als Höhe helfen.
Tut es bei mir aber nicht. Alles probiert.

Lies halt mal den verlinkten Thread im XHTML-forum - da wird der Bug in allen Facetten beleuchtet. Die Höhenangabe hilft nur solange, wie die 3px an sich nicht auffallen und man nur die Textverschiebung korrigieren will. Ansonsten muß man eben für den IE die px ziehen und schieben, so wie er sie haben will. Geht leider nicht anders.

jetzt mal im ernst: das ist doch mist.
ich bin nicht mal mit ein bißchen layout durch, und schon auf den 2ten fetten Bug gestoßen, und das bei einem aktuellen (!!!!!) (naja, fast aktuell... ;-)) browser.
so vergeht einem echt die lust an CSS.

Ohne den IE wär vieles einfacher - völlig ACK! Das liegt aber nicht daran, dass CSS schlecht wär, sondern an einer gewissen Firma, die sich nicht an Standards hält...
Aber ohne das Tricksen wär Webdesign doch langweilig, oder!

[halla]

Zitat von Terry

Ohne den IE wär vieles einfacher - völlig ACK! Das liegt aber nicht daran, dass CSS schlecht wär, sondern an einer gewissen Firma, die sich nicht an Standards hält...

ja, da hast du natürlich recht. nicht css ist böse, sondern die vögel aus der MSIE-Entwicklung :-)

Zitat von Terry

Aber ohne das Tricksen wär Webdesign doch langweilig, oder!

hmm... naja. wenn man weiß wie - dann vielleicht ja. wenn nein, dann ist es eher nervig ;-) und wenn man vor lauter tricksen kaum vorankommt, stellt sich tendenziell schon eher frust ein und man fragt sich ob man wenigstens bis zum IE7 nicht doch mit tabellenbasierten layouts besser aufgehoben ist *duck*

grüße,
daniel