Problem mit Layout im Safari

[AndreD]

Hallo zusammen,

Problem:
--------

Das Layout läuft unter allen Browsern die mir zum Testen zur Verfügung stehen soweit zufriedenstellend ausser auf dem Safari unter Mac OSX 10.2.

Die DIVS sollen unabhängig vom Inhalt die Höhe auf 100% stellen, also das ganze Browserfenster unabhängig von der Grösse füllen. Dies funktioniert auf allen Browsern solange es keine Inhalte in den divs "main" und "sub" gibt. Fügt man die divs "left", "content", "navi" und "footer" ein zeigt der Safari nur die benötigte Höhe an, was AFAIK laut W3C auch soweit ok ist.

Frage:
------

Kann man das auch für den Safari irgendwie hinbiegen, oder ist etwas Grundsätzliches im Aufbau falsch?

Aufbau des Layouts:
-------------------

html, body height:100%;

|-------------------------------|
|           |                   |
|           |                   |
|           |                   |
|  left     |   content         |  <-- main height:80%
|  h:100%   |   h:100%          |
|           |                   |
|-------------------------------|

|-------------------------------|
|           navi h:25%          |
|-------------------------------|  <-- sub height:20%

footer h:75%

Infos:
------

1. Ich bin über den Doctype im Quirksmode um auch für den IE6 das Boxmodell richtig darzustellen.

2. Habe auf http://www.quirksmode.org/ mit dem height-Workshop leider auch keine Lösung gefunden...

3. Screenshots, Testseite und Source gibts unter http://www.andredittmar.de/index.html

Vielleicht hat ja jemand noch eine Idee wie man das besser lösen kann? Das Menü und der Footer sollen halt immer unten am Fensterrand "kleben", der Rest des Platzes zeigt den Inhalts-Div an. Innerhalb des Divs soll später dann ein Div mit overflow:auto stehen um den Fliesstext anzuzeigen. Ich weiss dass das nicht die beste Lösung ist, aber Zwecks der CD der Firma muss die Navi leider unten stehen! Besser wäre es wahrscheinlich die Navi mit position:fixed "ranzukleben" aber der IE auf PC rafft das ja leider nicht... sonstige Ideen und/oder Anmerkungen sind gerne Willkommen!

Ich geh mal Mittag machen,
Mahlzeit :-)

Gruss AndreD

[Christoph]

Hallo,

ich habe keinen Mac und deswegen kann ich das auch nicht auf dem Safari testen, aber ich weiß das der Safari ne Menge Probleme mit CSS hat, unter anderem auch mit dem <style> Attribut. Ich würde Dir vorschlagen das du deinen Quellcode erstmal validierst und dann nochmal testest ok?

Also korrektes <style> Attribut und im body die unschönen Dinger da raus. Dann nochmal testen bitte.

Grüße

Christoph

[AndreD]

Hallo Christoph,

Bis auf dieses Problem jetzt hat der Safari eigentlich immer alles so dargestellt wie es sich gehört...

Also korrektes <style> Attribut und im body die unschönen Dinger da raus. Dann nochmal testen bitte.

Ok, hab in der Eile das type-Attribut vergessen, da hast Du recht! Die "unschönen Dinger" hatte ich auch draussen, allerdings rafft der Opera nicht das ich den margin auf 0 setzen möchte, der Opera möchte scheinbar die veralteten Attribute für den body. Ist wohl ein Bug und daher hab ich auch schon überlegt ob ich die "Dinger" tatsächlich nicht wieder rausschmeisse...

Danke & Gruss
AndreD

[Christoph]

Hallo Andre,

naja machs doch so:
html,body
{
 height: 100%;
 margin: 0;
 padding: 0;
}

das versteht sogar der Opera! Glaub mir ;) du musst nur beim Opera die px weglassen...

Der Opera und der Safari haben leider extrem viele CSS Bugs, ist nicht unschön aber real. Aber beide nennen Sich die schnellsten Browser die es gibt aufm Mac und PC... die sollten mal lieber an den Standards arbeiten. Naja egal...

Aber warum das jetzt immer noch nicht geht, weiß ich leider auch nicht... Scheint so als käme der Safari nicht mit % Werten zurecht! Hat der IE 6 auch son Problem. Der konnte nicht 100% bei einem Input Feld darstellen, sondern der brauchte unbedingt feste Größen! Vielleicht solltest du mit Conditional Comments arbeiten, extra für den Safari, aber solange wir die Ursache nicht kennen oder die Lösung nutzt dir das wohl auch nix :(

Grüße

Christoph

[Christoph]

Hab noch was gefunden: http://developer.apple.com/internet/css/css_fixed.html

Grüße

[AndreD]

Hello,

Hab noch was gefunden: http://developer.apple.com/internet/css/css_fixed.html

Danke für den Link. Allerdings kannste ja position:fixed mit IE zusammen knicken oder? Aber ich schau mal den Artikel an, vielleicht gibts noch was anderes?

Danke und Gruss
AndreD

[Christoph]

Hi,

ja da gibts doch noch ne Alternative: http://www.fabrice-pascal.de/artikel/posfixedie6/

Demnach sollte fixed auch mit dem IE gehen :)

