28172 sujets

CSS et mise en forme, CSS3

Problème espace sous Internet Explorer [Résolu]

Bonjour,

J'ai un problème sous IE et sous Firefox par contre tout est nickel. Voilà, IE me rajoute un léger espace blanc en dessous des photos alors que les photos ont exactement la hauteur de la div.

Le lien de la page est http://www.tradi-sit.com/nouveau_site.

Voici le code css :

body, html, div, span, img, form, a, p, ul, li, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

body {
	margin-top: 20px;
	background: url(images/fond.gif);
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

h2 {
	width: 350px;
	margin-left: 35px;
	border-bottom: solid 1px #870812;
	color: #870812;
	font-size: 1.2em;
	font-variant: small-caps;
}

#conteneur {
	position: relative;
	width: 1000px;
	margin: 0 auto; 
	background-color: #FFFFFF;
}

#haut {
	width: 1000px;
	height: 120px;	
	background-color:#FFFFFF;
	text-align: left;
}

.logo {
	position: absolute;
	width: 200px;
	height: 102px;
	top: 10px;
	left: 10px;	
}

.chaises {
	position: absolute;
	width: 770px;
	height: 120px;
	top: 0px;
	left: 230px;	
}

#menu {
	position: absolute;
	width: 1000px;
	height: 20px;
	top: 120px;
	left: 0px;
	margin: auto;
	padding: 0px;
	z-index: 2;
	background-color: #EDEDED;
	color: #4779B2;
	line-height: 14pt;
	text-align: center;
}

#menu ul {
	display: inline;
	color: #4779B2;	
	text-align: center;
}

#menu li {
	display: inline;
	color: #4779B2;
	font-variant: small-caps;
}

#menu a {
	color: #4779B2;
	font-size: 1em;
	text-decoration: none;
}

#menu a:hover {
	color: #870812;
	font-variant: small-caps;
	text-decoration: none;
}

#centre {
	position: absolute;
	width: 670px;
	margin-top: 20px;
	left: 0px;
}

#droite {
	margin-top: 20px;
	margin-left: 670px;
	padding: 0px;
}

#bas {
	background: url(images/fond.gif);
	color: #4779B2;
	text-align: center;
}

#bas ul {
	display: inline;
	color: #4779B2;
	text-align: center;
}

#bas li {
	display: inline;
	color: #4779B2;
	font-size: 1em;
}

#bas a {
	color: #4779B2;
	font-size: 1em;
	text-decoration: none;
}

#bas a:hover {
	color: #870812;
	font-size: 1em;
	text-decoration: none;
}

.marge-droite {
	margin-left: 400px;
	display: inline;
}

.rouge {
	color: #870812;
}

.bleu {
	color: #4779B2;
}


.gras {
	font-weight: bold;
}

a {
	color: #000000;
	text-decoration: none;
}

a:link {
	color: #000000;
	text-decoration: none;
}

a:visited{
	color: #000000;
	text-decoration: none;
}

a:hover{
	color: #000000;
	text-decoration: underline;
}

a:active{
	color: #000000;
	text-decoration: none;
}


et le code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tradi-Sit</title>
	<link href="styles.css" rel="stylesheet" type="text/css" />
	<script src="backtothehtml.js" language="JavaScript" type="text/javascript"></script>
</head>

<body>

	<div id="conteneur">

		<div id="haut">			
			<?php include "haut.htm"; ?>
		</div>

		<div id="menu">
			<?php include "menu.htm"; ?>
		</div>

		<div id="centre">		
			<img src="images/1.jpg" width="670px" height="630px" />
		</div>
	  
		<div id="droite">
			<img src="images/provence.jpg" width="330px" height="230px" alt="" /><img src="images/prestige.jpg" width="330px" height="400px" alt="" />
		</div>
	  
		<div id="bas">			
			<?php include "bas.htm"; ?>
		</div>
		
	</div>
	 
</body>
</html>


Merci pour votre aide.
Modifié par Vinix (27 May 2008 - 14:20)
Sujet clos
Aller à