28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je n'arrive pas à déterminer la source d'un problème d'affichage sous IE7. Pouvez vous m'aider svp ?

http://www.sfhi.eu/accueil/accueil.php5

Voici mon code :


  <div id="page-wrap">
    <div id="inside">

          <div id="header">
      <table height="100px" width="100%" cellspacing="0" cellpadding="0">...</table>
    </div>
      <div id="left-sidebar">
          <ul id="nav">				  
            <li><a href="../accueil/accueil.php5" title="">Accueil</a></li>
            ...  
          </ul>
      </div>
  
      <div id="main-content">
...

      </div>

      <div style="clear: both;"></div>

          <div id="footer">...</div>
  
      <div style="clear: both;"></div>

  </div>




#page-wrap {
  background: white;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
	}

#page-wrap #inside {
  margin: 10px 10px 0px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
	
#main-content {
	background: url(../imgs/left-sidebar.gif) repeat-y white;
  padding: 10px 0px 10px 220px;
  min-height: 340px; 
}
	
#header {
	background: url(../imgs/grad.png) repeat-x white;
  height: 100px;
  padding: 0px;
  border-bottom: #56c 4px solid;
  margin-bottom: 10px;
}
	
#left-sidebar {
	width: 194px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}

#nav {
  width: 162px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav li {
  background: #c00;
  color: #fff;
  border: 1px solid #957e59; /*#b59e79;*/
  margin-bottom: 5px;

}

#footer {
  background: #56c;
  color: white;
  font-weight: bold;
  margin-top: 10px;
	text-align: center;
	padding: 10px 0px 10px 0px;
}


feuille de style conditionnelle pour <=ie6

#page-wrap {
	width: expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
}

#main-content {
  height: 340px; /* min-height non reconnu par IE */
}


Merci d'avance pour votre aide.

Fabien
Je suppose que tu as fait ton design au depart pour ff...
Quel est le but du padding-left de 220px ?
Merci pour ta réponse lallume.

C'est exactement ça... j'ai fait pour firefox en me basant sur un layout (celui-ci) qui fonctionnait à la base sous IE... mais plus maintenant...

Le padding-left 220px sert en fait à décaler le contenu vers la gauche, car la div "left-sidebar" (avec le menu) est censée recouvrir la div "main-content", comme c'est le cas sous Firefox.

Je n'arrive vraiment pas a comprendre ce qui cloche sachant que le problème n'existe pas sous IE6+ ni sous IE 8.