HTML, CSS: Jeder Browser zeigt die Seite anders an, was kann ich tun?

...komplette Frage anzeigen

6 Antworten

Neben dem Validieren der Seite solltest du auch ein Stylesheet namens "normalize.css" einbinden. Das minimiert die Differenzen zwischen den Browsern. Google einfach mal nach eben genanntem Stylesheet, lad's dir herunter und binde es ein.

Html ist in jedem Browser anders. Das ist ganz normal.

CSS ist dafür geschaffen in jedem Browser mehr oder weniger gleich aszusehen.

Lass dein HTML und CSS checken. Wenn alles richtig ist, müsste das gleich aussehen.

Wichtig: Tabellen (

) sind nicht für die Anordnung da! Sindern nur für tabellarische Daten! Wenn du für Anordnugen benutzt ist das
  1. seit ca.7-10 Jahren veraltet

  2. sehr unordentlich

Also: Das richtige CSS sollte gleich aussehen. Einnige Browser kennen einige Werte nicht und da kann man gar nichts tun.

Du kannst also nur das tun:

  1. Checke dein HTML und CSS. Nutze Validator dafür.

  2. Erkundige dich bei allen CSS-Werten. Unterstützen dies alle Browser? Seit wann unterstützen die Browser das.

  3. Teste deine Seiten in den bekanntesten Browsern.

Die bekanntesten Browser?

Mindestens die:

Google Chrome, Microsoft Internet Explorer, Mozilla Firefox.

Am Besten auch die:

Opera, Safari, Konqueror

Ich offe, dass ich helfen konnte :)

Gruß, Richard

Alle aktuellen Browser (Internet Explorer, Firefox, Opera, Chrome, Safari usw.) erfüllen die neusten CSS Spezifikationen. Daher solltest du deine Dateien (HTML und CSS) validieren lassen. Erst wenn keine Fehler und am besten keine Warnungen mehr auftauchen, hast du ein valides Layout, das in allen Browser gleich aussehen sollte.

myjack 23.01.2013, 20:37

Alle aktuellen Browser (Internet Explorer, Firefox, Opera, Chrome, Safari usw.) erfüllen die neusten CSS Spezifikationen.

Dem ist leider nicht so. Gerade was CSS3 angeht, unterstützt Chrome immernoch die meisten neuen Anweisungen. Selbst wenn ein valider CSS Code rauskommt, muss die Seite noch lange nicht in allen Browsern gleich aussehen. Gerade der IE tanzt eigentlich immer aus der Reihe.

Dennoch ist ein valider Code natürlich die halbe Miete :-)

1
voodoo123 23.01.2013, 20:41
@myjack

Danke für den Hinweis. Du hast schon Recht, dass nicht alle Browser alles exakt gleich anzeigen, aber bei einem validen Code steigt natürlich die Wahrscheinlichkeit dazu.

0
richi2 24.01.2013, 09:05

Alle aktuellen Browser (Internet Explorer, Firefox, Opera, Chrome, Safari usw.) erfüllen die neusten CSS Spezifikationen.

Nein. Der Internet Explorer erfüllt nicht die neusten. Der IE erfüllt die wenigsten!

0
  1. Maßnahme: DOCTYPE festlegen
  2. Maßnahme: HTML validieren: validator.w3.org
  3. Maßnahme: CSS validieren: jigsaw.w3.org/css-validator

Das sollte schonmal einige Probleme beseitigen.

myjack 23.01.2013, 20:39

Was mir direkt auffällt:

Die Angabe deiner Hintergrundfarbe für dein content-div background:f9f9f9; ist zum Beispiel nicht richtig. Richtig wäre background-color: #f9f9f9;

0
ketrwu14 23.01.2013, 20:40
@myjack

Okay, das hat jigsaw.w3.org/css-validator auch grade gesagt :D

0
myjack 23.01.2013, 20:57
@ketrwu14

Noch was zu deinem Navi:

Gib dem #navi h1 besser eine feste Breite. Jeder, der eine kleinere Auflösung hat als du (oder wenn du einfach mal deinen Browser etwas zusammenschiebst) wird die Links dann untereinander sehen, weil die oben nicht mehr rein passen. Das padding-right macht da keinen Sinn. Versuch mal das hier anstatt padding-right:

padding-left:337px;
width: 643px;

Woher die 643px? Dein #website-Div hat eine maximale Breite von 980px. Abzüglich des padding-left mit 337px ergibt das 643px. Das Navi ist nun genau so groß wie die Mindestbreite deines Inhaltes.

Die Größe deiner Links im Navi kannst du ruhig etwas kleiner machen, dann passen da auch immernoch alle rein danach.

0
PGrihn 24.01.2013, 09:33
@ketrwu14

Ausserdem solltest du auch darauf achten, dass das css valide ist. Denn bestimmte dinge funktionieren einfach nicht so gut in bestimmten Browsern.

Schlecht ist z.B. IE7 oder geringer, selbst IE 8 und IE9 machen oft Probleme. Vor allem, was css transitions angeht.

0

im CSS auch die befehle für firefox dazu pinnen

sollte helfen

Was möchtest Du wissen?