Hallo
Ich habe da ein kleines CSS-Problem mit einer Liste.
Nach stundenlangem Probieren bitte ich Euch hier um Hilfe.
Der HTML-Code ist folgender:
--------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="../css_Test.css">
<title>XXXXX</title>
</head>
<body>
<ul class="produktbilder">
<li class="produktbildl">
<img src="str006-a.jpg" alt="Starship Troopers: Rodger Young (Abbildung 1)" title="">
</li>
<li>
<img src="str006-b.jpg" alt="Starship Troopers: Rodger Young (Abbildung 2)" title="">
</li>
<li class="produktbildl">
<img src="str006-c.jpg" alt="Starship Troopers: Rodger Young (Abbildung 3)" title="">
</li>
<li>
<img src="str006-d.jpg" alt="Starship Troopers: Rodger Young (Abbildung 4)" title="">
</li>
<li class="produktbildl">
<img src="str006-e.jpg" alt="Starship Troopers: Rodger Young (Abbildung 5)" title="">
</li>
<li>
<img src="str006-f.jpg" alt="Starship Troopers: Rodger Young (Abbildung 6)" title="">
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------
Der dazugehörige CDD-Code dieser:
--------------------------------------------------------------------
* {margin: 0; padding:0;}
ul.produktbilder img {
background: #d5d5d5 url(bilder/bild-wird-geladen.gif) no-repeat bottom;
vertical-align: bottom;
width: 250px;
height: 148px;
}
ul.produktbilder li {
list-style-type: none;
border: 1px solid #3d3d3d;
width: 250px;
margin: 0 0 7px 0;
}
li.produktbildl {
float: left;
}
--------------------------------------------------------------------
"Bewundern" kann man sich das hier:
http://spaceart.de/_Test/produkte/str006_Test.htm
Eigentlich sollten ja die horizontalen Abstände zwischen den Bildern
Null sein.
Im FireFox Browser klappt das auch.
Nur der Internet-Explorer macht da einen Abstand.
Der Opera setzt die Bilder einfach alle untereinander.
Woran kann das denn liegen?
Bzw. wo mache ich denn den Fehler?
Was ich letztendlich erreichen möchte, ist, dass immer
2 Bilder nebeneinander gezeigt werden und dann ein Umbruch stattfindet.
Also:
Abbildung 1 [Abstand] Abbildung 2
Abbildung 3 [Abstand] Abbildung 4
Abbildung 5 [Abstand] Abbildung 6
An der "Reihenfolge" im HTML-Code kann ich nicht viel ändern,
weil es sich bei meinem Problem um ein spezielles CSS fürs Drucken handelt.
Die Bilder sind auf der Webseite alle größer und untereinander
angeordnet. Nur für den Druck sollen sie halt kleiner und
2er-weise nebeneinander angeordnet werden.
Über Eure Hilfe würde ich mich sehr freuen.
Gruß
Ingo
Ingo Siemon
Gernot Back
Gunnar Bittersmann
Der Martin
MudGuard