[HTML/CSS] IE/Mozilla-Problem

[FH16]

Ich bemühe mich gerade, richtig schönen HTML-Code zu schreiben, bin aber nicht im Stande, die Seite so zu coden, dass sie im Firefox korrekt angezeigt wird. Kann mir jemand weiterhelfen? Wo liegt das Problem?

Die Seite liegt hier: http://www.juergen-frick.com/navigation.html

So siehts bei mir aus: links korrekt im IE, rechts unkorrekt im Firefox 1.0

 

[sverebom]

Ich kann mir schon denken, woran es hängt.
Zeig mir bitte mal den CSS und HTML-Code (bitte nur die betreffenden Abschnitte). Ich vermute, da kommen sich die Defintionen für diverse Klassen und ID's in die Quere.

Mööööp, den Code hasse ja quasi per Link zur Seite mit angegeben.
Also, ich hatte Recht mit meiner Vermutung, du hast die DIV-Container nicht sauber getrennt.

Wenn du CSS-IDs auf Div-Container anwendest, dann mußt du den DIV-Tag wie folgt schreiben:

<div [B]class="id"[/B] id="navigation"></div>

So sollte es dann gehen.

Da du die Elemente nicht sauber getrennt hast, überlagert deine Defintion für den a-Tag deine Definitionen für den nav-Container. Dem IE ist das egal, das Mistding schluckt ja alle Fehler.

 

[FH16]

Problem gelöst! Es lag daran, dass der Firefox keine Zahl als Klassenname mag. Ich würde eher sagen, dass Firefox extrem pingelig ist, und nicht der IE nachlässig... Irgendwie ist's einfach saumühsam, die Seite Firefox-kompatibel zu machen...ist ja fast wie früher mit Netscape...;-)

Edit: vielleicht liest das noch jemand: Sch*** Firefox! Der nimmt's also wirklich viel zu genau. Beim ":first-letter"-Pseudoformat bezieht er sich doch tatsächlich auf den ersten Buchstaben (und nicht Zeichen). Die Frage ist nur, wo da der Praxisbezug ist...

<style type="text/css">
div:first-letter { color:red; }
</style>
<div>@123</div>

 

[[UPS]Erazor]

Lies den CSS Standard und schau dir an was da definiert wurde. Die Mozilla Leute halten sich nur an die Regeln. Das mit dem fehlenden Praxisbezug kannst du beim W3C anmeckern, nicht am Mozilla.

Die Nachlässigkeit des IE ist ja weithin bekannt und verleitet (u.a. auch dich) zu unsauberem Code. Hättest du es gleich richtig gemacht, wären IE und Mozilla damit zufrieden.
Alles andere ist nur Pfusch, denn du weißt nicht welche Macken der IE behält und welche nicht. Bei einem standardkonformen Code ist es zumindest nicht deine Schuld.

btw: wo hast du schonmal gesehen, dass man als Bezeichner nur Zahlen nehmen kann?

 

[sverebom]

Mmmh, also ich hatte bisher NIE Probleme mit dem Firefox sondern nur mit dem IE, was aber und vor allem daran lag, das die Elemente meiner Webseiten nicht sauber voneinader getrennt habe. Liegt vielleicht daran, das ich meinen CSS-Code eher ausführlich schreibe und von daher vielleicht weniger fehleranfällig arbeite und mögliche Fehler auch schneller entdecke.

Du solltest auch unbedingt deine Elemente sauber voneinander trennen, so wie oben beschrieben, denn sonst kriegst du noch Spaß, wenn du weitere Link-Definitionen in deine Seite einfügst.

Und wie Erazor schon sagte ist der IE der böse Bube, nicht die anderen Browser. In der Schule arbeite ich simultan am Mac und an meinem eigenen PC, komme also in Kontakt mit jeder Menge Browsern und nur der IE macht selten sofrt das, was ich will. Die anderen Browser halten sich nur an die Regeln, der IE verleitet hingegen zu Fehlern, weil er Alles darzustellen versucht (und bei dir hat er es wundersamer Weise sogar richtig gemacht). Und deiner Hobbywebdesignerehre wird es hoffentlich nicht schmecken, fehlerhaften Code zu schreiben.

Falls du in Zukunft vor unlösbaren Problemen bei der Browseranpassung stösst (meistens liegt es einfach nur daran, das der IE Boxen anderes verwaltet. Da muss man dann mit Padding, Margin usw. aufpassen), kannst du ja auf eine CSS-basiert CSS-Weiche zurück greifen.

 

[Saschlong]

Was 'ne ziemlich gute Lösung ist um erstmal die grundlegende Problematik zwischen IE und den anderen Browsern (nämlich Margin und Padding) zu beseitigen ist das folgende Stück CSS:

*{
margin: 0px;
padding: 0px;
}

Ich würde das mit dem CSS zu ausführlich schreiben lassen, da es zu viel Code und somit Verwirrung führt...