CSS Cross-Browser/RES Compatibility - Wie gehts am besten?

G

gamp

Mitglied
Hey!

Bin nun seit paar Tagen dabei mit CSS und HTML sowie PHP und JS (jQuery) rumzuspielen. Alles fein soweit, meine Test-Layouts zeigt es auch im FF so an wie ichs will - nur sobald ich es im MSIE (Version 8) öffne liegen teilweise die <div>'s übereinander bzw. vieles wird nicht wie gewünscht dargestellt.

Wer keine Lust auf lange Einführung hat, einfach zum Ende des 'Codes' springen! ;-)
Code: 
Also was tun? Google fragen!
Hatt ja bisher noch nicht soviel mit WebDev am Hut, also auch noch nicht zuviel über Stichwörter wie 'Browserwars' und 'W3C CSS Specification' sowie 'IE Bugs(?)' gehört!

Hat mich glatt umgehaun, konnte mich gerade ~3 Stunden lang auf diversen Websites schlau über das Thema machen.

Und was jetzt? Ja, WARUM meine Website jetzt im MSIE anders aussieht wie in den meisten anderen Browsern 
(da ich auch FF zum Entwickeln benutze und der sich - wie die meisten anderen Browser - strikt an die W3C Vorgaben hält, sind unterschiede zwischen FF und zB. Opera (bzw. andere Browser die sich strikt an die W3C Vorgaben halten) nur minimal, wenn überhaupt vorkommend -> Nur der MSIE tanzt so richtig aus der Reihe!)
weiss ich jetzt auch, nur wie man die ganze Geschichte RICHTIG löst hab ich noch nicht rausgefunden.

Es gibt zwar sehr informative Artikel zu diesen Thema und auch extrem viele, jedoch hab ich nicht wirklich einen gefunden der erklärt WIE EXAKT ich meine Website für sowohl MSIE als auch FF kompatibel mache - und das mit einer bestmöglichen Lösung.

Bestimmt wurde dieses Thema schon einige male durchgekaut aber ich konnte beim besten Willen nichts besseres als eine Hand voll Artikel finden, die sich mit Lösungen beschäftigen (leider tw. Outdated), hier mal ein Beispiel:
DEVARTICLES - CSS Hacks Explained

Also, lange Rede kurzer Sinn - ich möchte meine Website möglichst Kompatibel für MSIE und FF machen, auch soll hier die 'Screen Resolution' also die Bildschirmauflösung keine Zicken machen. Ich habe bemerkt wenn ich auf meinem 1920x1080 Monitor mir die Website zurechtbastel, dann sieht sie, wenn ich zB. viele fixed-width/height Logos/Bilder benutzte am Ende auf einem 1024x768 Bildschirm... naja ihr könnt euch denken wie, aus, weil dann auf einmal das Logo 33% der Höhe ausmacht, wo's auf meinem Screen gerade noch ein großes aber sexy und passendes Logo war.

Hat denn jemand eine Zusammenfassung für Grundlagen oder andere Tipps mit denen ich meine Website möglichst für alle gängigen Browser (auf jedenfall aber FF und MSIE) kompatibel mache, bei egal welcher Auflösung?

Welche CSS Befehle sollte man vermeiden? Welche bevorzugen? Oder kommt man einfach nicht drum rum einen 'Dirty Hack' zu nehmen um eine Kompatibilität zu erzwingen? Was ist besser, Angaben in 'em', 'px', '%' oder gemischt?


Danke schonmal!

ps: Ich hoffe ich bringe hiermit keine Lawiene ins Rollen, da ich auf anderen Websiten schon 'kilometerlange' Threads zu dem Thema gesehen habe, wobei die meisten Posts sich gegen IE ausgekotzt haben anstatt gescheit zu erklären wie man jetzt möglichst einfach möglichst hohe Kompatibilität erzwingt.
 
Hi,

nein, ich sprech nicht negativ über den IE, weil man mit jedem Browser so seine Probleme hat.
Dein Problem z.B. mit dem Logo dürfte logisch sein oder? Was passiert wenn du die Bildschirmauflösung eines 17 Zöllers auf 1280x1024 hochsetzt? Du kannst danach auch kaum mehr etwas auf dem Desktop erkennen und die Ordner erscheinen dir winzig.
Ich würde immer nach dem aktuellen Standardmonitor schauen (ist derzeit ein 17 Zöller mit 1024x768) und demnach die Seite aufbauen (abzüglicher Browsermenüs und Infozeile ca. 960x720). Dann sieht es bei 1280x1024 immer noch gut aus. Denk dran, nicht jeder hat schon deinen tollen Monitor. Ansonsten würde ich deine horizontal zentriert designen mit einem spannenden Hintergrund, so dass auch die übergroßen Auflösungs-Nutzer auf Ihre Kosten kommen.
Suchwort: Zentriertes CSS-Layout.

Beispiele:
http://www.radio-sunshine.info/
http://www.sunshine-fm.info/index.php
oder ganz einfach hier :)
http://www.tutorials.de

