suche

vor x Jahren

buttons

archiv - clouds

Webseite in verschiedenen Browsern testen

veröffentlicht: 30.10.07 22:20, von David Lienhard in HTML/CSS/JS
Kommentare (0), Trackback
Tags: css, firefox, html, ie, internetexplorer, opera, safari, webdesign

Ü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.

http://images.t-error.ch/blog/514/browsershots_uebersicht.jpg

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.

http://images.t-error.ch/blog/514/page_ie6_win2k.jpg

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.

http://images.t-error.ch/blog/514/page_ie5_win2k.jpg

Man achte auf die Navigation

DIV Container mit CSS im IE 6 zentrieren

veröffentlicht: 24.09.07 20:10, von David Lienhard in HTML/CSS/JS , t-error.ch
Kommentare (7), Trackback
Tags: css, firefox, html, ie, ie6, ie7, internetexplorer, opera, t-error.ch, webdesign, webdev

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;
    }