Probleme mit unterschiedlicher Darstellung in Browsern

[Dennis]

Hi liebes Forum,

gerade sitze ich an einem CSS-Layout, kommt jedoch nicht so ganz weiter. Seltsamerweise ist es diesmal der IE, der es so macht, wie ich es will und nicht (wie sonst so oft) Mozilla & Co.

Deshalb gehe ich davon aus, dass ich irgendwo einen Fehler gemacht habe ;-) Aber wie gesagt, ich weiß nicht genau, wo ich das was machen muss.

Hier erst mal der Link: http://test.7nightlive.com

Noch mal im Detal, was da nicht klappt:

• Zwischen "header_img" und "main" (zwei DIV's) ist eine weiße Lücke, ich weiß nicht woher
• im Mozilla wird "inner_container" trotz overflow:visible bei viel Inhalt nicht nach unten ausgedehnt, ein overflow:auto hilft auch nicht weiter

Letztlich würde mich dann noch interessieren: Der Mozilla versteht unter 100% immer die Bildschirmhöhe und nicht die Höhe des Elternelements - zumindest scheint mir das so.
Wie muss ich das machen, dass z.B. ein div immer die volle Höhe eines Elternelements ausnutzt? Sorry, aber ich glaub ich hab grad nen kleinen BlackOut ;-)

MfG, Dennis.

[Ingo Turski]

Hi,

Deshalb gehe ich davon aus, dass ich irgendwo einen Fehler gemacht habe ;-)

korrekt: height: 100%;
Nur der IE hält sich nicht dran und erweitert die Box, wenn der Inhalt nicht reinpaßt.

freundliche Grüße
Ingo

[Dennis]

Hi Ingo,

Deshalb gehe ich davon aus, dass ich irgendwo einen Fehler gemacht habe ;-)
korrekt: height: 100%;
Nur der IE hält sich nicht dran und erweitert die Box, wenn der Inhalt nicht reinpaßt.

Das hab ich mir fast gedacht. Ok, habs jetzt korrigiert.

Aber jetzt bleibt immer noch meine Frage offen, wie ich einem Element sage, es soll 100% des Elternelements einnehmen, soll heißen, ich möchte das "nav_links" bis ganz unten geht.

Wie wäre das zu realisieren bzw. geht das überhaupt?

MfG, Dennis.

[Ingo Turski]

Hi,

Aber jetzt bleibt immer noch meine Frage offen, wie ich einem Element sage, es soll 100% des Elternelements einnehmen, soll heißen, ich möchte das "nav_links" bis ganz unten geht.

Du könntest es mit min-height probieren und mit height nur für den IE.

freundliche Grüße
Ingo

[Dennis]

Hi Ingo,

Aber jetzt bleibt immer noch meine Frage offen, wie ich einem Element sage, es soll 100% des Elternelements einnehmen, soll heißen, ich möchte das "nav_links" bis ganz unten geht.
Du könntest es mit min-height probieren und mit height nur für den IE.

Ok, hab das jetzt mal ausprobiert - für den IE habe ich mit Conditional Comments ein height:100% auf nav_links sowie das Elternelement gesetzt, im IE wirds weiterhin korrekt angezeigt.

Vorher habe ich dann mal verschiedene Werte für min-height gesetzt. Ich habs sowohl mit Prozent als auch mit Pixeln versucht, dann auch mal noch mit zusätzlichem max-height - aber war leider erfolglos.

Also wenn noch jemand eine Idee hat - ich höre gerne ;-) Ansonsten werde ich jetzt einfach dem Container "main" eine Hintergrundgrafik geben, dann hab ich den blauen Balken auch bis ganz unten.

MfG und Danke schon mal, Dennis.

[Ingo Turski]

Hi,

Also wenn noch jemand eine Idee hat - ich höre gerne ;-) Ansonsten werde ich jetzt einfach dem Container "main" eine Hintergrundgrafik geben, dann hab ich den blauen Balken auch bis ganz unten.

Das ist die "klassische" Methode, die bei der von Dir verwendeten festen Breite ja auch eingesetzt werden kann.
Eine andere wären breite border, was aber in einigen Browsern problematisch werden kann und auch eigentlich nur sinnvoll ist, wenn ein bestimmter Bereich stets größer ist.

freundliche Grüße
Ingo

[Dennis]

Hi Ingo,

Also wenn noch jemand eine Idee hat - ich höre gerne ;-) Ansonsten werde ich jetzt einfach dem Container "main" eine Hintergrundgrafik geben, dann hab ich den blauen Balken auch bis ganz unten.

