Darstellungsprobleme bei verschiedenen Browsern

    Hi Community

    Mein neuer Blog sieht im Browser Opera perfekt aus. Soll heissen; pixelgenau so wie er auch aussehen sollte. Allerdings interpretiert der Internet Explorer, mal wieder, einige Sachen anders. Auch der Firefox stellt einige Details "falsch" dar. Ich hab schon stundenlang versucht es so hinzukriegen, dass es alle Browser einigermassen gleich darstellen aber bin noch auf kein befriedigendes Resultat gekommen. Hoffe deswegen jemand von euch kann mir helfen?! ;-)

    Infos die ihr wohl benötigt:

    Dann hier Screenshots der verschiedenen Browser und was beim jeweiligen noch nicht okay ist:

    Opera - ImageShack - Hosting :: operaan4.jpg

    • -

    FireFox - ImageShack - Hosting :: firefoxpa1.jpg

    • Seitennavigation oben links zu weit oben bzw. Abstand zum Headerbild zu gross. Sollte so sein wie "RSS 2.0 abonnieren".

    Internet Explorer - ImageShack - Hosting :: iecc2.jpg

    • Headerbild nicht in der Mitte, ein paar Pixel zu weit links
    • Seitennavigation oben links zu weit oben bzw. Abstand zum Headerbild zu gross. Sollte so sein wie "RSS 2.0 abonnieren".
    • Ungeordnete Listen (z.b. Kategorien, Letzte Fotos & Grafiken, Verlinktes) nicht linksbündig


    Freu mich über jede noch so kleine Hilfe! Vielen Dank!

    Freundliche Grüsse
    Kevin

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Linksbündig sind sie ja, nur mit Abstand nach links. Das meinst du doch oder? das sollte sich mit entsprechenden Angaben für margin/padding beheben lassen.

    Code
    #sidebar_right li, #sidebar_left li {[COLOR="Blue"]style.css (line 181)[/COLOR]
list-style-type:none;
[COLOR="#0000ff"]margin:0;
padding:0;[/COLOR]
}


    Die <li> dort sind auch nicht innerhalb umschließender <ul> bzw. <ol>-Elemente.

    Ich muss mich leider hier nochmals melden. Hab unterdessen alle XHTML-Fehler behoben: [Valid] Markup Validation of http://kevinwalker.ch/ - W3C Markup Validator

    Das Problem mit dem Abstand des Headers besteht jedoch weiterhin. Im Firefox und IE ist links das Headerbild 1px zu weit rechts. In Opera wird es jedoch richtig angezeigt... hat da jemand eine Idee? :(

    Screenshot Firefox: ImageShack - Hosting :: firefoxfz7.jpg
    Screenshot Opera: ImageShack - Hosting :: operawb1.jpg

    Mmh, erstmal ist dein #menu in der Summe zu breit:

    Code
    #outer {
width:[COLOR="Blue"]938px[/COLOR];
}


    Zur Verfügung stehen 938px.

    Code
    #menu {
margin:20px [COLOR="Red"]12px[/COLOR] 0;
padding:10px[COLOR="#ff0000"] 0[/COLOR];
width:[COLOR="#ff0000"]925px[/COLOR];
}


    925 + 12 + 0 + 0 + 12 = 949px

    Mach #menu zunächst mal 11px schmaler, dann passt es auch genau in #outer. Du kannst die Breitenangabe hier theoretisch auch weg lassen.

    Die 1px-Verschiebung wird wohl durch eine fehlerhafte Berechnung der Positionierung von Hintergrundbild für body und dem #outer-Container kommen. Einen wirklichen Grund für die Fehldarstellung kann ich nicht erkennen, der Code an sich scheint korrekt zu sein.

    Nachdem alten und guten "Das-Ist-So-Gesetz".

    bau doch einfach folgendes mal in die css:

    PHP
    #header, x:-moz-any-link { 
     margin-left: -1px !important;
}

    Damit funzt es.

    Fisch

    Wenn Fische Fische fischen in Fischen, fischen Fische Fische in Fischen...

    Das löst das Problem nur für Firefox (und so wie´s momentan aussieht auch nicht gänzlich, denn jetzt gibt´s rechts einen Überhang).
    Es besteht aber auch für IE, und der hat jetzt rechts um 2px zu viel Abstand (IE7). Wenn ich die Größe des Browserfensters verändere, variiert der Abstand um 1px, das beobachte ich hier auch.
    Und zwei Hacks können auch nicht die Lösung sein.

    Mein Vorschlag ohne Hack (warum das so ist, weiß ich offen gesagt auch nicht):
    Den Hack wieder rausnehmen und folgendes ändern:

    Code
    #outer {style.css (Linie 50)
margin:0 auto;
position:relative;
text-align:left;
width:[COLOR=Red][B]939px[/B][/COLOR];
}

    Wenn ich die Breite hier um 1px erhöhe, stimmt´s in FF3 (IE kann ich hier nicht testen, probier´s mal aus, Hollywood-Hank).

    Sicher ist, dass nichts sicher ist. Selbst das nicht. (J. Ringelnatz) http://www.sigaspot.com

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden