nicht angemeldet
IE zerhackt mein CSS-Box-Layout - warum?
Hallo!
Anlaesslich der Aufgabe, einige Seiten nach einem alten Layout (dort noch mit frames) zu machen, hab ich mich versucht, in CSS zu wuehlen und das ganze mit Boxen zu machen. Es sind im Grunde 3 Boxen: links fuer die Navigation (soll nicht scrollen, fixed) und oben fuer eine Bilderleiste (ebenfalls fixed) und die grosse Content-Box fuer die Inhalte, die soll (unter der Bilderleiste) wegscrollen.
Meine Versuche sehen super aus im Konqueror, mit dem ich das zuhause gebaut habe. Habe mich an Beispiele von Selfhtml und http://glish.com/css/ orientiert.
Mozilla/Win zeigt es auch besser an, scrollt aber die obere Bilderleiste mit weg.
Was ist denn da falsch?:
http://physalia.de/zelt/
-
Hallo Nicola,
»» Anlaesslich der Aufgabe, einige Seiten nach einem alten Layout (dort noch mit frames) zu machen, hab ich mich versucht, in CSS zu wuehlen und das ganze mit Boxen zu machen.
Lobenswert. :-)
Es sind im Grunde 3 Boxen: links fuer die Navigation (soll nicht scrollen, fixed) und oben fuer eine Bilderleiste (ebenfalls fixed) und die grosse Content-Box fuer die Inhalte, die soll (unter der Bilderleiste) wegscrollen.
»» Meine Versuche sehen super aus im Konqueror, mit dem ich das zuhause gebaut habe. Habe mich an Beispiele von Selfhtml und http://glish.com/css/ orientiert.
»»
»» Mozilla/Win zeigt es auch besser an, scrollt aber die obere Bilderleiste mit weg.»» Was ist denn da falsch?:
keine z-index-Angabe...
Probier mal in die entsprechenden <div> folgende Angabe einzubauen:
Bilderleiste:
z-index:2;Hauptteil:
z-index:1;Dann sollte es klappen.
Gruß,
Marc.
PS: Lass mal nen Validator drüberlaufen. Du hast z. B. beim charset einen Tipp-Fehler. Die richtige Angabe lautet iso 8859-1 (nich 8559-1). Außerdem solltest Du 8859-15 verwenden (erweiterter westeuropäischer Zeichensatz - bei den preisen wird es sicher -Zeichen geben...
-
(dort noch mit frames) zu machen, hab ich mich versucht, in CSS zu wuehlen und das ganze mit Boxen zu machen.
Lobenswert. :-)
*hehe - grins* Aber wenn ich gewusst haette, was DAS fuer ein Aufwand ist...
/*Einschub
Aber im Ernst, das ist echt _super_frustrierend, wenn man endlich alles wunderbar im Konqueror zusammengepuzzlet hat und dann hat es einem der IE (hier im Buero: 6.0) um die Ohren. Das bekloppte ist: Selbst wenn ich bei fremden Beispielseiten _eine_ Sache aendere, dann reloade - alles ist verschoben. Dann aendere ich zurueck, das _eine Wort_! und alles bleibt verschoben. Trotz zigfachen Reloads... Der *spinnt* doch!
Einschub */Mozilla/Win zeigt es auch besser an, scrollt aber die obere Bilderleiste mit weg.
keine z-index-Angabe...
Ah, jetzt ja! Jetzt scrollt es der Mozilla korrekt.
ABER: Mein Hauptproblem ist der IE (mind. 6, andre hab ich hier nicht): Er packt die Bilderleiste nach _unten links_. Und fixiert keine der Boxen. Gut mit letzterem lebe ich notfalls, wenn es auf den 6erIE beschraenkt ist. Aber die Bilderleiste unten links sieht natuerlich voellig bekloppt aus.
Was tun?
PS: Lass mal nen Validator drüberlaufen. Du hast z. B. beim charset einen Tipp-Fehler. Die richtige Angabe lautet iso 8859-1 (nich 8559-1). Außerdem solltest Du 8859-15 verwenden (erweiterter westeuropäischer Zeichensatz - bei den preisen wird es sicher -Zeichen geben...
Merci, done.
PS: Ich kann von hier aus keine Dateien aufspielen. Dass die z-indeces jetzt das Scrollverhalten verbessert haben, glaub mir einfach.
PPS: Steht denn bei irgendeinem IE die Bilderleiste korrekt oben drueber? *hoff*
Herzliche Gruesse & Dank!
Nicola
-
Hallo Nicola,
eine recht unbefriedigende Antwort: warte auf Windows Longhorn und den darin enthaltenen neuen IE. Es geht einfach nicht mit dem jetzigen IE (Du hast sicher schon öfter gehört, dass der IE bis zur Version 6 Probleme mit CSS hat).
Einzige Alternative: verwende absolute und relative anstatt fixed - dann scrollen die Bilder zwar mit, is aber immer noch besser, als die unten drunter zu haben...
Manchmal hilft es auch, mit float zu experimentieren - aber die feststehenden Bilder kriegst Du auch damit nicht hin...
Gruß,
Marc.PS: Sorry, dass ich das in der ersten Mail vergessen hatte. War mir klar, dass das Dein Hauptproblem ist, aber ich hatte mich mehr mit dem beschäftigt, was ich lösen konnte, als mit dem, was eh nicht geht...
-
-
-
Hallo,
Anlaesslich der Aufgabe, einige Seiten nach einem alten Layout (dort noch mit frames) zu machen, hab ich mich versucht, in CSS zu wuehlen und das ganze mit Boxen zu machen. Es sind im Grunde 3 Boxen: links fuer die Navigation (soll nicht scrollen, fixed) und oben fuer eine Bilderleiste (ebenfalls fixed) und die grosse Content-Box fuer die Inhalte, die soll (unter der Bilderleiste) wegscrollen.
Der IE kennt sowas wie fixed nicht. Entweder du wechselst auf absolute und lebst mit dem Scrolling oder du nutzt folgenden Hack:
http://www.fabrice-pascal.de/artikel/posfixedie6/
Gruss
Jan-
Der IE kennt sowas wie fixed nicht. Entweder du wechselst auf absolute und lebst mit dem Scrolling oder du nutzt folgenden Hack:
Arrrgh! Danke! Sag mal, steht das bei selfhtml drin und ich
hab das die ganze Zeit ueberlesen? Kann ich mir eigentlich nicht vorstellen...Hmm, das verstehe ich auf die Schnelle grad nicht wirklich, aber das guck ich mir dann zuhause mal in Ruhe an. Es klingt jedenfalls genau nach dem, was ich suche... Und verzichten moechte ich nun eigentlich nicht auf den (Nicht-)Scroll-Effekt, warum soll ich wegen eines ausserordentlich bloeden Browsers die Kluegeren unnoetig unterfordern? ;-)
/* Seitenhieb
Warum eigentlich kann der IE nicht das ignorierte 'fixed' einfach durch ein 'absolute' ersetzen - dann wuerde das zwar wegscrollen, aber es bliebe immerhin an der korrekten Position und man koennte damit leben *seuftz*
Seitenhieb */Herzliche Gruesse
Nicola
-
Hi,
mein Tip wäre, entsprechend dem Hack von Fabrice Pascal die Navigation auch für den IE zu fixieren, aber auf eine Fixierung der Bildleiste zu verzichten. Es gibt zwar auch Tricks, mit denen sowas mehr oder weniger zuverlässig funktioniert, aber Du bekommst zig Probleme dadurch - im Gegensatz zu einm fixierten Element an der Seite.
freundliche Grüße
Ingo-
Hi!
mein Tip wäre, entsprechend dem Hack von Fabrice Pascal die Navigation auch für den IE zu fixieren, aber auf eine Fixierung der Bildleiste zu verzichten. Es gibt zwar auch Tricks, mit denen sowas mehr oder weniger zuverlässig funktioniert, aber Du bekommst zig Probleme dadurch - im Gegensatz zu einm fixierten Element an der Seite.
So hab ich es jetzt gemacht. Das geniale bei dem 'Spezial-Stylesheet' fuer IE ist, dass ich hier dann auch das Problem mit der unterschiedlichen Breiteninterpretation gleich mit loesen konnte. Also ich bin ganz schoen zufrieden:
erstens funktioniert es jetzt http://physalia.de/zelt/,
zweitens hab ich megamaessig dazugelernt in den letzten 1 1/2 Tagen
drittens bin ich wegen 1 + 2 ziemlich gluecklich und auch ein bisschen stolz = super Gefuehl & klasse MotivationKurzum: Vielen heissen Dank fuer Eure wertvollen Tipps, ohne die ich mich vermutlich durch diesen Fallstrickdschungel nicht durchgeschlagen haette!
Herzliche Gruesse
Nicola
-
Hi,
drittens bin ich wegen 1 + 2 ziemlich gluecklich und auch ein bisschen stolz = super Gefuehl & klasse Motivation
na fein. Da frage ich mich aber, ob Du kleine Korrekturen noch hinnehmen kannst.. ich denke schon..;-)
-
Du solltest dein CSS einmal validieren lassen: http://jigsaw.w3.org/css-validator/validator?mode=on&uri=http%3A%2F%2Fphysalia.de%2Fzelt%2Findex.html&warning=1&profile=css2&submit1=URL%2F�File+validieren&submit2=Quelltext%26nbsp%3Bvalidieren - Opera nimmt Dir die kleinen Fehler übel.
-
Du weißt, daß man in Browsern != IE den Schriftgrad vergrößern kann? Sieh' Dir die Seite mal bei 150% im Mozilla an.
-
Den Netscape 4.x solltest Du nicht mit diesem CSS überfordern. lagere die kritischen Definitionen einfach in ein drittes CSS aus und binde es über @import ein.
-
Die Bilder oben würde ich zusammenfassen und als ein Hintergrundbild einbinden. Dies hätte den Vorteil, daß man bei kleineren Fenstern nicht querscrollen muß (besonders da der Scrollbalken im IE dann ja halb abgeschnitten ist).
Ansonsten finde ich aber, daß diese Bilderreihe fixiert gar nicht sinnvoll wäre, da sie sont viel zuviel Anzeigefläche in Beschlag nehmen würde.
freundliche Grüße
Ingo-
Hi!
na fein. Da frage ich mich aber, ob Du kleine Korrekturen noch hinnehmen kannst.. ich denke schon..;-)
- Du solltest dein CSS einmal validieren lassen: http://jigsaw.w3.org/css-validator/validator?mode=on&uri=http%3A%2F%2Fphysalia.de%2Fzelt%2Findex.html&warning=1&profile=css2&submit1=URL%2F�File+validieren&submit2=Quelltext%26nbsp%3Bvalidieren - Opera nimmt Dir die kleinen Fehler übel.
Hab nicht alles verstanden, warum fehlen bei 'font' da Angaben? Kann man da sich nicht auf das Wesentliche beschraenken? Und das center center, was jetzt noch angemahnt wird, hab ich aus einem anderen Stylesheet raus geklaut. Ich hab jetzt bei den Erlaeuterungen nichts gesehen, was das ersetzen koennte. Mit den erlaubten Bedingungen koennte ich die Box gar nicht zentrieren in der anderen Inhalts-Box?
- Du weißt, daß man in Browsern != IE den Schriftgrad vergrößern kann? Sieh' Dir die Seite mal bei 150% im Mozilla an.
Ja. Aber ich moechte zwar halbwegs brauchbares abliefern - aber nix perfektes. Ich mach das grad mal so reingeschoben 'das koennen Sie doch auch' in ner ABM, waehrend aber solche Sachen eigentlich eine Agentur macht. Wenn ich das nun genausogut mache, gibts keine Argumente mehr, dafuer Profis zu beschaeftigen. Das ist eigentlich nicht das, was ich machen moechte (ich mach Projektleitung - drum moechte ich die Techniken kennen, aber nicht alle Kraft reinstecken, selbst drin perfekt zu werden. Dann verliere ich naemlich den Ueberblick ueber die anderen Aspekte meines Berufes) und es kann auch nicht Sinn sein, dass die Profis rausgedraengt werden...
- Den Netscape 4.x solltest Du nicht mit diesem CSS überfordern. lagere die kritischen Definitionen einfach in ein drittes CSS aus und binde es über @import ein.
Na, dazu muesste ich mal wissen, was die kritischen Parts sind? Also fuer eine 'machen Sie das doch schnell mal irgendwie'-Zwischenloesung mache ich es jetzt so fertig, denke ich... Wenn spaeter noch Zeit ist, kann ich das ja nochmal angehen. Danke fuer den Hinweis!
- Die Bilder oben würde ich zusammenfassen und als ein Hintergrundbild einbinden. Dies hätte den Vorteil, daß man bei kleineren Fenstern nicht querscrollen muß (besonders da der Scrollbalken im IE dann ja halb abgeschnitten ist).
Ja, so ist das in dem urspruenglichen Design geregelt (dort dann in einem Frame). Und es kachelt ganz schrecklich, was ich halt vermeiden wollte... Mich stoert der Scrollbalken auch, aber wie kann ich das vermeiden, trotzdem aber die Bilder auf der Breite _einmalig_ haben? Urspruenglich hatte ich es ja in einer Tabellenzelle, da wurden die Einzelbilder notfalls umgebrochen, was ich zwar unschoen, aber dennoch korrekt fand. Das waer noch meine liebste Loesung - wenn schon. Die Kachelei sieht einfach dumm aus. Kann ich (hab ich nicht geschafft bisher) die Bilder so anordnen, dass die Zwischenraeume skalieren? Also so etwas wie 'justify'? Dann naehme ich eines raus und fange damit eine groessere Breitenvarianz ab. Wie gesagt, hab es nicht hinbekommen...
Ansonsten finde ich aber, daß diese Bilderreihe fixiert gar nicht sinnvoll wäre, da sie sont viel zuviel Anzeigefläche in Beschlag nehmen würde.
Sorry, Vorgabe. DAS diskutier' ich nicht. Ich hab noch eine _richtige_ Website zu machen (also PL dafuer) - DA stecke ich lieber meine Energie in die Diskussionen...
Herzliche Gruesse und Danke!
Nicola
-
Hi,
was bei font fehlt, ist (an einer Stelle ist's mir aufgefallen) die Schriftfarbe. Immer wenn Du den Hintergrund definierst, gehört auch die Schriftfarbe dazu. Wenn's fehlt, fällt es zwar nur dem auf, der nicht zufällig schwarz bei seinem Browser voreingestellt hat, aber willst Du Dich darauf verlassen?Ich weiß zwar nicht, wo Du 'position:center center' her hast, aber sowas ist Blödsinn oder vielleicht auch Wunschdenken..;-)
Das Zentrieren von Boxen ist wegen dem IE nicht ganz so einfach. Kurz erklärt: http://www.1ngo.de/zentrierung.htmlWas den Netscape 4.x betrifft: Ist zugegeben recht kompliziert, da er zwar einiges an CSS versteht, aber viele Kombinationen problematisch werden. Im Zweifel setz' in die format.css nur die Schrift- und Farbdefinitionen und lagere den Rest aus. So bekommt er - vernünftiges HTML-Markup vorausgesetzt - zumindest eine _nutzbare_ Textversion.
Die Bilder kannst Du ganz einfach als Hintergrundbild einbinden:
#icons { height:80px; background: #a5b5d1 url(bild.jpg) no-repeat top left; }Mit der Bildreihe hast Du mich übrigens wohl mißverstanden. Sie ist ja nicht fixiert, d.h. scrollt aus dem Fenster und macht somit dem Inhalt Platz, was ich sinnvoll finde.
freundliche Grüße
Ingo-
Sorry,
Das Zentrieren von Boxen ist wegen dem IE nicht ganz so einfach. Kurz erklärt: http://www.1ngo.de/zentrierung.html
sollte http://www.1ngo.de/web/zentrierung.html draus werden (kommt davon, wenn man die Adressen von Hand tippt).
freundliche Grüße
Ingo
-
-
-
-
-
-
-
Die Lösung ist relativ einfach:
1. ändere alle position:fixed; ---> position:absolute;
2. füge html, body {overflow:hidden;} ein
3. füge zum centercontent overflow:auto; hinzu.Wenn es geht arbeite mit relativen Angaben für top, left, usw.
Möglicherweise macht dann das bescheuerte Box-Model des MSIE noch Problem (Scollbalken liegen nicht am Rand), dann müssen die entsprechenden Werte für margin und padding von body und/oder html noch auf Null gesetzt werden.
MfG
Klaus