nicht angemeldet
Guten Abend,
in dem folgenden (vereinfachten) Beispiel sollen Bilder per Javascript lückenlos nebeneinander ausgegeben werden. Der umschliessende Container (box) müsste sich bei width:auto; und hight:auto; eigentlich auto-matisch um die Bilder legen, d.h. sich den Maßen der Bilderreihe genau anpassen.
Wenn ich den Hintergrund des Containers farbig mache (green) sieht man im Firefox 1.04, dass unterhalb der Bilderreihe noch 3-4 Pixel Abstand gehalten werden. IE 5.5 zeigt diesen Abstand nicht.
Mit float:left umschliesst der Container im Firefox die Bilderreihe wunschgemäß, aber der IE 5.5 stellt dann die Bilder nicht mehr lückenlos nebeneinander.
Weiss jemand, wer oder was diesen unteren Rand verursacht ?
Ich habe ihn zwar in beiden Browsern wegbekommen :-) indem ich dem Container eine feste Höhe gegeben habe, würde aber trotzdem gerne wissen, ob ich damit dann nur rumtrixe :-\ und möglicherweise einen Fehler in meinem Code umgehe.
Wie schon gesagt: auto müsste doch eigentlich die Bilderreihe ohne Abstand umschliessen .... ?!
Und float:left müsste auch im IE 5.5 die Bilder lückenlos in eine Reihe stellen ... ?!
Mit bestem Dank für einen Hinweis
Fredi
--------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title> </title>
<style type="text/css">
<!--
#box
{
position:absolute;
left:0px;
top:0px;
width:auto;
height:auto;
background-color:green;
}
img
{
float:left;
}
//-->
</style>
<script type="text/javascript">
<!--
var dom = (document.getElementById) ? 1:0;
//
var bilder = new Array();
//
bilder[0] = "Motiv01.jpg";
bilder[1] = "Motiv02.jpg";
bilder[2] = "Motiv03.jpg";
//
function erstelle_auswahl()
{
ebene = document.getElementById('box');
for (i = 0; i < bilder.length; i++)
{
bereich = document.createElement('span');
bereich.innerHTML = "<img src='Motiv01.jpg' width='200' height='150' alt=''>";
ebene.appendChild(bereich);
}
}
//-->
</script>
</head>
<body onload="erstelle_auswahl()">
<div id="box"></div>
</body>
</html>