nicht angemeldet
IE ignoriert line-height, für "li" wenn Bild in Liste
Hallo,
weiß jemand wieso der IE (zumindest 5 und 6) die Angabe "line-height" für Listenelemente ignoriert, wenn ein img-Element in der Liste ist?
Bei folgendem Code kann ich die veränderte Linienhöhe nur für "Punkt 4" sehen, bei allen anderen Punkte wird sie ignoriert:
<!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>Listen</title>
<meta http-equiv="content-type" content="text/html;iso-8859-15" />
<style type="text/css">
li{
line-height : 50px;
}
</style>
</head>
<ul>
<li><img src="dot.gif" alt="" /> Punkt 1</li>
<li><img src="dot.gif" alt="" /> Punkt 2</li>
<li><img src="dot.gif" alt="" /> Punkt 3</li>
<li> Punkt 4</li>
<li><img src="dot.gif" alt="" /> Punkt 5</li>
<li><img src="dot.gif" alt="" /> Punkt 6</li>
</ul>
</body>
</html>
In den anderen Browsern macht das kein Problem. Gibts hier eine Lösung?
Für obigen speziellen Fall ließe sich natürlich ein "list-style-type" definieren, aber es kommt auch vor, dass die "dot.gif"-Grafik nicht am Anfang steht sondern im Text des Listenelements, da sie allgemein einen Link symbolisiert.
Vielen Dank, Frank
-
Hi Frank!
[...] aber es kommt auch vor, dass die "dot.gif"-Grafik nicht am Anfang steht sondern im Text des Listenelements, da sie allgemein einen Link symbolisiert.
Dann könntest du doch den Link mit CSS so verändern, dass er ein Hintergrundbild besitzt. Das wäre sowieso schöner, weil überschaubarer und der IE meckert (in diesem Fall) nicht mehr.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Hi,
Dann könntest du doch den Link mit CSS so verändern, dass er ein Hintergrundbild besitzt. Das wäre sowieso schöner, weil überschaubarer und der IE meckert (in diesem Fall) nicht mehr.
Hei, das funktioniert super! Ist echt viel schöner, denn man kann auch noch das Bild ganz einfach vertikal zentrieren. Hier meine Lösung:
a.imgLink{
background-image : url(/layout/main/hrefImage.gif);
background-repeat : no-repeat;
padding-left : 20px;
background-position : 0 50%;
}wobei das Bild 15px breit ist.
Vielen Dank, so werd ichs wohl machen, das spart ja auch noch ungemein HTML, da nicht ständig das Bild wiederholt werden muss.
vG,
FrankPS: Wieso das line-height nicht geht, interessiert mich natürlich trotzdem...
-
PS: Ich hätte ja natürlich auch gerne ":before" benutzt, aber das geht ja leider nicht im IE...
-
-
-
hi,
weiß jemand wieso der IE (zumindest 5 und 6) die Angabe "line-height" für Listenelemente ignoriert, wenn ein img-Element in der Liste ist?
Was heißt ignoriert - stellt der die Zeile noch größer dar, oder nur so groß wie das Bild ist, obwohl sie nach deiner Definition noch höher sein sollte?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Was heißt ignoriert - stellt der die Zeile noch größer dar, oder nur so groß wie das Bild ist, obwohl sie nach deiner Definition noch höher sein sollte?
Ja genau, die Listenzeile wird genau so groß dargestellt wie das Bild, sie soll aber größer sein, sonst klebt es so aneinander. Ich nehme an, das "richtige" Verhalten zeigt sich bei anderen Browsern als dem IE und dort klappt es, also ging ich davon aus, dass er das "ignoriert". Lieg ich da falsch?
vG,
Frank
-