nicht angemeldet
IE-Darstellungsproblem
Hallo!
Ich habe hier vor mir CSS-formatierten XHTML-Code, der mich noch zur Verzweiflung bringt! Er wird beim IE anders dargestellt als z.B. bei Mozilla Firefox - evtl. könnt ihr mir weiterhelfen.
Die Darstellung von Firefox wäre die gewünschte, wie bekomme ich das hin ? Dieser Zusätzliche farbige Rand über dem Div-Layer (der Box) stört gewaltig !
Code:
<!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" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
ul.entrylist,
ul.entry {
list-style-type:none;
padding:0px;
margin:0px;
border-style:none;
border-width:0px;
}
ul.entry {
background-color:#00CCCC;
}
li.entrylist {
margin:0px;
margin-top:25px;
padding:0px;
background-color:#FF00FF; /* <- Versuch zur Fehlersuche */
}
li.name,
li.date,
li.text,
li.homepage {
padding:5px;
}
li.name,
li.date,
li.homepage {
color:#FFFFFF;
}
li.name {
float:left;
}
li.date {
float:right;
}
li.text {
clear:both;
background-color:#66FFFF;
}
-->
</style>
</head>
<body style="margin:0px;padding:0px;">
<ul class="entrylist"><!--
--><li class="entrylist"><!--
--><div style="width:100px;height:100px;border:1px;border-style:solid"></div><!--
--></li><!--
--><li class="entrylist"><!--
--><div style="width:100px;height:100px;border:1px;border-style:solid"></div><!--
--></li><!--
--></ul>
</body>
</html>
-
Hallo Franz,
<ul class="entrylist"><!--
--><li class="entrylist"><!--
--><div style="width:100px;height:100px;border:1px;border-style:solid"></div><!--
--></li><!--
--><li class="entrylist"><!--
--><div style="width:100px;height:100px;border:1px;border-style:solid"></div><!--
--></li><!--
--></ul>Entferne doch mal die ganzen unnötigen Kommentarzeichen.
Übrigends kannst du Sachen wie:
border-style:none;
border-width:0px;
mit:
border:none;
zusammenfassenoder:
margin:0px;
margin-top:25px;
zu:
margin:25px 0 0 0;
dass macht die Sache am Ende etws übersichtlicher.Gruss, Jan aus Dresden
-
Danke für den Hinweis, aber die Kommentarzeichen hab ich nur versuchsweise drin, um festzustellen ob irgendwo ein Leerzeichen als Textzeile interpretiert wird - ohne ändert sich an der Optik überhaupt gar nichts !
Franz
-
Hallo Franz,
ohne ändert sich an der Optik überhaupt gar nichts!
Ich habe es eben ausprobiert und die Darstellung ändert sich wenn die Kommentarzeichen entfernt werden, ohne sieht es im IE genauso aus wie in Mozilla und Opera.
<img src="http://fractatulum.net/kram/ie_ss.png" border="0" alt="">
Gruss, Jan aus Dresden
-
komisch, hast Recht, aber das wär nur ein vereinfachtes Problem zu Demonstration! Der eigentliche Code hat das Problem immer noch !
Hab sogar mal alle Leerzeichen, Zeilenumbrüche raus gelöscht, hat nichts bewirkt! Ich versteh nicht, was da passiert !
Einziger Unterschied sollte jetzt sein, dass die Listenelemente wieder Listen sind, aber irgendwie dreht da der IE total durch !<!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" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
ul.entrylist,
ul.entry {
list-style-type:none;
padding:0px;
margin:0px;
border-style:none;
border-width:0px;
}
ul.entry {
background-color:#00CCCC;
}
li.entrylist {
margin:0px;
margin-top:25px;
padding:0px;
background-color:#FF00FF; /* <- Versuch zur Fehlersuche */
}
li.name,
li.date,
li.text,
li.homepage {
padding:5px;
}
li.name,
li.date,
li.homepage {
color:#FFFFFF;
}
li.name {
float:left;
}
li.date {
float:right;
}
li.text {
clear:both;
background-color:#66FFFF;
}
-->
</style>
</head>
<body style="margin:0px;padding:0px;">
<ul class="entrylist">
<li class="entrylist">
<ul class="entry">
<li class="name">Name
</li>
<li class="date">Datum
</li>
<li class="text">Text<br />Fortsetzung von Text
</li>
<li class="homepage">Homepage
</li>
</ul>
</li>
<li class="entrylist">
<ul class="entry">
<li class="name">Name
</li>
<li class="date">Datum
</li>
<li class="text">Text<br />Fortsetzung von Text
</li>
<li class="homepage">Homepage
</li>
</ul>
</li>
</ul>
</body>
</html>-
Habs jetzt hinbekommen!
Anscheinend interpretiert der IE da irgendwo Text rein, wo keiner ist und fügt eine Zusatzzeile ein. Mit Float kann man das Problem austricksen. Hier die kommentierte Lösung für alle, die sich zukünftig am gleichen Problem rumärgern !P.S.: DANKE !
---------------------------------------------------------------------<!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" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
ul.entrylist,
ul.entry {
list-style-type:none;
padding:0px;
margin:0px;
}
ul.entry {
background-color:#00CCCC;
clear:left; */ <- IE macht sonst Probleme ! */
}
li.entrylist {
margin:25px 0px 0px 0px;
padding:0px;
float:left; /* <- IE macht sonst Probleme ! */
}
li.name,
li.date,
li.text,
li.homepage {
padding:5px;
}
li.name,
li.date,
li.homepage {
color:#FFFFFF;
}
li.name {
float:left;
}
li.date {
float:right;
}
li.text {
clear:both;
background-color:#66FFFF;
}
-->
</style>
</head>
<body style="margin:0px;padding:0px;">
<ul class="entrylist">
<li class="entrylist">
<ul class="entry">
<li class="name">Name
</li>
<li class="date">Datum
</li>
<li class="text">Text<br />Fortsetzung von Text
</li>
<li class="homepage">Homepage
</li>
</ul>
</li>
<li class="entrylist">
<ul class="entry">
<li class="name">Name
</li>
<li class="date">Datum
</li>
<li class="text">Text<br />Fortsetzung von Text
</li>
<li class="homepage">Homepage
</li>
</ul>
</li>
</ul>
</body>
</html>-
Hallo,
Anscheinend interpretiert der IE da irgendwo Text rein, wo keiner ist und fügt eine Zusatzzeile ein.
Ja, das macht der IE gerne bei Zeilenschaltungen.
probier mal
<li class="name">Name</li>
statt
<li class="name">Name
</li>Gruß Fritz
-
Hab ich ja, hat aber nichts geholfen. Mit CSS hab ich den Effekt aber unterdrücken können. Ich versteh zwar nicht, wie das passieren kann (hatte versuchsweise alles ohne Leerräume in eine Zeile gequetscht ohne Ergebnis) aber jetzt ist das Problem Gott-sei-Dank vom Tisch !
-
-
-
-
-
-