28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous. Cela fait un petit bout de temps que je cherche des solutions à ce problème récurent: mon bloc "menu" et mon bloc "contenu" s'affichent mal sous IE.
La raison ? Visiblement, un float mal interpreté ou mal placé (je ne sais pas). Voyez par vous-même sur cet exemple:

http://img507.imageshack.us/img507/3403/pbielj7.th.jpg
au lieu de:
http://img507.imageshack.us/img507/5172/pbffhv3.th.jpg

Récemment, un internaute est venu me trouver après avoir constaté le problème et m'a suggéré d'utiliser un "breaker", c'est à dire un bloc dont le seul attribut serait "clear: both;". Ca n'a pas fonctionné, mais j'ai pas mal cherché dans cette direction malgré tout... Bref, quelqu'un pourrait-il m'éclairer sur mon problème ? Car il paraît que c'est vraiment "bénin", et ça me fait râler.

Voici un cartouche (très simplifié) du code que j'utilise:

CSS
#all /*Cadre gris entourant le contenu général*/
{
	width: 960px;
	min-height: 400px;
	padding: 5px;
	border: 3px solid #CCCCCC;
}

#header
{
	width: 960px;
	height: 100px;
	background-image: url("../img/gfx/header.jpg");
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

#menu /*Le bloc gauche, utilisant le float*/
{
   float: left;
   width: 150px;
   font-size: 12px;
   margin-left: 0px;
}

#breaker /* Le "breaker" que l'on m'a recommandé (mais qui ne fonctionne pas)*/
{
	clear: both;
}

#corps
{
	width: 790px;
	min-height: 520px;
	padding: 0 10px 10px 5px;
	margin-left: 160px; /* Décalage du menu */
}


HTML
<div id="all">

  <div id="header">
  </div>

  <div id="menu">
	  <? include("menu.php"); ?>
  </div>

  <div id="corps">
	  <? include($defaut); ?>
  </div>

  <div id="footer">   
  </div>

</div> <!-- Fin du cadre du site -->


J'ai cherché sur le forum avant de poser ma bête question; j'ai essayé avec "clear", "breaker", "décalage IE", etc... Je n'ai rien trouvé de vraiment semblable à mon problème.
Merci d'avance pour votre aide =)
Modifié par mOrbide (01 Nov 2006 - 21:33)
Bon ben je vais me tirer une balle en pleurant seul dans un coin...
C'était bien le "width: 790px". Ca m'apprendra à trop spécifier les tailles.

Un tout grand merci Smiley cligne Ca m'enlève un de ces poids... (sans ironie aucune).
Bonne soirée à toi, et désolé du dérangement Smiley smile



*BLAM*
Administrateur
mOrbide a écrit :
Bonne soirée à toi, et désolé du dérangement Smiley smile

Bah pas de soucis ni de dérangement, ça fait toujours plaisir de dépanner.

Par contre, tu ne vas pas partir sans marquer ton sujet comme étant [Résolu] j'espère ? Smiley cligne (relire les règles à ce sujet)
Voilà qui est fait chef Smiley smile
Par contre, je m'interroge. Car cette solution a pu résoudre mon problème sur http://morbide.be mais pas sur silkroad-france.info.
Les CSS sont pourtant similaires; je trouve ça curieux.
Administrateur
Difficile de répondre sans disséquer la structure des deux sites (or je n'ai malheureusement pas le temps).

As-tu suivi le lien que je t'ai donné vers le mode Quirks d'IE ?
Ton doctype est-il bien correct et ne fait pas passer IE en mode Quirks ?