Zur Navigation

CSS: Verschiedene Browser unterschiedliche Abstände [2]

11 Jörg Kruse

Der Thread hier ist schon über sechs Jahre alt, Zoras Hinweis in Beitrag 2 auf die Unzulänglichkeiten des Internet Explorer 5 muss uns nicht mehr jucken, weil diese Browerversion heutzutage wohl kaum noch von jemanden benutzt wird. Falls du den auch schon recht alterschwachen IE 6 noch berücksichtigen musst, solltest du ein strictes Doctype verwenden, damit dieser sich nicht wie der IE 5 verhält:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Es kann abgesehen davon bei komplexeren Layouts natürlich noch zu einigen abweichenden Darstellungen kommen (insbesondere beim IE6 und IE7), da kannst du aber z.B. hier im Forum nachfragen, wie man das lösen kann (dazu am besten aber einen eigenen Thread eröffnen)

03.02.2011 14:21 | geändert: 03.02.2011 14:25

... 1 Jahr später ...

12 Henry (Gast)

Hallo Jörg!

Ich habe auch mal eine Frage bezüglich CSS in verschiedenen Browsern.

Ich habe eine Website mit einem seitlichen Menü und einem Textfeld daneben.
Das Textfeld is strukturiert durch horizontale Trennlinien (mittels <hr/>) und mit einem festen Abstand mittels "margin-left: 350px;" ausgerichtet.

Jetzt ist folgendes der Fall, dass besagte Linien im IE9 und vor allem im Firefox10 zu weit eingerückt sind. Opera und Chrome (welchen ich hauptsächlich zum Erstellen genutzt habe) stellen die Seite korrekt dar.
Auch scheint der IE die für die Seite definierte definierte Schriftart nicht zu übernehmen - die anderen drei Browser zicken da nicht so rum.

Gibt es andere Möglichkeiten Trennlinien zu realisieren bzw einen Workaround für geschildertes Problem? Den Tipp aus dem Post davor habe ich bereits befolgt, leider ohne nennenswerten Erfolg..

15.02.2012 18:47

13 Jörg Kruse

hr lässt sich nur sehr schwer bis gar nicht über CSS so formatieren, dass die Browser die Linie gleich anzeigen. Trennlinien werden deswegen im allgemeinen mithilfe der CSS-Eigenschaft border realisiert

Beispiel für Trennlinien zwischen Listenelementen:

li {
border-top:1px solid black;
padding-top:10px;
padding-bottom:10px;
}
li:first-child {
border-top:none;
}

15.02.2012 19:23

14 Henry (Gast)

Danke, hat super geklappt, superschnelle Antwort - top Ding!

16.02.2012 19:41

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]