Zu deinem Problem.

evlt. hast du die DIV-Container nicht gecleart?
http://www.webtoolkit.info/css-clearfix.html
 
Zuletzt bearbeitet:
Ja, so eine zentrierte Seite hab ich bereits schon einmal gemacht, Test-Weise hat ganz gut geklappt. Mhh ich dachte es gäbe mittlerweile schon modernere Methoden, mit denen man die Website ähnlich wie eine Flash-Website je nach Auflösung des Nutzers skalieren kann.

Ich suche eigentlich eher Tipps und Tricks, so eine Art "Bester Weg" um eine Website möglichst Cross-Browser-Kompatibel zu gestalten.

Das mit "clear: both;" hats tatsächlich getan - den CSS Befehl kannte ich bis dato noch garnicht!


Danke für den Tip :)
 
Hi gamp,

schön, dass ich helfen konnte.

Wg. dem clear. Eigentlich funktioniert das so, dass du eine CSS-Klasse schreibst bzw die im Link angegebene verwendest und die Klasse überall dort setzt, wo du leere Div-Container (also ohne Inhalt wie Text, Überschriften, Listen etc.) verwendet hast.
Also so ein leerer Container ist z.B. der äußere Rahmen, der eine Website zusammenhält. er enthält sonst keinen Text etc. aber er beihnhaltet die darauffolgenden Divs mit Menü, Inhalt etc.

Also als Beispiel:

PHP: 
<div "ganzeSeite" class="clearfix">

  <div "inhalt"> Hallo Welt</div>
  
</div><!---end ganzeSeite->


Wg. Tipps zu Cross-Browser:
Da kommst du nicht drum herum für alle Browser deren Wehwechen zu berücksichtigen und Weichen bzw. Hacks einzusetzen. Problem könnte jedoch sein, dass diese Hacks in neueren Browser-Versionen Probleme bereiten.

Nein, so eine skalierbare Website gibt es noch nicht. Das SVG-Format macht noch bei einigen Browsern Probleme.

Deshalb, nimm die Schnittmenge deiner Besucherzielgruppe und designe somit für die breite Masse.
Immerhin kannst du ja mit den 1px breiten Grafiken schöne Verläufe hinbekommen, aber wenn es um ein Logo im Gif-Format geht, no Chance. Evtl. kannst du es ja mit Hilfe von Flash kombinieren. Kannst ja das Log als swf. einfügen, dann skalliert es mit. Wer kein Flash-Plugin installiert hat, bekommt das verzerrte JPG oder GIF angezeigt. Aber du kennst ja sicher deine Zielgruppe ;)

gamp hat gesagt.:
Ja, so eine zentrierte Seite hab ich bereits schon einmal gemacht, Test-Weise hat ganz gut geklappt. Mhh ich dachte es gäbe mittlerweile schon modernere Methoden, mit denen man die Website ähnlich wie eine Flash-Website je nach Auflösung des Nutzers skalieren kann.

Ich suche eigentlich eher Tipps und Tricks, so eine Art "Bester Weg" um eine Website möglichst Cross-Browser-Kompatibel zu gestalten.

Das mit "clear: both;" hats tatsächlich getan - den CSS Befehl kannte ich bis dato noch garnicht!


Danke für den Tip :)
Zum Vergrößern anklicken....
 
Hum, da gibts schon so lange Internet und Websites und es wird einem so schwer gemacht?

Naja, dann halt mit Hacks, zumindest versuche ich meine Website für FF und IE zu optimieren. Wobei genau die 2 Browser wohl viele unterschiede in der Darstellung aufweisen.

Der Trick mit dem Flash-Logo könnt klappen, die meisten haben heutzutage eh Flashplugins installiert!

Danke nochmal, hat mir denk ich den Stubbs in die richtige Richtung gegeben :)

Grüße
 
Ja, das I-Net gibt es schon so lange, das ist richtig, und es geht auch i.d.R. nur um diese Altlasten. Wenn der IE 6,0 nur noch 0,01% verbreitet wäre, würde jeder drüber hinweg sehen, doch leider haben noch sehr viele diesen Browser und der macht eben die großen Probleme.
Aber zur Beruhigung. Wenn die Seite auf dem IE 6 u. 8 und FF perfekt läuft, hast du i.d.R. auch den Opera und Netscape mit abgedeckt und schätzungsweise 98% der PC User.

MS bereinigt die Fehler des IEs 6.0 nicht mehr, deshalb liegt der Schwarze Peter bei dir.

gamp hat gesagt.:
Hum, da gibts schon so lange Internet und Websites und es wird einem so schwer gemacht?

Naja, dann halt mit Hacks, zumindest versuche ich meine Website für FF und IE zu optimieren. Wobei genau die 2 Browser wohl viele unterschiede in der Darstellung aufweisen.

Der Trick mit dem Flash-Logo könnt klappen, die meisten haben heutzutage eh Flashplugins installiert!

Danke nochmal, hat mir denk ich den Stubbs in die richtige Richtung gegeben :)

Grüße
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück