[Résolu]Pas d'image sur IE, mais ok sur Firefox

Bonjour,

Je n'arrive pas à trouver de solution à mon problème.

Les images en class petite s'affichent correctement sous FireFox mais elles ne s'affichent pas du tout sur IE, je ne comprends pas pourquoi.

Voila le style :

#produits {
	width:100%;
	min-width:576px;
	height:100%;
	position:relative;
	background: transparent url(/images/aplatcouleurind.jpg) top left;
}
#produits ul {
    padding:0;   
    margin:0;   
    list-style-type:none;   
}
#produits a.gallery {   
    display:block;
    color:#000;   
	width:70px;
	height:201px;
    text-decoration:none;  
    margin:5px auto;   
    text-align:center;   
    cursor:default;   
	border: 1px solid black;
	z-index:200;
	background-color:#FF00FF;
}   
#produits a.gallery img.petite {
	display:block;
	width:70px;
	height:201px;
	border:1px solid blue;
	z-index:300;
}
#produits a.gallery span { 
	display:none;  
     position:absolute;   
	width: 34%;
	height:488px;
     top:0px;   
     right:0px;   
     overflow:hidden;   
     background:#fff;  
}   
#produits a.gallery span img {   
	border: 1px solid yellow;
}
#produits a.gallery:hover span {
	display:block;   
	position:absolute;   
	width: 34%;
	height:488px;
    top:0px;   
    right:0px; 
    color:#000;   
    background:#fff;   
	z-index:100;
}   
#produits a.gallery:active, #produits a.gallery:focus {
	border:1px solid red; 
}
#produits a.gallery:focus {
	outline:0;
}
#produits a.gallery:active span, #produits a.gallery:focus span {
	display:block;   
	position:absolute;   
	width: 34%;
	height:488px;
    top:0px;   
    right:0px; 
    color:#000;   
    background:#fff;   
	z-index:50;
}
#produits a.gallery:focus span {
	outline:0;
}

#produits ul {   
	width:64%;
	min-width: 292px;
	margin: 5px;
	float:left;
	border: 1px solid green;
}   
#produits li {
	float: left;
	width:24%;
	min-width: 73px;
	height: 244px;
	border: 1px solid blue;
}  

et le html :

				<div id="produits">
        		    	<ul>
					
                			<li>
				            	<a href="#nogo" title="Mignonnette carrée 4 cl " class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia mignonnette carrée 4 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/mignogrue_52.jpg" alt="Ambacia mignonnette carrée 4 cl" />
								
                                <br />
				                Mignonnette carrée 4 cl 
                                </span>
                				</a>
                                Mignonnette carrée 4 cl 
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Mignonnette grue 4 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia mignonnette grue 4 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/mignogrue_53.jpg" alt="Ambacia mignonnette grue 4 cl" />
								
                                <br />
				                Mignonnette grue 4 cl
                                </span>
                				</a>
                                Mignonnette grue 4 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Mignonnette ronde 4 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia mignonnette ronde 4 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/mignoronde_54.jpg" alt="Ambacia mignonnette ronde 4 cl" />
								
                                <br />
				                Mignonnette ronde 4 cl
                                </span>
                				</a>
                                Mignonnette ronde 4 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Mignonnette triangle 4 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia mignonnette triangle 4 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/mignotriangle_55.jpg" alt="Ambacia mignonnette triangle 4 cl" />
								
                                <br />
				                Mignonnette triangle 4 cl
                                </span>
                				</a>
                                Mignonnette triangle 4 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Mignonnette 5 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia mignonnette 5 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/migno5cl_56.jpg" alt="Ambacia mignonnette 5 cl" />
								
                                <br />
				                Mignonnette 5 cl
                                </span>
                				</a>
                                Mignonnette 5 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Flasque 10 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia flasque 10 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/flasque10_57.jpg" alt="Ambacia flasque 10 cl" />
								
                                <br />
				                Flasque 10 cl
                                </span>
                				</a>
                                Flasque 10 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Flasque 20 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia flasque 20 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/flasque20_58.jpg" alt="Ambacia flasque 20 cl" />
								
                                <br />
				                Flasque 20 cl
                                </span>
                				</a>
                                Flasque 20 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Standard 35 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia standard 35 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/standard35_59.jpg" alt="Ambacia standard 35 cl" />
								
                                <br />
				                Standard 35 cl
                                </span>
                				</a>
                                Standard 35 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Carafe 50 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia carafe 50 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/carafe_60.jpg" alt="Ambacia carafe 50 cl" />
								
                                <br />
				                Carafe 50 cl
                                </span>
                				</a>
                                Carafe 50 cl
                			</li>
            		
                			<li>
				            	<a href="#nogo" title="Standard 70 cl" class="gallery"
								
                				 <img  class="petite" src="/images/aplat-visiteguidee.gif" alt="Ambacia standard 70 cl" />

                                 <span>
                					<img src="client/gfx/photos/produit/standard70_61.jpg" alt="Ambacia standard 70 cl" />
								
                                <br />
				                Standard 70 cl
                                </span>
                				</a>
                                Standard 70 cl
                			</li>
            		
		                </ul>
	            </div>

Merci pour votre aide,

Alfouine
Modifié par alfouine (24 Feb 2009 - 10:38)

Dans la série plus c'est gros, moins on le voit, il manquait la fermeture des balises a.

Comme quoi dès fois IE réagit plus sainement que FF.

Alfouine,