Tschaui

[AndreD]

Hallo,

Demnach sollte fixed auch mit dem IE gehen :)

Nur mit IE6, die alten Exploder bleiben auf der Stecke...

Arbeite gerade an einer Alternativlösung, sieht vielversprechend aus, ich hoffe es klappt. Ein conditional comment für Safari würde helfen, mal schaun obs hinhaut. Ich mach dann hier Meldung!

Danke mal für die Unterstützung ;-)
AndreD

BTW: Was sagt mir Deine Signatur? Ist irgendwie witzig, aber ich komm da nicht mit!?

[Christoph]

Hallo,

BTW: Was sagt mir Deine Signatur? Ist irgendwie witzig, aber ich komm da nicht mit!?

Ja das ist nen Zitat, stammt von hier: http://forum.de.selfhtml.org/archiv/2003/2/37425/#m204934 könnte ich aber mal rausnehmen wieder...

das andere ist der sogenannte "selfcode". Erklärt wird er hier: http://emmanuel.dammerer.at/selfcode.html den dazu benötigten Decoder gibt es hier: [link.http://www.peter.in-berlin.de/projekte/selfcode/] da dann einfach meinen Code eingeben: sh:) fo:) rl:° br:& ie:| mo:) va:) fl:) ss:| ls:< js:|

Das wars schon :)

Grüße

Christoph

[AndreD]

Hi,

Ja das ist nen Zitat, stammt von hier: http://forum.de.selfhtml.org/archiv/2003/2/37425/#m204934 könnte ich aber mal rausnehmen wieder...

Kannte ich nicht, das der Typ aber in der Birne weich ist wird in dem Posting schön deutlich :-)

das andere ist der sogenannte "selfcode". (...)

Ok das war bereits bekannt :-)

BTW: Hänge immer noch fest, ich finde im Moment keine Conditional Comments die entweder nur der Safari ausschliesslich kennt oder eben nicht kennt...
Evt. läuft es doch auf Deinen letzten Link mit dem position:fixed-Hack für den IE hinaus... Mal sehn, vielleicht bin ich ja doch noch erfolgreich :-)

Grüsse AndreD

[AndreD]

Hallo Andre,

naja machs doch so:
html,body
{
 height: 100%;
 margin: 0;
 padding: 0;
}

Hallo Christoph,

Habs in der Zwischenzeit noch mal durch die Validators gejagt, puhh alles soweit ok :-P

das versteht sogar der Opera! Glaub mir ;) du musst nur beim Opera die px weglassen...

Hm ok, aber ist es konform das man Werte ohne Maßeinheit angibt. Ich hab es mir halt angewöhnt immer eine Maßeinheit anzugeben. In dem Fall dann ja wohl nicht ;-)

Der Opera und der Safari haben leider extrem viele CSS Bugs, ist nicht unschön aber real. Aber beide nennen Sich die schnellsten Browser die es gibt aufm Mac und PC... die sollten mal lieber an den Standards arbeiten. Naja egal...

Grossartige Geschwindigkeitsunterschiede konnte ich - vom Netscape 4.x bei verschachtelten Tabellenlayouts abgesehen - eh noch nie feststellen, in diesem Sinne also FullACK!

Aber warum das jetzt immer noch nicht geht, weiß ich leider auch nicht... Scheint so als käme der Safari nicht mit % Werten zurecht!

Nee, AFAIK ist das ok denn auf http://www.quirksmode.org//Tasks/100% height/Other situations steht:

The spec says: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'."

This means that if you do not define any height at all for the containing block, a percentual height of any contained block doesn't work: the block becomes once again exactly as high as it needs to be.
<<

Allem Anschein nach hat speziell der Safari ein Problem damit, wobei eigentlich alle Browser auf dem Mac fehlerhafte Darstellung aufweisen. Alle füllen das Fenster nicht ganz mit den Divs auf...

Hat der IE 6 auch son Problem. Der konnte nicht 100% bei einem Input Feld darstellen, sondern der brauchte unbedingt feste Größen! Vielleicht solltest du mit Conditional Comments arbeiten, extra für den Safari, aber solange wir die Ursache nicht kennen oder die Lösung nutzt dir das wohl auch nix :(

Ja, vielleicht finde ich ja noch was raus... an allem ist mal wieder der IE schuld :-) wenn der position:fixed könnte würde ich mir den ganzen Kram sparen können *gg*

Grüsse AndreD