28173 sujets

CSS et mise en forme, CSS3

Espace entre colonnes sous ie avec css

J'ai fait récemment un site structuré grace à des tableaux.
Afin de le faire évoluer et de m'adapter aux nouvelles normes, je souhaites désormais utiliser le CSS !
Mais...En bon débutant, me voici confronté a un problème.

Un espace blanc se glisse entre mes colonnes lorsque je regarde ma page sous ie alors qu'elle fonctionne très bien sous firefox.

J'ai lu pas mal de choses sur différents forum concernant ce sujet mais mes compétences limitées ne me permettent pas de résoudre ce probleme.
Merci a la bonne âme qui pourra trouver mon erreur et si possible (je sais que j'en demande beaucoup) m'expliquer simplement comment ne pas la reproduire...

VOICI MA PAGE CSS :
* {margin:0; padding:0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none;}
#bloc_gauche {
	float: left;
	background-image: url(images/bord1.png);
	width: 20%;
	height: 90%;
	background-position: right;
	background-repeat: repeat-y;
	text-align: right;
}
#bloc_droit {
	float: right;
	background-image: url(images/bord2.png);
	width: 20%;
	height: 90%;
	background-position: left;
	background-repeat: repeat-y;
}
#bloc_centre {
	margin-left: 20%;
	position: relative;
	height: 90%;
	margin-right: 20%;
	background-color: #DDDEAA;
	text-align: center;
}
html {
	height: 100%;
margin: 0px;
	padding: 0px;
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

ET MA PAGE HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bloc_gauche">bloc_gauche</div>
<div id="bloc_droit">bloc_droit</div>
<div id="bloc_centre">bloc_centre</div>
</body>
</html>

MERCI ENCORE
Modifié par seb0802 (19 Sep 2006 - 19:55)
Bonjour seb0802,

De quel type d'espace blanc s'agit-il ? D'un espace important, ou d'un espace fin de 3 pixels ?

J'ai reconstitué ta page, mais sans y voir grand chose car je n'avais pas les images de fond des blocs. Mais j'ai pu voir que le texte des deux colonnes était légèrement décalé, d'une manière qui rappelle furieusement le Three Pixel Jog (un bug d'Internet Explorer).

Ce bug est agravé par le fait que le bloc central est -- attention, ça va faire mal -- doté de layout : au lieu de repousser uniquement le texte, les deux flottants (deux colonnes sur les côtés) repoussent carrément tout le bloc.
Je ne vais pas expliqué ici ce qu'est le layout/HasLayout (cf. une recherche sur le forum si curieux), mais en gros c'est à cause de la hauteur fixe (90%) que le bloc central a ce comportement. Une solution : virer cette hauteur fixe. Pour les images de fond des trois colonnes, on pourra peut-être utiliser la technique des colonnes factices (cf. une recherche toujours sur le forum ou ailleurs).

Mais je dirais que ce décalage de trois pixels n'est pas le problème le plus pressant.
Bonjour seb0802 et bienvenue,
Smiley smile

Une galerie de modèles est à ta disposition. Il y a sûrement un gabarit qui correspond à ce que tu veux faire, gabarit qu'il te suffira d'adapter.

Pour débuter, c'est une solution sûre qui t'évitera de rentrer dans la difficulté.
Ces modèles ont, bien entendu, pris en compte toutes les problématiques majeures. Smiley cligne
Modifié par Vero (19 Sep 2006 - 20:54)
Merci à vous deux pour ces éclaircissements !
Pour mpop : en effet, lorsque j'ai supprimmé la hauteur de 90%, tout est redevenu dans l'ordre.
Pour Vero : Je te remercie pour l'info, ça me donne des exemples plutôt complets qui vont m'aider à avancer !
Je n'ai plus qu'a m'armer de patience car je pense que je ne suis pas au bout de mes peines pour la suite...
Merci encore
Sujet clos
Aller à