28173 sujets

CSS et mise en forme, CSS3

Problème d'affichage sous IE

Salut à tous,

j'ai un petit problème d'affichage sous IE sur une des pages de mon site. J'ai essayé d'isoler le problème dans le code suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<link rel="stylesheet" href="test.css" type="text/css"/>
	<head>
	<body>
		<div class="center">
			<div class="middlegrandcadre">
				<div class="dercritique">
					<div id="contenudercrit">
						<div class="affcritdvd">
							<div class="conteneur">
								<a href="critiques/dvd.php?iddvd=48" onmouseover="document.getElementById('aderdvd48').style.display='block';" onmouseout="document.getElementById('aderdvd48').style.display='none';">
									<img class="imgderdvd" src="http://www.dvdanime.net/images_critiques/jaquette-front-133.jpg" alt="img"/>
									<span id="aderdvd48" class="infoover">
										Blood The Last Vampire<br />
										Edition Simple<br />
									</span>	
								</a>				
							</div>
							<div class="conteneur">
								<a href="critiques/dvd.php?iddvd=51" onmouseover="document.getElementById('aderdvd51').style.display='block';" onmouseout="document.getElementById('aderdvd51').style.display='none';">

									<img class="imgderdvd" src="http://www.dvdanime.net/images_critiques/jaquette-front-133.jpg" alt="img"/>
									<span id="aderdvd51" class="infoover">
										Blood The Last Vampire<br />
										ghfjg<br />
									</span>	
								</a>				
							</div>
							<div class="separe"></div>	
						</div>
					</div>
				</div>
			</div>
		</div>	
	</body>
</html>


et la feuille de style correspondante


.center {
width: 685px;
float:left;
}
.middlegrandcadre {
background: red;
border-left: #404a5a 1px solid;
border-bottom: black 2px solid;
border-right: black 2px solid;
padding:2px;
}
.dercritique{
margin:0 -2px -2px -2px;
}
.separe 
{
clear: both; 
} 	
div#contenudercrit{
background-color:white;
}		
.affcritdvd {
height:152px;
}
.affcritdvd .imgderdvd {
width:100px;
height:140px;
margin:4px;
}
.affcritdvd  .conteneur{
float:left;
position:static;
}
.affcritdvd .conteneur a:hover {
position: relative;
}
.affcritdvd .conteneur a:hover .infoover{
display:block;
}
.affcritdvd  .infoover{
background-color:white;
border:1px solid black;
display:none;
position:absolute;
left:80px;
top:120px;
}
.affcritdvd  .infoover img{
border:0;
top:2px;
margin-left:5px;
}
.affcritdvd  .descdercritdvd 
{
display:block;
}


Comme vous pouvez le voir sous IE il y a un petit ecart bleu en bas qui disparait lorsque l'on passe la souris sur les images. Et en plus la bordure disparait.

Savez vous comment je pourrais remédier à ce problème?

Désolé le code est un peu long mais je n'ai pas réussi à réduire plus le code sous peine de trop m'eloinger de ma page original.

merci d'avance!
Modifié par death83 (06 Jan 2007 - 01:41)
Salut death83,

bon, moi de toute façon, pour ces trucs là, j'estime ne pas être encore assez bon pour jongler avec le code pour regler un problème de ce genre, mais par contre, ce que je peux te conseiller, c'est de mettre un exemple comprenant ton problème en ligne, ça permettra aux gens qui sont capables de t'aider d'avoir un exemple sous les yeux et mieux imaginer les solutions.

voilà, à+ Smiley cligne

Touvert
touvert a écrit :

bon, moi de toute façon, pour ces trucs là, j'estime ne pas être encore assez bon pour jongler avec le code pour regler un problème de ce genre, mais par contre, ce que je peux te conseiller, c'est de mettre un exemple comprenant ton problème en ligne, ça permettra aux gens qui sont capables de t'aider d'avoir un exemple sous les yeux et mieux imaginer les solutions.

En effet, sinon, on doit commencer à faire la page avant de voir convenablement le problème Smiley smile
Sujet clos
Aller à