Das ist die "klassische" Methode, die bei der von Dir verwendeten festen Breite ja auch eingesetzt werden kann.

Ich hab das ganze jetzt mal unter http://test.7nightlive.com/test.html. Aber jetzt habe ich noch ein Problem: Bei "main" ist oben und unten dieser weiße Abstand - wenn ich jetzt main border:1px irgendeiner farbe zuweise, ist der jedoch weg!! Ich verstehe das nicht ganz ;-)

MfG, Dennis.

[Ingo Turski]

Hi,

Aber jetzt habe ich noch ein Problem: Bei "main" ist oben und unten dieser weiße Abstand - wenn ich jetzt main border:1px irgendeiner farbe zuweise, ist der jedoch weg!! Ich verstehe das nicht ganz ;-)

Ich auch nicht - jedenfalls daß bei border der bstand weggehen sollte.
Dein <h1>Hallo!!!</h1> sollte ein margin-top in einigen Browsern haben, probier den mal auf 0 zu setzen.
Und dann würde ich position nicht mit float mischen.

freundliche Grüße
Ingo

[Dennis]

Hi Ingo,

Ich auch nicht - jedenfalls daß bei border der bstand weggehen sollte.

Guckst du <http://test.7nightlive.com/test.html@title:ohne Border> und <http://test.7nightlive.com/test2.html@title:mit Border>.

Dein <h1>Hallo!!!</h1> sollte ein margin-top in einigen Browsern haben, probier den mal auf 0 zu setzen.

Hab ich jetzt gemacht, aber es geht immer noch nicht. Ich hab ja auch die Container drüber und drunter auf margin:0px gesetzt.

Jedenfalls tritt das Problem auch in Opera 7.2 sowie in Netscape 7.1 auf.

Zur not muss ich da halt einen negativen Margin definieren und dann für den IE nochmal das per Conditional comments auf 0px setzen.

Und dann würde ich position nicht mit float mischen.

Ok, da das Layout aber fest auf 750px Breite bleiben soll kann ich dann ja ruhig mit position:absolute arbeiten, oder?

Schon mal vielen Dank für deine Mühe.

MfG, Dennis.

[Dennis]

Hi nochmal,

Guckst du <http://test.7nightlive.com/test.html@title:ohne Border> und <http://test.7nightlive.com/test2.html@title:mit Border>.

Uuups, meinte natürlich: ohne Border und mit Border.

MfG, Dennis.

[Ingo Turski]

Hi,

Ok, da das Layout aber fest auf 750px Breite bleiben soll kann ich dann ja ruhig mit position:absolute arbeiten, oder?

theoretisch ja. Obwohl ich dann lediglich das Menü positionieren und für den Inhaltsbereich margin verwenden würde.

freundliche Grüße
Ingo

[Dennis]

Hi Ingo,

Ok, da das Layout aber fest auf 750px Breite bleiben soll kann ich dann ja ruhig mit position:absolute arbeiten, oder?
theoretisch ja. Obwohl ich dann lediglich das Menü positionieren und für den Inhaltsbereich margin verwenden würde.

Hm, hab ich gerade mal probiert, aber wenn ich einfach position:absolute; left:0px; top:0px; nehme, dann wird das auf das ganze Fenster bezogen, lt. SelfHTML bezieht sich position:absolute; jedoch auf das Elternelement - oder wo hab ich das was falsch verstanden?

MfG, Dennis.

[Detlef G.]

Hallo Dennis

Hm, hab ich gerade mal probiert, aber wenn ich einfach position:absolute; left:0px; top:0px; nehme, dann wird das auf das ganze Fenster bezogen, lt. SelfHTML bezieht sich position:absolute; jedoch auf das Elternelement - oder wo hab ich das was falsch verstanden?

Dort fehlt in Selfhtml 8.0 eine Kleinigkeit.

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren
Vorfahrenelements, das nicht die Normaleinstellung position:static hat.
Scrollt mit.

Wenn keines der Vorfahrenelemente eine von static abweichende Positionierung
hat, bezieht sich position:absolute auf den Viewport.

Auf Wiederlesen
Detlef

[Dennis]

Hi Detlef,

Dort fehlt in Selfhtml 8.0 eine Kleinigkeit.
[...]

Ah, Danke. Ist der (inhaltliche) Fehler/Ergänzung den schon gemeldet?

MfG, Dennis.

[Detlef G.]

Hallo Dennis

Ah, Danke. Ist der (inhaltliche) Fehler/Ergänzung den schon gemeldet?

Nicht nur das, er ist auch in der Version 8.1 bereits beseitigt.

Auf Wiederlesen
Detlef