28173 sujets

CSS et mise en forme, CSS3

Pas d'espace entre deux colonnes

Bonjour,
Comment positionner deux boites côte à côte sans avoir aucun espace entre les deux ?
Le code ci dessous

<html>
<head>
<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<style type="text/css">	
html, body {
	margin:0; 
	padding:0; 
	background-color: #EFE8E5; 
	color: #560000; 
	font-family:  "trebuchet MS", sans-serif; 
	font-size: 90%; 
	text-align: justify;
}
#home2 {
	float:left; 
	width:313px; height:405px; 
	background-color: #CCC;
}
#home3 {
	margin-left:313px; 
	width:481px; height:405px; 
	background-color: #AAA;
}
</style> 
</HEAD>	

<body>
	<div id='home2'></div>
	<div id='home3'>blablabla</div> 
</body>
</html>

Fonctionne parfaitement sous FF mais laisse un blanc entre les deux colonnes, dans IE 5, 6 et même 7 grrr.
J'ai beau bidouiller dans tous les sens j'arrive à rien. Merci du cadeau de noël !
Salut,

Apparemment tu n'as pas mis de DOCTYPE valide, ce qui peut causer des différences dans l'interprétation des marges et paddings. Voir l'article Les DTD HTML4.01 et XHTML1.0 : comment choisir ?.

P.S. : si tu choisis xhtml, les balises doivent être écrites en minuscules. Smiley cligne

P.S. 2 : il manque aussi <title> qui est obligatoire.
Modifié par Patidou (24 Dec 2006 - 12:11)
Bon en fait j'ai super simplifié le code la page que je développe pour garder le minimum d'éléments qui déclenchent le pb. De fait j'ai eu la main lourde et en rajoutant le DTD, ça passe aussi sur IE7 mais toujours pas sur IE6 et IE5

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'
'http://www.w3.org/TR/html4/strict.dtd'> 
<html>
<head>	
<title>test</title> 
<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<style type="text/css">	
html, body {
	margin:0; 
	padding:0; 
	background-color: #EFE8E5; 
	color: #560000; 
	font-family:  "trebuchet MS", sans-serif; 
	font-size: 90%; 
	text-align: justify;
}
#home2 {
	float:left; 
	width:313px; height:405px; 
	background-color: #CCC;
}
#home3 {
	margin-left:313px; 
	width:481px; height:405px; 
	background-color: #AAA;
}
</style> 
</head>	

<body>
	<div id='home2'></div>
	<div id='home3'>blablabla</div> 
</body>
</html>

Modifié par Misange (24 Dec 2006 - 12:21)
bonjour,

Tente de mettre toutes les valeurs par défaut de tes balises en margin et padding: 0 en début de css.
*{margin: 0; padding: 0;}
L'écart sous IE6 entre les deux blocs fait-il trois pixels ? Dans ce cas, c'est très probablement un cas du tristement célèbre Three Pixel Jog, bug corrigé dans IE7 mais pas dans IE6.

Je ne sais plus trop s'il existe un « correctif » pour IE6...
Sujet clos
Aller à