"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

height in % wird ignoriert

taz 03.05.2004 - 16:07 1103 16
Posts

taz

Legend

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Registered: Dec 2002
Location: Inside
Posts: 4452
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
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!
Avatar
Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782
ohne doctype gehts jedenfalls auch im IE6. (dann ist er im s.g. "Quirks"-Mode)

atrox

in fairy dust... I trust!
Avatar
Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782
ahh.. so gehts trotz xhtml-transitional doctype auch im IE6:
Code:
body
	{
		height:95%;
	}

taz

Legend

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
screenshot_53207.jpg (downloaded 30x)
Bearbeitet von taz am 03.05.2004, 19:59

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4452
Zitat von taz
Zitat von volker
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

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Registered: Dec 2002
Location: Inside
Posts: 4452
Nod, Fullack.

taz

Legend

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Registered: Dec 2002
Location: Inside
Posts: 4452
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

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Registered: Dec 2002
Location: Inside
Posts: 4452
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

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Registered: Dec 2002
Location: Inside
Posts: 4452
"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

Avatar
Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233
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
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz