CSS / box model hack

seHaas

hallo.

hab hier im forum von csszengarden.com gelesen und auch gleich mal probiert. leider bin auch bald wieder auf ein problem gekommen:
die css attribute von width/height werden vom ie _kleiner_ dargestellt, da zb die werte vom border bzw. padding abgezogen werden.

googlen hat mich auf diese seite gebracht box model hack , da steht das ganze auch nochmal beschrieben und wie man das umgehen kann.

[edit]nachdem das problem gelöst wurde, hab ich die hierverlinkten testseiten gelöscht[/edit]

leider funktioniert das nur teilweise, folgende variationen sind bei mir aufgetaucht:
1.) simples div mit padding und width => wird in ie6 und ff gleich angezeigt (richtig) => hier
2.) komplexeres layout => ff richtig, ie falsch => hier
3.) das selbe layout mit dem "hack" => ff richtig, ie falsch => hier
4.) ein anderer hack (weiß nicht mehr wo ich das gelesen hab) => ff und ie richtig, aber kein valides css => hier

gibt es irgend eine "schöne" lösung die immer funktioniert?
am meisten wundert mich ja der unterschied zwischen 1. und 2.

epi.um

Hmmm ... also als erstes würde ich das ganze mal ohne tables machen ... für den zweck hier brauchst du sie gar nicht... schau ob dann noch das problem bestehen bleibt
habe meine website außschließlich mit css (also ohne tables für layout positionierungen (außer linksammlung) gemacht und ziehmlich komlpexe kästchen gezaubert und habe unter ff und unter ie6 keine probs

weiters vermeide die Trennung für ein und das selbe zu formatierende Element in mehrere Teile, des verwirrt denke ich

seHaas

die ganzen css files sind vllt schon a wengal verwirrend, hast recht. das kommt vom ganzen herumprobieren.
werds jetzt mal ohne table versuchen, wies dann ausschaut, nur hab ichs bis jetzt noch nicht geschaft das ganze dann nur mit div's zu zentrieren.

lasse mich aber gerne belehren

[edit]
hab jetzt die tables bei den zwei testseiten weggegeben, aber noch immer der selbe fehler. werd jetzt die seite nochmal von vorne neu bauen (immer stückweise) und schaun ob bzw ab wann das auftritt...
[/edit]

mfg seHaas

epi.um

Zugegeben, [edit]vertikal[/edit] zu zentrieren ist etwas schwer:
mueste aber auch gehen mit js... indem du jeweils die Fenstergröße abfragst und dann dynamisch den abstand nach oben änderst (margin-top; oder top); habe ich aber noch nicht ausprobiert; unter selfhtml sind beide einzelnen Probs aber glaube ich beschrieben

lerod

eines was man vermeiden sollte ist vertikales zentrieren.
horizontales zentrieren sollte weniger das problem sein.

lg

seHaas

ok nach langem herumprobieren bin ich auf den ursprung des problems gekommen... es liegt doch am IE, er interpretiert die css einfach unterschiedlich, je nachdem ob ein doctype gesetzt wurde.

also mit

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

macht er es genau richtig, aber lässt man die zeile weg machts er einfach falsch.

das mim zentrieren hab ich auch geschaft, ohne js nur mit styles, nur muss ich halt wissen, wie groß mein element ist, das ich zentrieren will:

HTML

#center {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-250px; // width = 500px
	margin-left:-375px; // height = 750px
}

wusste nicht dass man auch einen negativen abstand angeben kann.

lerod
warum sollte man das verticale zentrieren lassen?

epi.um

cool, den kniff werde ich mir merken....

:hewa: ist ja logisch, man verschiebt einfach den bezugspunkt des Elements von den angaben top/left/... (naja einfach gesagt, man verschiebt eher mehr das element weg von der eigentlich position wo es sein sollte)
(denke, eine veranschaulichung wie's funkt, für leute dies interessiert wäre hier sinnvoll, bisserl verwirrend, wies im css umgesetzt werden muss jpg im anhang)

Paulchen

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

seHaas

seit gestern gibts anscheinend das "neue" selfhtml 8.1 und da steht genau das alles bestens erklärt drinnen: Das Box-Modell

phlow

sehr interessant ... und schlimm, was die Leut von MS da wieder verbrochen haben. Anstatt den Fehler dann auszubessern, machen sie so merkwürdige verrenkungen mit dem doctype, damit die armen homepagebastler, die (wahrscheinlich mit Frontpage) den Schmarrn auch noch so codiert haben, damits im IE geht (und sonst nirgens) nur ja nicht gezwungen werden, sich doch an den Standard zu halten.

Schlimm schlimm

Fup

Für Leute die mit Frontpage arbeiten und nur für IE optimieren habe ich sowieso kein Verständnis. Wozu gibt es die w3c Richtlinien und Spezifikationen, wenn sie sowieso "keiner" einhält.

epi.um

Zitat von Fup

Für Leute die mit Frontpage arbeiten und nur für IE optimieren habe ich sowieso kein Verständnis. Wozu gibt es die w3c Richtlinien und Spezifikationen, wenn sie sowieso "keiner" einhält.

Also dafür das das w3c standarts festlegt, habens eine webauftritt der ist zum auf den Mond schießen, bis man da sich durchgewurschtelt hat, um auf die gewünscht einfo zu kommen, bzw sich das Ganze durchgelesen hat was nur auf der Startpage zu finden ist ... Da halte ich mich lieber an selfhtml (http://de.selfhtml.org/) ... da wird das ganze einfach und übersichtlich beschrieben...

MarvinTheRobot

das einzige was am w3c gut is is: http://validator.w3.org mehr brauch ich von dort nicht. ansonsten -> selfhtml

phlow

ähm ... nicht Äpfel mit Birnen vergleichen w3c definiert Standards, selfhtml ist da wohl ganz was anderes (aber beim coden selber durchaus praktischer als die w3c doks zu lesen, ich denke das meintest du eh auch, oder).

Jetzt mitmachen!