nicht angemeldet
Bilder in Liste dicht an dicht setzen
Hallo ihr,
ich habe mehrere Bilder, die ich mittels Liste untereinander angeordnet habe. Also
<ul>
<li><img...></li>
<li><img...></li>
<li><img...></li>
<li><img...></li>
</ul>
Nun setzt sie Mozilla dicht an dicht - so ist es auch gewollt - während IE Lücken dazwischen lässt. Ich habe sämtliche padding, margin, border ausgeschaltet, aber es hilft nichts.
Gibt es noch irgendeine Sache, die ich noch mal unter die Lupe nehmen sollte oder ist das einfach eine Eigenheit vom IE?
Grüße,
Conny
-
Sup!
Ein minimaler Testcase und ein Sceenshot wären auch hier hilfreich.
Gruesse,
Bio
--
And the beast shall come forth surrounded by a roiling cloud of vengeance. The house of the unbelievers shall be razed and they shall be scorched to the earth. Their tags shall blink until the end of days.-
Ein minimaler Testcase und ein Sceenshot wären auch hier hilfreich.
http://www.chnabfich.de/bsp.jpg
Den Quellcode kann ich leider nicht so einfach tippen, da das Ganze ein freies Portalsystem ist, dessen vorgegebene Parameter ich abwandle. Da kommen zu den Listen noch Massen an Ebenenangaben, Tabellenangaben usw. dazu, die in einer CSS-Datei stehen. Ich habe jedoch alles intensiv durchgecheckt, mit Einfärbungen, Rahmenangaben, Nachmessen, damit deutlich zu erkennen ist, was wo wie wirkt.
Dabei habe ich festgestellt - was ich gerade eben bei meiner Problemschilderung glatt unterschlagen habe *peinlichsei* - dass es scheinbar an den Links liegt, die auf den Bildern liegen: Die Link(!)fläche ist jeweils unterhalb der Bilder 3 Pixel größer als die eigentliche Bildgröße. Links, rechts und oben macht es der IE richtig.
Ist das vielleicht einfach nur eine Macke des IEs?
Conny
-
Hi,
http://www.chnabfich.de/bsp.jpg
warum verwendest Du hier überhaupt Grafiken?
Die Link(!)fläche ist jeweils unterhalb der Bilder 3 Pixel größer als die eigentliche Bildgröße.
Das hört sich nach der Unterlänge für die Bilder an. display:block oder vertical-align für img könnte helfen.
freundliche Grüße
Ingo-
Hallo Ingo,
warum verwendest Du hier überhaupt Grafiken?
Das Ganze war ursprünglich eine ganz einfache HTML-Seite, ohne "richtiges" CSS geschweige denn einem Portalsystem drumherum. Da habe ich sie halt einfach mit übernommen. Inzwischen sind sie aber auch durch reine Farbflächen und Trickserei "dreidemnsional" nachgebildet. Ist ja eh ladezeitsparsamer. :-)
Das hört sich nach der Unterlänge für die Bilder an.
Nee. Die Fläche, die die Bilder einnehmen, sind ok. Nur wenn ein Link dazu kommt, wird es mehr.
vertical-align für img könnte helfen.
Damit regle ich doch lediglich die Positionierung, reduziere aber keine Fläche, die eingenommen wird. Oder übersehe ich was? (Deine beiden Tipps halfen aber auch beide nicht.)
Wenn wir grad bei vertical-align sind: ich habe bisher auch bei anderen Gestaltungen immer Probleme gehabt, es erfolgreich auf andere Dinge als auf Text anzuwenden. Hat nie funktioniert. Muss man das bei z. B. Bildern noch mit einer weiteren Angabe kombinieren?
Conny
-
Hallo,
Das hört sich nach der Unterlänge für die Bilder an.
Nee. Die Fläche, die die Bilder einnehmen, sind ok. Nur wenn ein Link dazu kommt, wird es mehr.
vertical-align für img könnte helfen.
Damit regle ich doch lediglich die Positionierung, reduziere aber keine Fläche, die eingenommen wird. Oder übersehe ich was? (Deine beiden Tipps halfen aber auch beide nicht.)Doch, vertikal-align sollte helfen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bilderliste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul {list-style-type:none; margin:0; padding:0;}
li {margin:0; padding:0; border:1px solid black;}
-->
</style>
</head>
<body>
<p>Standard</p>
<ul>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
</ul>
<p>Images mit vertical-align:bottom;</p>
<ul>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
</ul>
<p>Standard mit Link</p>
<ul>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
</ul>
<p>Images mit vertical-align:bottom; und Link</p>
<ul>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
</ul>
</body>
</html>Im Übrigen ineressiert bei dieser Fehlersuche nicht, wie das HTML entsteht, sondern nur das HTML, welches im Browser ankommt. Das hättest Du aber durchaus posten können (Browser-Quelltext anzeigen) oder einen Link auf die Seite setzen.
viele Grüße
Axel
-
Hi,
Inzwischen sind sie aber auch durch reine Farbflächen und Trickserei "dreidemnsional" nachgebildet. Ist ja eh ladezeitsparsamer. :-)
und noch ladezeitsparender wäre es ohne Grafiken. Das Menü auf http://www.1ngo.de/web/css-layout.html?braun-integriert sieht doch fasr genauso aus, oder? Und die Abstände sind hier gewollt und über margin realisiert.
vertical-align für img könnte helfen.
Damit regle ich doch lediglich die Positionierung, reduziere aber keine Fläche, die eingenommen wird. Oder übersehe ich was?
Ja - daß nämlich Bilder, sofern sie inline dargestellt werden - an der Baseline der Schrift ausgerichtet werden und natürlich (für evtl. Unterlängen) Platz reserviert werden muß.
(Deine beiden Tipps halfen aber auch beide nicht.)
Hattest Du die Eigenschaften auch dem Element img zugewiesen?
Muss man das bei z. B. Bildern noch mit einer weiteren Angabe kombinieren?
Eigentlich nicht.
freundliche Grüße
Ingo
-
-
-
-
-
Hallo Conny,
ich habe mehrere Bilder, die ich mittels Liste untereinander angeordnet habe. Also
<ul>
<li><img...></li>
<li><img...></li>
<li><img...></li>
<li><img...></li>
</ul>Nun setzt sie Mozilla dicht an dicht - so ist es auch gewollt - während IE Lücken dazwischen lässt. Ich habe sämtliche padding, margin, border ausgeschaltet, aber es hilft nichts.
Versuche es einmal ohne Zeilenumbrüche nach dem </li> Also:
<ul>
<li><img...></li><li><img...></li><li><img...></li>Klappt es dann?
Grüße,
Jochen
-
Hallo Jochen,
Versuche es einmal ohne Zeilenumbrüche nach dem </li> Also:
[...]
Klappt es dann?
Nein, leider nicht. Die Idee hörte sich super an, da der IE ja manchmal Mucken bei so etwas macht. Aber an der Stelle will er nicht.
Conny
-