28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème de rendu incompréhensible...

Il s'agit de 2 colonnes et évidement ie6-7 ne donne pas le bon rendu.

Plus fort encore, si on enregistre la page en local, ça fonctionne......

Voici les captures (IE 8 fonctionne bien).


Voici mon code :

html:

<div id="cols">
<div id="left-sidebar">menu</div>
<div id="main-content">contenu</div>
</div>


css générique:

#cols {
  display: table;
  width: 936px;
	background: url(../imgs/left-sidebar.gif) repeat-y white;
}

#main-content {
  display: table-cell;
  vertical-align: top;
  width: 740px;
  padding: 10px 0px 10px 15px;
  min-height: 340px;
}
	
#left-sidebar {
  display: table-cell;
  vertical-align: top;
	width: 194px;
	padding: 15px 0 100px 0;
}


css spécial IE (commentaires conditionnels):

#cols {
	overflow: visible;
	height: 1%;
}

#left-sidebar {
	float: left;
}

#main-content {
  float: right;
  width: 725px;
  padding-left: 0;
}


Merci d'avance pour vos réponses,

Fabien
Modifié par Tony Monast (27 Jun 2009 - 17:01)