nicht angemeldet
IE: Abstände in Bilderliste
Gunnar Bittersmann'Nabend.
Mich bringt seit ein paar Stunden der IE6 zum Verzweifeln. Im Gegensatz zu diversen Threads im Archiv ist das Problem hier nicht, daß zwischen den Listenpunkten ein Abstand bleibt, sondern daß jedes Bild mit einen Abstand zur Unterkante des umschließenden List Items versehen wird.
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Bilderliste</title>
<link rel="stylesheet" type="text/css" href="list.css" />
</head>
<body>
<ul id="thumbs">
<li><img src="foo.jpg" /></li>
<li><img src="bar.jpg" /></li>
<li><img src="baz.jpg" /></li>
</ul>
</body>
</html>
CSS:
ul#thumbs {
list-style-type: none;
width: 95px;
}
ul#thumbs li {
display: block;
margin: 5px 0px;
padding: 0px;
text-align: center;
line-height: 0px;
background: #eda;
}
ul#thumbs li img {
margin: 0px;
padding: 0px;
}
Alle whitespaces zwischen den Listenbestandteilen zu entfernen, hat keine Änderungen mit sich gebracht. Daher habe ich den Code in der lesbar(er)en Form gepostet. Beim Firefox gab es anfangs das gleiche Problem, welches sich jedoch mit Angabe der line-height abstellen ließ. Nur für den IE hab ich noch immer keine Lösung gefunden. :-\
Kann jemand von euch helfen?
--
Once is a mistake, twice is jazz.
Once is a mistake, twice is jazz.
-
Hallo,
Mich bringt seit ein paar Stunden der IE6 zum Verzweifeln. Im Gegensatz zu diversen Threads im Archiv ist das Problem hier nicht, daß zwischen den Listenpunkten ein Abstand bleibt, sondern daß jedes Bild mit einen Abstand zur Unterkante des umschließenden List Items versehen wird.
IMG-Elemente sind per default Inline-Elemente, die sich in den umgebenden Textkontext einfügen. Man kann sich das so vorstellen, dass sie, wie ein einzelnes Buchstabenzeichen in der Textzeile stehen. Das bedeutet, sie stehen vertical-align:baseline.
Wenn man das nicht will, gibt es zwei Möglichkeiten.
1. IMG-Elemente im Textkontext belassen und vertical-align:bottom stellen.
2. IMG-Elemente mit display:block oder float oder position:absolute ... aus dem Textkontext nehmen.
Methode 1 funktioniert manchmal (ich glaube, wenn IMG das einzige Element in einer TD ist) im IE nicht. In Deinem Fall funktioniert sie aber.
viele Grüße
Axel
-
Hallo Axel.
Methode 1 funktioniert manchmal (ich glaube, wenn IMG das einzige Element in einer TD ist) im IE nicht. In Deinem Fall funktioniert sie aber.
Du hast recht. Nachdem gestern mit der Angabe für line-height der Firefox die Liste so darstellte, wie ich mir das dachte, probierte ich zwischenzeitlich auch mit vertical-align. Lag ja nahe. Allerdings hab ich Honk nicht daran gedacht, daß vertical-align auf die Bilder selber angewendet werden muß und *nicht* – wie etwa text-align – auf den umgebenden Container...
Tausend Dank. :)
--
Once is a mistake, twice is jazz.
-
-
Hello out there!
[…] daß jedes Bild mit einen Abstand zur Unterkante des umschließenden List Items versehen wird.
Verändere mal die Schriftgröße! Was siehst du? Der Abstand verändert sich auch?
Hm, dann muss es was mit der Schrift zu tun haben. Der IE erwartet Text als Inhalt eines Listitems ... http://forum.de.selfhtml.org/archiv/2006/2/t123197/#m793234
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)