height in % wird ignoriert
taz 03.05.2004 - 16:07 1103 16
taz
Legend
|
folgendes problem: ich hab ne site mit einem container DIV, welches height:95% haben soll, u somit fast das gesamte Browserfenster zu verwenden auch wennn auf einer seite nur sehr wenig content ist. diese height angabe funktioniert im ie5 aber ie6 und firefox 0.8 machen das div immer nur genauso groß wie den content. mit min-height und einer angabe in px ist firefox zu überreden eine mindest-größe zu machen, der ie6 ignoriert das. wie kann ich dem ie6 beibringen ein div immer 95% vom body element zu haben egal wieviel content drin ist ? weiters noch ein problem wieder mit einer horizontalen navigation unter http://cleanup.gallien.org ist derzeit eine test-seite von mir mit horizontaler listen navigation (die im ie5 geht!) NUR der dunkelblaue balken am fuße der navigation rutscht im ie5 trotz margin:0; immer 20 px ca. nach unten und erzeugt ein unschönes loch. ie6, firefox 0.8 und safari stellen das richtig dar. unter bestimmten umständen zb wenn man auf technik klickt wird der blaue balken auch im ie richtig dargestellt, da das bild ihn quasi dorthin "presst" -> ist aber auch keine lösung
|
Rektal
Here to stay
|
Das Problem ist (und warum min-height funktioniert, gilt noch zu eruieren): laut der Spezifikation ist eine Prozentangabe bei height/width immer abhaengig, wieviel der Parent-Container (im einfachsten fall sagen wir <body> zur Verfuegung stellt. Der ist default aber nicht auf 100% sondern eben nur so gross, damit der Content rein paszt! Durch den Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
gibt du an, der Browser soll sich so strikt an den Standard halten wie moeglich. Wenn du das rausschmeisst, sind die Chancen gut, dass es im IE6 und Fireforx wieder geht. Aber im Prinzip ist das not the way to do it. Weiterfuehrende Literatur: http://www.quirksmode.org/css/100percheight.html
|
atrox
in fairy dust... I trust!
|
ohne doctype gehts jedenfalls auch im IE6. (dann ist er im s.g. "Quirks"-Mode)
|
atrox
in fairy dust... I trust!
|
ahh.. so gehts trotz xhtml-transitional doctype auch im IE6: body
{
height:95%;
}
|
taz
Legend
|
thx also für die blöden (also mich) zum nochmal durchdenken
wenn ich dem body explizit height zb 98% od 100% gebe dann kann das tochterelement in meinem fall das container-div mit height 95% erstrecken wie gewünscht ohne quirks ?
edit: wegen des menü bugs ein screenshot. die blue leiste (border des div content) soll direkt an das menü unten anschließen. das funktioniert im ie6 und mozilla aber eben nicht immer im ie5
Bearbeitet von taz am 03.05.2004, 19:59
|
Rektal
Here to stay
|
haben wir gemerkt, ich konnt eure musik schon nimma hören *gg*
Jup, exakto. Mac MSIE-Browser haben damit aber leider auch Probleme.
|
taz
Legend
|
habs auf quirksmode.org gelesen
meine wahl ist daher quirksmode und kein safari oder body und html ne height geben und alles ausser ie5:mac
ich denke safari gehört die zukunft so lets do it ohne quirks
|
Rektal
Here to stay
|
Nod, Fullack.
|
taz
Legend
|
so eine frage hab ich noch wenn ich nur dem body eine height gebe gehts im ie6 aber nicht im mozilla, gebe ich dem html element auch eine height wird mein container-div vergrößert bis auf die angegebene height (also hier 95%(div) von 98%(html)) damit wird der div korrekt vergrößert. falls ich jedoch mehr inhalt habe als man auf einmal am bildschirm sieht, dann vergrößert der ie das div ganz eifnach und alles geht sich aus. bei mozilla geht alles aus dem div raus, was zu viel ist. das kann auch nicht sinn der sache sein. wie kann am nd em mozilla nun noch sagen, dass er ebenfalls bei bedarf das div vergrößern soll ?
|
Rektal
Here to stay
|
Mhmm ... ich glaub, IE ist falsch und Mozilla richtig Versuch mal, als Test, fuer Mozilla min-height: <deineprozentangabe>; anstatt height, wenn das funktioniert, dann machts der IE falsch (aber gut fuer dich) und du weisst, wie dus fuern Mozilla beheben kannst.
Bearbeitet von Rektal am 05.05.2004, 10:29
|
taz
Legend
|
das ie falsch und mozilla richtig ist,davon ist wirklich leider meist auszugehen ABER ich hab für den container height:95% und min-height:95% vergeben -> gleicher effekt. (hab auch probiert dem html element ne min-height zu geben -> auch nix am besten zu sehen bei http://cleanup.gallien.org/technik.html und das browser fenster einfach etwas kleiner machen damit der content größer wird als die anzeigefläche
|
Rektal
Here to stay
|
Moment, "height:95% und min-height:95%"? Hab ich nicht geschrieben anstatt ? Das heisst, fuer Mozilla-Test -> height raus, nur min-height rein!
|
taz
Legend
|
argl sorry lesen sollt man können wie immer 100 Punkte für Rektal alles paletti gibts zu dem thema auch wo was zu lesen oder wie kommt man auf diese lösung btw ich hoffe auf ein baldiges Forum-User-Treffen durch deine Tipps schulde ich dir mindestens einen Vollrausch
|
Rektal
Here to stay
|
"wie kommt man auf diese lösung" a) specs auswendig lesen (na scherz, aber ich habs mindestens zweimal gelesen) b) praxis.
Wenn du dem IE einem block element sagst "height: 100px" und der content geht darueber hinaus wird das element groesser -> fehler. Mozilla machts richtig. Fuer den gewuenschten Effekt gibt es min-height, das kann der IE aber nicht.
Man muss also hier dann min-height fuer Gecko-Browser und height nur fuer IE angeben. Wenn du mehrere Styles einbindest, wuerde ich IE Conditional Comments empfehlen. Wenn dir das zu bloed ist, wuerde ich CSS-expressions empfehlen. Die kann nur IE:
#container { height: expression("95%"); min-height: 95%; }
Alle Browser ignorieren die erste Angabe, weils nur IE kann. Fuer alle non-IE Browser reicht die zweite Angabe (sollte man halt auch noch testen wie es am Mac IE ist, aber afaik ist der sehr Buggy in die Richtung)
|
taz
Legend
|
die derzeitge lösung geht sehr gut weil die height angabe für den body ist und min-height für html
ie nimmt body , mozilla nimmt html (laut quirksmode.org) und ich bin glücklich
|