28220 sujets

CSS et mise en forme, CSS3

Salut à tous !

Voilà j'ai un petit problème de CSS, enfin je crois. J'ai créé une div de 200x150 (4/3) afin d'y mettre un diapos photo aléatoire.
Voilà déjà le code CSS :
.diapo {
	width:200px;
	height:150px;
	float:left;
	border:1px solid #000000;
}

.diapo img {
	width:100%;
	height:100%;
}


pour obtenir la diapos aléatoire j'utilise une fonction javascript trouvé sur le Net mais qui marche très bien. Voici son code :
<script language="JavaScript1.2">
var prefix='themes/diapo/TN_img'
var extension='jpg'
var nbimages=5
var delai=5000
var lasti=0, newi=0
function changeimage()
{
    newi=Math.floor(nbimages*Math.random()+1)
    if(newi==lasti) changeimage()
    else
    {
        lasti=newi
        if(document.getElementById) o=document.getElementById('imgalea');
        else if(document.images) o=document.images.imgalea;
        if(o)
        {
            if(o.filters) o.filters[0].apply();
            o.src=prefix+newi+'.'+extension
            if(o.filters) document.getElementById('imgalea').filters[0].play();
        }
        setTimeout("changeimage()",delai)
    }
}
</script>


après dans ma page HTML j'ouvre ma div, j'y créer une image et j'appelle la fonction. voici le code :
<div class="diapo">
    <img name="imgalea" id="imgalea" src="themes/diapo/TN_img1.jpg" style="filter:progid:DXImageTransform.Microsoft.Fade(Duration=1.0,overlap=1.0)">
  	<script language="JavaScript1.2">changeimage()</script>
  </div>


Mon problème est ici !!! Smiley biggrin
Sous Firefox l'affichage est impéc' et le diapos fonctionne. Mais en ce qui concerne IE... la bordure du bas de la div ne colle pas au bas de la photo ! elle est en dessous de 3 à 4px... sans savoir pourquoi. Et ça me décalle toutes les div qui sont dessous ! et la photo a bien un format 4/3... et la div doit donc mesurer 200x153px ...
C'est une grande question métaphysique ! Smiley bawling
Modifié par Mucsy (12 Dec 2005 - 18:50)