28173 sujets

CSS et mise en forme, CSS3

[Résolu]Div décalé en dessous sous ie6

Bonjour,

Après une recherche infructueuse sur le forum (je ne suis peut-être pas un bon chercheur), je me décide à vous exposer mon problème.

Le contenu de mon site est de type "3 colonnes". Le menu à gauche qui est en float:left et qui contient les titres et sous-rubriques de chaque menu.
#gauche
{
	float:left;
	display:inline;
	width:180px;
	margin-left:112px;
}

#menu_titre
{
	width:180px;
	height:22px;
	font-size:14px;
	font-weight:bold;
	position:relative;
	margin-top:3px;
	padding-top:1px;
	padding-left:30px;
	padding-right:10px;
	background: url(../images/menu_titre.jpg) no-repeat 0 0;	
}

#menu_lien
{
	width:180px;
	height:22px;
	font-size:12px;
	position:relative;
	padding-top:3px;
	padding-left:20px;
	padding-right:10px;
	background: url(../images/menu_lien.jpg) no-repeat 0 0;	
}

Une colonne à droite en float:right
#droite
{
	float:right;
	width:191px;
}

#right_bas
{
	width:191px;
	height: 15px;
	position:relative;
	background: url(../images/droite_bas.jpg) no-repeat 0 0;	
}

#right_milieu
{
	width:191px;
	position:relative;
	padding-left:5px;
	overflow:hidden;
	background: url(../images/droite_milieu.jpg) repeat-y;	
}

#right_haut
{
	width:191px;
	height: 20px;
	position:relative;
	background: url(../images/droite_haut.jpg) no-repeat 0 0;	
}


Et le conteneur central qui suit le flux 
#milieu
{
	width:504px;
	margin-left:298px;
}

#milieu_bas
{
	width:504px;
	height: 15px;
	position:relative;
	background: url(../images/milieu_bas.jpg) no-repeat 0 0;	
}

#milieu_milieu
{
	width:490px;
	position:relative;
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	background: url(../images/milieu_milieu.jpg) repeat-y;	
}

#milieu_haut
{
	width:504px;
	height: 20px;
	position:relative;
	background: url(../images/milieu_haut.jpg) no-repeat 0 0;	
}


Tout s'affiche parfaitement bien sous FF 2.0 et IE 7, mais le conteneur central se retrouve en dessous du menu de gauche sous IE 6. Il est bien positionné au centre, mais trop bas. J'ai pensé qu'il s'agissait peut-être du 3px jog bug, mais il faut que je réduise d'une quarantaine de pixel pour que le conteneur daigne se placer comme il faut. J'ai même essayer d'enlever la colonne de droite, mais rien n'y fait. Si je ne réduis pas la taille du milieu, il ne se met pas à la bonne place.

Mon div englobant tout le site fait pourtant 1000px de large :
#site
{
	margin-left: auto;
        margin-right: auto;
	width:1000px;
        background: url(../images/fond_site.jpg) repeat-y 0 0;
}


Après avoir bien recompté, tout devrait pouvoir tenir.
Voici le résultat : screenshot du bug

Merci par avance de votre attention (je me rends compte que j'avais oublié les politesses).
Modifié par palmier (03 Aug 2007 - 10:51)
Bonjour,

Si je mets display:inline, les div milieu_haut et milieu_bas sont décalés tout à gauche sous firefox et sous ie6 tout le bloc central passe sous le bloc de gauche. Si je mets display:inline dans les div milieu_haut et milieu_bas alors ceux-ci disparaissent.

J'ai enlevé le bloc de droite, et le diplay:inline, et bizarrement ce coup-ci le bloc central accepte de se tenir à côté du bloc de gauche. Cependant l'espace entre les deux est beaucoup trop large comme le montre le screenshot que voici : l'espace trop large

Merci de votre attention.
Modifié par palmier (31 Jul 2007 - 11:14)
#milieu_milieu
{padding-left:10px;
padding-right:10px;}


Le probleme vient peut etre de la, ie 6 rajoute les padding a la largeur de la div, donc tas div fait 20 px de plus sous ie 6 et donc ne rentre plus au milieu et est oblige de se mettre en dessous
Essaye de les enlever peut etre ?

enfin je dis ca mais j'en sait rien je suis sur mac jai pas pu voir le bug Smiley lol
Modifié par Dynexd (31 Jul 2007 - 14:23)
Essaye de rajouter en haut de ton css : 
*{
margin:0;
paddding:0;
}

Pour formater a 0 toutes les marges
Apres test ta page en baissant tous tes padding et margin et ca devrait passer
Ca ressemble a ca ton probleme, comme tu peux le voir sur ton 2e screenshot ou tas enleve la colonne de droite, on voit que ie interprete differemment certaines de tes marges qui sont plus grandes sous ie
Modifié par Dynexd (31 Jul 2007 - 14:38)
Edition : Il restait un padding à droite. Tout est en place maintenant. Donc merci beaucoup. Le problème c'est que ma mise en page est complètement décalée maintenant. Je sais pas trop comment je vais faire.

C'est bizarre, si je laisse les padding, mais que je réduis le bloc de gauche de 160 pixels, y'a toujours le même problème. Je n'ai pourtant pas 160 pixels de padding.
Modifié par palmier (31 Jul 2007 - 15:30)
Sujet clos
Aller à