Über Falki bin ich wieder auf den Dienst Browsershots gestossen. Jeder, der schon mal eine Homepage erstellt hat kennt das Problem wohl. Man hat das Design fertig gestellt und schaut es dann in einem anderen Browser an. Und es sieht völlig anders aus.
Bei privaten Homepages ist das ja nicht so gravierend, aber Firmen Homepages sollten doch in jedem Browser gleich aussehen. Und valides (X)HTML und CSS garantiert ja auch nicht, dass die Homepage überall gleich aussieht (IE).
Nun kann man ja nicht jeden Browser auf dem Computer installiert haben und zudem gibt es ja auch noch Darstellungs-Unterschiede im Firefox unter Windows und Linux. Nicht zuletzt auch wegen den verschiedenen Schriftarten.

Browsershots ermöglicht es einem zu sehen, wie eine Homepage in verschiedenen Browsern aussieht. Einfach die URL eingeben und die gewünschten Browser auswählen. Alle momentan populären Browser stehe zur Verfügung. IE, Firefox, Opera, Safari und das auch unter Windows, Linux und Mac OS.


Ich habe meine Seite natürlich auch getestet und bin wirklich zufrieden mit dem Ergebnis. Sogar im IE 6, der ja nicht gerade für seine CSS Kompatibilität bekannt ist, sieht die Seite sehr gut aus. Nicht zuletzt dank dem IE 6 CSS hack.


Der einzige Browser, in dem es überhaupt nicht gut aussieht ist der IE 5. Allerdings mache ich da keine grossen Aufwände mehr, damit die Seite auch dort gut aussieht. Sehr viele Benutzer sind mit dem IE 5 ja nicht mehr unterwegs.
Man achte auf die Navigation

Vor zwei Wochen habe ich mich ja bereits darüber beklagt, dass man im Internet Explorer 6 Div Container nicht vernünftig mit CSS ausrichten kann. margin-left:auto;margin-right:auto;, die eigentlich korrekte Lösung wird einfach Ignoriert.
Dank einem Kommentar von Evert aus Holland (den ich dummerweise im Zuge einer Spamsäuberungsaktion gelöscht habe, sorry) kenne ich nun eine gute Lösung. Sie ist eigentlich sehr simpel. Man erstellt einen DIV Container um alles herum und zentriert den Inhalt. Da das aber nur im IE 6 so ist, darf das CSS-File dazu auch nur im IE 6 geladen werden. Glücklicherweise gibt es da Kommentare, die als Browserweichen funktionieren.

Nun aber von vorne. Ich erstelle einen neuen DIV-Container (fett) um mein bestehendes Design herum.

<div id="container">
<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>
</div>

Nun muss das CSS-File im IE 6 geladen werden. Wie gesagt, fungieren hier die Kommentare als Browserweiche.

<!--[if IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Und zum Schluss noch der Inhalt der CSS-Datei. Für den Container #main muss man die Ausrichtung wieder zurücksetzten, da sonst der ganze Text zentriert ist.

#container {
    text-align: center;
    }

#main {
    text-align:left;
    }

Thank you Evert for this comment and sorry for deleting it. It was a mistake.

Wie schonmal erwähnt arbeite ich momentan an einem neues Design für die Homepage. Das Grunddesign steht momentan und ich bin auch wirklich damit zufrieden. Und auf etwas bin ich besonders stolz. Die Seite sieht im Firefox und Opera unter Linux und Windows genau gleich aus. Eigentlich keine grosse Kunst, aber das besonders schöne: Auch im Internet Explorer 7 wird die Seite korrekt angezeigt. Der Grund warum ich IE 7 und nicht einfach IE schreibe, ist eigentlich der Grund warum ich diesen Beitrag schreibe. Im IE 6 sieht es nicht mehr so rosig aus. Die Seite sollte eigentlich zentriert sein, aber im IE 6 klebt sie schön am linken Rand. IE 6 und CSS verträgt sich leider nicht so gut.

Die neue Seite ist ähnlich aufgebaut, wie die jetzige. Oben ein Header, danach das Menu und dann auf der linken Seite eine Navigation und rechts daneben der Inhalt. Aufs gröbste gekürzt sieht der Code so aus:

<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>

Nur mit HTML kommt man da natürlich nicht so weit, also braucht man auch noch etwas CSS Code:

#main {
    width:                   745px;
    margin-top:              5px;
    margin-bottom:           0px;
    margin-left:             auto;
    margin-right:            auto;
    }

#navLeft {
    margin-left:             0px;
    width:                   160px;
    float:                   left;
    }

#content {
    margin-left:             165px;
    width:                   580px;
    }

Grundsätzlich ist es derselbe Code wie bei dieser Seite, nur hat der Container #main eine feste Breite und ist zentriert, oder sollte es zumindest sein. Wie gesagt funktioniert dieser Code im Firefox, Opera und IE7 wunderbar, nur im IE 6 ist die Seite nicht zentriert. Der Container wird ja mit den Elementen margin-left:auto; und margin-right:auto; zentriert. Nur scheint das im IE 6 nicht zu funktionieren.
Kennt da jemand eine andere, funktionierende Lösung? Idealerweise XHML und CSS valide?

Microsoft denkt schon über den IE 8 nach. Natürlich soll die Sicherheit besser werden, das sagen sie ja jedes mal. Zudem soll die Standardkompatiblität verbessert werden. Und genau da hat Microsoft in meiner Meinung immer noch eine Menge zu tun.
Allerdings sollte man sich da keine grossen Hoffnungen machen. Chris Willson, Projektleiter von Microsoft, sagte zur Kompatiblität folgendes:Quelle: Heise Online

Dass ich da anderer Meinung bin, muss ich wohl nicht erwähnen. Microsoft könne nun endlich mal aus vergangenen Fehlern lernen und einen Standardkompatiblen Browser auf den Mark werfen. Aber nein, der Browser muss kompatibel zu Seiten sein, die sich nur an den Quasistandard des Internet-Explorers halten.

Bei einigen neun installierten PCs im Geschäft hatte ich das Problem, dass der IE7 die "Runonce" Seite nicht richtig anzeigte. Die "Runonce" Seite wird beim ersten Start des Internet Explorers angezeigt und erlaubt einem gewisse Einstellungen vorzunehmen. In meiner Meinung nicht speziell sinnvoll, da man die Einstellungen ja wie bei jedem Programm auch über die "Einstellungen" vornehmen kann.
Einige PCs bei uns hatten aber das Problem, dass die "Runonce" Seite nicht korrekt dargestellt wurde. Das heisst, es wurde nur der blaue Hintergrund angezeigt und sonst nichts.

Man konnte in der Adressleiste ohne Probleme eine andere Adresse eingeben und so surfen, allerdings wurd beim Aufstarten des IEs nicht die in den Einstellungen angegebene Startseite, sondern oben die "Runonce" Seite angezeigt. Da aber kein Speichern Button angezeigt wurde, konnte ich die Einstellungen auf der "Runonce" Seite nicht speichern und brachte sie so auch nicht weg.

Mir blieb also nichts anderes übrig, als den Internet Explorer 7 zu deinstallieren. Dies geht ganz simpel über die Softwareverwaltung. Vor der Deinstallation wird noch eine Liste mit allen Programmen angezeigt, die den IE7 benutzen.

Und dann wird deinstalliert.


Nach dem neustart verzichtete ich drauf ein Programm aus der obigen Liste zu starten sondern öffnete die IE wieder. Diesmal die gute alte 6er Version.


Über das Windowsupdate installierte ich wieder die bessere, neue 7er Version. Und nach der Installation kam, wie erwartet die "Runonce" Seite. Diesmal aber mit Inhalt.


Mission completed!