nicht angemeldet
Anchor in DIV erzeugt ungleiche Ergebnisse
Hallo
folgender Quellcode:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
html{
height:100%;
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
height:100%;
}
div{
margin:0px;
padding:0px;
}
div.container{
padding:0px;
margin-top:10px;
background-color:#ccc;
border:1px solid black;
text-align:center;
}
a{
padding:0px;
margin:0px;
border:1px solid black;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div class="container">
<a href="#">a</a>
</div>
</body>
</html>
Dieser Code erzeugt in Firefox und im IE zwei unterschiedliche Ausgaben, wie sie beide nicht sein sollten.
Im Firefox (aktuelle Version) wird oben ein Pixel vom Link abgeschnitten, so daß die obere "Border" vom Link nicht sichtbar ist.
Der IE (5.50....) schneidet die "Borders" oben und unten ab.
Ist dies ein Fehler vom CSS bzw XHTML oder ein Fehler im Rendering der beiden Browser?
Konnte leider noch nicht mit anderen Browsern testen.
Link zu dem Beispiel befindet sich in der URL vom Posting.
Danke für alle Antworten
Gruß
-
Hallo,
<?xml version="1.0" encoding="ISO-8859-1"?>
Hiermit schaltest du den blöden IE in den Quirks-Mode. Wodurch es schnell zu Unterschieden in der Darstellung kommt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--Du verwendest XHTML, also solltest/musst du den Kommentar entfernen, da der Inhalt sonst ignoriert wird. Jedenfalls passiert das, sobald die Datei mit dem Mime-Typ application/xhtml+xml geparst wird. Speichere sie doch z.B. mal mit der Endung .xhtml ab und schau dir's im FF oder Opera an.
[...]
Dieser Code erzeugt in Firefox und im IE zwei unterschiedliche Ausgaben, wie sie beide nicht sein sollten.
Im Firefox (aktuelle Version) wird oben ein Pixel vom Link abgeschnitten, so daß die obere "Border" vom Link nicht sichtbar ist.Dass kannst du durch ein padding-top (container) ganz leicht beheben!
Der IE (5.50....) schneidet die "Borders" oben und unten ab.
Dass kenn ich aus dem Quirksmode s.o.
Ist dies ein Fehler vom CSS bzw XHTML oder ein Fehler im Rendering der beiden Browser?
Wie gesagt, der IE kommt mit der XML-Deklaration nicht klar, und der FF braucht lediglich ein padding-top.
mfg. Daniel
-
Danke für die schnelle Antwort. Leider ändert aber das entfernen der XML-Deklaration nichts am Darstellungsfehler im IE. Es fehlen immer noch beide Borders.
Opera 9 (welches ja auch den ACID2 Test besteht) besteht diesen Test leider auch nicht.
Der IE nimmt die Seite mit .xhtml Endung gar nicht an.
Die Seite ist jetzt verfügbar unter
http://janharms.net/csstest.html
und
http://janharms.net/csstest.xhtml
Beide enthalten den gleichen Quellcode.Hallo,
<?xml version="1.0" encoding="ISO-8859-1"?>
Hiermit schaltest du den blöden IE in den Quirks-Mode. Wodurch es schnell zu Unterschieden in der Darstellung kommt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
<!--Du verwendest XHTML, also solltest/musst du den Kommentar entfernen, da der Inhalt sonst ignoriert wird. Jedenfalls passiert das, sobald die Datei mit dem Mime-Typ application/xhtml+xml geparst wird. Speichere sie doch z.B. mal mit der Endung .xhtml ab und schau dir's im FF oder Opera an.
[...]
Dieser Code erzeugt in Firefox und im IE zwei unterschiedliche Ausgaben, wie sie beide nicht sein sollten.
Im Firefox (aktuelle Version) wird oben ein Pixel vom Link abgeschnitten, so daß die obere "Border" vom Link nicht sichtbar ist.Dass kannst du durch ein padding-top (container) ganz leicht beheben!
Der IE (5.50....) schneidet die "Borders" oben und unten ab.
Dass kenn ich aus dem Quirksmode s.o.
Ist dies ein Fehler vom CSS bzw XHTML oder ein Fehler im Rendering der beiden Browser?
Wie gesagt, der IE kommt mit der XML-Deklaration nicht klar, und der FF braucht lediglich ein padding-top.
mfg. Daniel
-
Hallo,
Danke für die schnelle Antwort. Leider ändert aber das entfernen der XML-Deklaration nichts am Darstellungsfehler im IE. Es fehlen immer noch beide Borders.
Hast du padding (für die umgebende Box) schon probiert? Bei mir, wird das Problem dadurch gelöst. Jedenfalls im FF. IE hab ich nicht getestet.
Opera 9 (welches ja auch den ACID2 Test besteht) besteht diesen Test leider auch nicht.
Du meinst die Borders? Wie gesagt: padding!
Der IE nimmt die Seite mit .xhtml Endung gar nicht an.
Jedenfalls nicht online. Lokal verarbeitet er sie als text/html (was auch nicht korrekt ist). Wenn du sie aber vom Server abrufst, wird die Datei als application/xhtml+xml gesendet, was der IE (mal wieder als einziger unter den aktuellen Browsern) nicht versteht.
http://janharms.net/csstest.xhtml
Beide enthalten den gleichen Quellcode.Durch das entfernen der XML-Deklaration hast jetzt allerdings ein weiteres Problem: Die Zeichenkodierung ist UTF8! Schau dir die Seite mal im FF an!
Du musst jetzt also versuchen, dem Browser entweder die Zeichenkodierung mitzuteilen (mit H. von Servertechniken) oder du mskierst alle nicht-UTF-Zeichen (z.B. "ä" -> "ä").
Alternativ kannst du natürlich auch die IE-Nutzer ausschließen und die XML-Deklaration verwenden ;-).
[...]
Bitte vermeide ToFu
mfg. Daniel
-
-
-
Hallo Jan,
hier verwundert mich etwas:
<?xml version="1.0" encoding="ISO-8859-1"?>
^ ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
^ ^
Warum 1.1?
Das musst du doch zwingend als application/xhtml+xml ausliefern, womit der IE überhaupt nicht klarkommt.
Warum nicht einfach 1.0?Der IE (5.50....) schneidet die "Borders" oben und unten ab.
Der IE 5.5 kennt nur Quirksmodus, ein dem Standard entsprechendes Rendering kannst du von ihm nicht wirklich erwarten.
Ist dies ein Fehler vom CSS bzw XHTML oder ein Fehler im Rendering der beiden Browser?
Rahmen bei Inlineelementen können immer Probleme bereiten. Zuverlässiger wäre es, wenn du dem Link display:block und eine passende Breite verpasst.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Auch deinen Vorschlag habe ich umgesetzt, kann aber trotzdem keine Änderung in der Darstellung im IE sehen. (Zu Hause benutze ich 6.0)
Trotz des Entfernens der XML-Deklaration und dem Downgrade auf 1.0 Strict bleibt im IE und Opera 9 der Fehler. FF schneidet immer noch die obere Border ab.
Gruß Jan -
Auf ein Blockelement wollte ich verzichten, da ich eine horizontale Auflistung der Links haben wollte.
Gruß
Jan-
Hallo Jan
Auf ein Blockelement wollte ich verzichten, da ich eine horizontale Auflistung der Links haben wollte.
Dann könntest du mit float arbeiten.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Leider nicht so wie ich es gerne hätte, da um gefloatete Elemente in einem Block zu behalten ein "Clear-Element" dahinter sein muss.
<div class="container"><a href="#">a</a><div class="clear"><br /></div></div>
Dieses Clear-Element lässt sich im IE Leider nicht zu einer 0px Höhe herunterschrumpfen, so daß immer ein Abstand zwischen dem Rand des "container" und dem Rand der Link Elemente bleibt.
So hatte ich eigentlich Angefangen habe aber gemerkt, dass es sich so nicht umsetzten lässt, was ich machen wollte. Daraufhin bin ich zu dem anderen Anstatz umgestiegen.
Naja ich danke für die Hilfe und versuche weiterhin eine Lösung zu finden, die meinen Ansprüchen genügt.
Ich freue mich über alle weiteren Hinweise.
Gruß
Jan-
Hallo Jan
Ich freue mich über alle weiteren Hinweise.
Eventuell kann dir die Definition einer passenden Mindesthöhe für .container oder der Block Formatting Contexts für Browser und hasLayout für den IE helfen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Genial.
Das hat mir den Einfall gebracht. Tausend dank. Ich floate die Elemente einfach links. Setze dann ein Clear-Element dahinter um die Elemente in den Container reinzuzwingen und schneide dann per overflow:hidden und height:1.2em das Clear-Element ab.
Funktionieren tuts auf FF, Op und IE :))
danke. kann mich jetzt entlich erleichtert in den Abend begeben.
Gruß & DankJan
-
-
-
-
-