nicht angemeldet
Anzeigedivergenz zwischen Opera, IE und KHTML,Gecko usw.
Hallo alle zusammen,
ich habe ein kleines Problem mit der Anzeige einer CSS formatierten Seite, die zwar unter Netscape/Mozilla/Firefox und KHTML (Konqueror/Safari) auch "richtig" angezeigt wird, aber unter IE6 und Opera 7.51 abweicht. Ich weiß nicht warum und leider kenne ich mich mit den Feinheiten von CSS Elementen auch noch nicht gut genug aus...
Vielleicht kann mal jemand einen Blick in den Quelltext von www.weisserth.org werfen und mir sagen, warum der oberste Layer unter dem IE6 nicht 100% der Bildschirmbreite einnimmt und unter Opera die Grafiken leicht nach rechts verschoben sind... wiegesagt: es sollte so aussehen wie im Netscape/Mozilla/Firefox oder im Konqueror.
Vielen Dank im Voraus!
Tobias W.
-
Hallo Tobias,
Vielleicht kann mal jemand einen Blick in den Quelltext von www.weisserth.org werfen und mir sagen, warum der oberste Layer unter dem IE6 nicht 100% der Bildschirmbreite einnimmt
body {margin: 0;}
löst das Problem. Du solltest mal über den Einsatz von #ID's nachdenken (anstatt alles mit Klassen zu machen). Auch die Methode (fast) alle Elemente 'absolut' zu positionieren finde ich problematisch (verkleinere/vergrößere mal dein Browserfenster).
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|-
Hallo Gunther,
vielen Dank für Deine schnelle Hilfe zu so später Stunde!
Ich werde es gleich mal ausprobieren (wobei ich es nur unter Opera testen kann, IE habe ich nicht zuhause...).
Die Sache mit den Klassen und den IDs muss ich mir wohl noch mal durchlesen. Ich muss ja leider zugeben, dass ich wenig Ahnung von CSS habe und mir im Prinzip das Muster von http://bluerobot.com/web/layouts/layout3.html zu Eigen gemacht habe. Da die Seite ohne Fehler validierte ging ich blauäugig davon aus, dass das dann alles gleich aussieht...
Was die absolute Positionierung angeht... ich bin mir bewusst, dass Auflösungen kleiner als 1024*786 dafür sorgen, dass sich Layer übereinander schieben. Das will ich aber bewusst in Kauf nehmen. Ich denke, dass ich damit nur wenigen Leuten weh tue, hoffe ich jedenfalls...
Gruß,
Tobias-
Moin moin Tobias
Was die absolute Positionierung angeht... ich bin mir bewusst, dass Auflösungen kleiner als 1024*786 dafür sorgen, dass sich Layer übereinander schieben. Das will ich aber bewusst in Kauf nehmen. Ich denke, dass ich damit nur wenigen Leuten weh tue, hoffe ich jedenfalls...
Hast Du nur eine leise Ahnung, wie viele Leute mit Handhelds (640*480) unterwegs sind?
Dass die mit Einschränkungen leben müssen, ist denen selber klar, aber dass die die Hälfte Deiner Seite nicht mehr lesen können oder für die das Menü vollkommen unter anderen Boxen verschwindet (und ein Navigation unmöglich wird) muss dank CSS nicht mehr sein.
Benutze mal em für Größen und Positionen (wo möglich)!
Gruß,
Marc.--
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28-
Moin moin Tobias
Moin ;-)
Hast Du nur eine leise Ahnung, wie viele Leute mit Handhelds (640*480) unterwegs sind?
Nö. Ich kenne niemanden, der so ein Ding zum Surfen benutzt...
Und wenn die Leute auf so einem Display Design erwarten... sehe ich nicht ein. Dann sollen sie Links oder Lynx benutzen, denn damit kann man den Inhalt und die Menüs ganz ohne Probleme erreichen. Das dürfte doch die Hauptsache sein.
Vielleicht baue ich noch eine Browserweiche in den CGI Skripten ein, die unbekannte Browser ausfiltert und einfach nur starren HTML Text ohne Grafiken darstellt. Dann hat sich das Thema auch erledigt. Dafür sollten die Benutzer portabler, kabelloser Geräte dankbar sein, da sich dadurch auch der Download schneller und billiger gestaltet.
Kennst Du dich mit diesen Handhelds denn aus? Ich müsste dann wissen, nach welchem Textstring ich filtern müsste, um die Browser dieser Dinger zu identifizieren und um zu reagieren. Mein Firefox meldet sich beispielsweise so:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040417 Firefox/0.8
Diese Strings bräuchte ich von allen Handheld Browsern, dann könnte ich die Inhalte für diese Geräte schon ausfiltern, bevor der Inhalt überhaupt vom HTTP Server dargestellt wird.
Dass die mit Einschränkungen leben müssen, ist denen selber klar, aber dass die die Hälfte Deiner Seite nicht mehr lesen können oder für die das Menü vollkommen unter anderen Boxen verschwindet (und ein Navigation unmöglich wird) muss dank CSS nicht mehr sein.
Allen kann man es eben nicht Recht machen. Jeder Browser stellt CSS eben ein bisschen anders dar. Wenn CSS wirklich durch jeden Browser identisch dargestellt würde, dann könnte man über die "richtige" Verwendung von CSS philosophieren. Derzeit ist CSS für mich aber nur ein Mittel wie jedes andere auch, dass ich mit allen schmutzigen Hacks dazu benutze, die Dinge so zu gestalten, dass sie meiner Vorstellung entsprechen. Ob ich damit jetzt konform bin oder nicht, ist mir ehrlich gesagt piepe... übrigens validiert meine Seite ohne einen Fehler, naja, jedenfalls ohne die Fehler durch die Zwangseinblendung der Werbung für die ich nichts kann...
Benutze mal em für Größen und Positionen (wo möglich)!
Das sagt mir erstmal so gar nichts. Die Seite ist meine erste Berührung mit CSS. Das muss ich dann erst mal nachlesen.
Danke für die Kritik!
Gruß,
Tobias
-
-
-
Hallo Gunther,
body {margin: 0;}
OK, ich habe ausserdem auch noch den rechten Positionierungsrand für das rechte Element anpassen müssen. Dann stimmt alles.
IE muss ich morgen testen. Unter Opera ist zumindestens jetzt das obere Element richtig, aber 7.51 hat immer noch einen ein oder zwei Pixel Abstand zwischen dem Rahmen und dem unteren Grafikelement... Kleiner Schönheitsfehler...
VIELEN DANK!
Gruß,
Tobias-
Hallo,
Kleiner Schönheitsfehler...
von Schönheit würde ich in diesem Zusammenhang nicht reden.
<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik1.jpg" border="0" alt="">
(Scrennshot bei 1024/768 17-Zoll Opera7)- die aufteilung deiner seite solltest du unbedingt überarbeiten
- alle bereiche sind voneinander abgegrenzt und wahllos
(ohne jeglichen Bezug) angeordnet - die google-anzeigen überschneiden deine überschrift, und sie passen
nicht zum Rest deiner Seite (sind nicht ins """"layout""""
integriert (besser wäre eine vertikale anordnung auf der rechten
seite, oder horizontal am ende der seite) - das langgestreckte bild unter deinem "header" wirkt einfach nur
deplatziert, dabei ist doch so viel ungenutzte, weisse Fläche im
"header" frei. - im Opera 7.5 gibt es noch einen permanenten horizontalen
Scrollbalken - und, und, und ...
Leider fehlt mir die Muse, hier auf noch mehr Dinge einzugehen.
gute nacht
--
signatur-
Hallo,
Kleiner Schönheitsfehler...
von Schönheit würde ich in diesem Zusammenhang nicht reden.
Offene Kritik ist gut. Danke.
<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/optik1.jpg" border="0" alt="">
(Scrennshot bei 1024/768 17-Zoll Opera7)Das kann ich so nicht nachvollziehen. Wenn ich meine X-Server Konfiguration auf 1024*768 umstelle, dann überschneiden sich keine Elemente. Ich habe das mit Opera 7.51 unter einem XFree 4er getestet.
Kann die Darstellung unter Opera vom BS abhängen?
Erst, wenn ich auf 800*600 runtergehe, dann überschneiden sich Elemente.
- die aufteilung deiner seite solltest du unbedingt überarbeiten
Ehrlich gesagt gefällt mir das so ganz gut... jedenfalls wenn man es sich jetzt mit Gecko/KHTML oder auch IE6 anschaut...
- alle bereiche sind voneinander abgegrenzt und wahllos
(ohne jeglichen Bezug) angeordnet
Warum ohne Bezug? Links oben kleines Bild. Rechts daneben Überschrift. Versetzt darunter ein weiteres Grafikelement als Trennelement. Es ist nicht der goldene Schnitt, aber individuell.
- die google-anzeigen überschneiden deine überschrift, und sie passen
nicht zum Rest deiner Seite (sind nicht ins """"layout""""
Dass die Google Anzeigen meine Inhalte überdecken, ist ja nicht meine Schuld. Die werden vom Serviceanbieter eingeblendet und sind übrigens im Gecko gar nicht sichtbar und wenn man Javascript ganz abschaltet, dann verschwinden die Dinger in allen Browsern. Ich habe nirgendwo eine Verwendung für Javascript, also verliert man nichts, wenn man es abstellt.
integriert (besser wäre eine vertikale anordnung auf der rechten
seite, oder horizontal am ende der seite)Liegt nicht in meiner Hand. Ich kann nur die Empfehlung aussprechen einen Browser zu benutzen, der die Dinger gar nicht erst anzeigt oder generell Javascript zu deaktivieren.
- das langgestreckte bild unter deinem "header" wirkt einfach nur
deplatziert, dabei ist doch so viel ungenutzte, weisse Fläche im
"header" frei.
Gerade das macht den Reit aus, finde ich. Ein symmetrisches Layout wollte ich nicht. Davon gibt es schon so viele.
- im Opera 7.5 gibt es noch einen permanenten horizontalen
Scrollbalken
Das liegt an dem Google Ad. Ist mit KHTML genauso. Beim zweiten Laden oder Refreshen einer Seite verschwindet zumindestens unter KHTML der vertikale Scrollbalken. Unter Gecko erscheint der Balken nur, weil das Javascript des Serviceanbieters das Ad zu weit nach rechts integriert.
- und, und, und ...
Und? Ich bin neugierig? Was noch :-)
Leider fehlt mir die Muse, hier auf noch mehr Dinge einzugehen.
Ich bin dankbar für Deine Kritik, wenn ich auch nur einen kleinen Teil davon nachvollziehen kann.
Gruß,
Tobias -
Hallo,
Kleiner Schönheitsfehler...
von Schönheit würde ich in diesem Zusammenhang nicht reden.
Naja, ich habe mir eben mal Deine Seite angesehen und abgesehen von der astreinen Verwendung von CSS Formatierungen ist Deine Seitenaufteilung auch nicht gerade genial. Schon mal gesehen, was passiert, wenn man mit Auflösungen größer als 1024*768 arbeitet? Denn mal Prost auf große leere, ungenutzte Flächen...
Leider fehlt mir die Muse, hier auf noch mehr Dinge einzugehen.
Ich habe eben mal ein paar Screenshots gemacht:
http://kuleuven.weisserth.net/~m0325033/pictures/nag01.png
http://kuleuven.weisserth.net/~m0325033/pictures/firefox1024.png
http://kuleuven.weisserth.net/~m0325033/pictures/opera1024.png
http://kuleuven.weisserth.net/~m0325033/pictures/konqueror1024.pngIch bin mir ziemlich sicher, dass Dein Opera Screenshot unter 800*600 gemacht wurde. Aber vielleicht kannst Du mir ja erklären, warum das bei mir anders aussieht.
Gruß,
Tobias
-
-