Css, FF et IE ?!

Bien le bonjour tout le monde !!

Voila ici mon premier message sur ce forum très accueillant !

J'ai un petit soucis quant à un site que je suis entraint de créer.

Outre les nombreuses différences entre Firefox et I.E déja connue je tombe façe a un problème assez gênant.

J'ai commencé la conception de mon site sur firefox et sur ie (test) et parfait, quelques différences quazi imperceptibles.. Après j'ai ignioré carrément IE (erreur!) Car maintenant je me renconte que mon menu de gauche ne saffiche plus a gauche mais tout en bas sous IE.

J'ai lu quelques post, et tuto mais je ne vois pas le hic' ...
Voilà si vous avez déja rencontré ce problème ou si vous avez des suggestions. ?

Je ne vais pas collé ici tout mes css liés pour ne pas surchargé le post.

Merci, bon dimanche !

Hello et bienvenue

Euh... la source faut la deviner ?

Bonjour & bienvenue, tashy

Ignorer IE pendant la première phase de construction de ton site n'est pas forcément une erreur, tant que tu sais ce que tu fais.

Personnellement, je construis mes pages sur Firefox, en veillant à éliminer toute erreur dans mon code (à l'aide du validateur du W3C). Une fois la page achevée, je repasse pour IE et j'ajoute les corrections dans une feuille de style dédiée, à l'aide des commentaires conditionnels. Les bugs à corriger sont souvent les mêmes, donc avec l'habitude on y arrive relativement facilement.

Bref, ce n'est pas une mauvaise méthode de travail, mais il ne faut pas s'attendre à avoir une page impeccable sous IE lors du premier affichage

Concernant ton soucis en particulier, difficile de t'aider sans avoir un peu de matière. Un exemple en ligne serait le bienvenu, ou tout au moins le code HTML & CSS qui pose problème ...
Modifié par Thomas D. (16 Dec 2007 - 14:24)

Re,

Merci déja de cette petite explication !

Je vous met le bloc qui "bouge" ^^

HTML :

<div id="blocmenu">
<div id="conteneur">
<div id="menu">
<h2>Navigation :</h2>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><br /></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
				  <li><a href="lien.php3">lien</a></li>
</div>
</div>
</div>

LE CSS

#blocmenu {
	width: 205px;
	float: right;
	margin: 0 0 25px 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555;	
	}
	
#conteneur {
	padding:0 20px;
}


#blocmenu h2 {
	font-family : Georgia, Arial, Helvetica, sans-serif;
	font-size : 12px;
	font-weight : bold;
	color:#000;
	margin:0;
	padding:30px 0 11px;
}
#blocmenu h2.hr {
	background: url(images/puce01.gif) 0 15px repeat-x;
}
	
#blocmenu h3 {
	margin: 30px 0 12px 0;
	padding: 5px 10px;
	color: #fff;
	font-size: 120%;
	border: none;
	background: #f90;
	}

#blocmenu h4 {
	font-size: 92%;
	font-weight: normal;
	margin: 0;
	}

#blocmenu img {
	vertical-align: middle;
	}

#blocmenu ul {
	margin:0;
	padding:0;
}

#blocmenu ul li {
	margin:0;
	padding:0;
	list-style: none;
	line-height:120%;
	text-indent: 10px;
	background: url(images/puce02.gif) 1px 6px no-repeat;
}
#blocmenu ul#lh li {
	padding-bottom:14px;
}
#menu h2 {
	color: #005D99;
	font-size: 1.2em;
	font-weight: bold;
	background: #fff;
	border: 1px solid #CDCDCD;
	border-width: 1px 0;
	padding: 5px 8px;
	margin: 0 0 10px 0;
}
#menu h3 {
	color: #005D99;
	font-size: 1.2em;
	font-weight: bold;
	background: #fff;
	border-bottom: 1px solid #CDCDCD;
	border-width: 1px 0;
	padding: 30px 5px 8px;
	margin: 0 0 10px 0;
}
#menu {
margin: 0px;
padding: 0px;
margin-bottom: 10px;
padding-bottom: 5px;
clear: right; 
float: right;
line-height: 1.4em;
width: 180px;
display: block;
}

#menu a:link {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;
display: block;
}

#menu a:visited {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;
display: block;
}

#menu a:hover{
color: #ffffff;
font-family: "trebuchet ms";
font-size: 12px;
text-decoration: none;
font-weight: bold;
display: block;
width: auto;
background: #ff9000;
}

#menu p {
color: #c7c7c7;
font-family: verdana;
font-size: 10px;
padding: 0px;
margin: 0px;
padding-right: 10px;
padding-left: 10px;
}

ul, li {
margin: 0px;
padding: 5px;
list-style: none;
list-style-image: none;
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
border-bottom:1px solid #C7C7C7;
color:#464646;
text-align:left;
}

Voilaa ^^

Bonjour,

Je crois qu'il serait plus facile de t'aider si ton code était un peu plus... simple.

Pour commencer, le code HTML:
- tu as 3 conteneurs div là où un seul suffirait amplement (allez, peut-être deux s'il y a des besoins de mise en page pas manifestes dans l'extrait que tu donnes);
- tu as des li qui se baladent dans la nature (sans ul ou ol).

Ensuite, côté CSS: tu dupliques du code de manière affolante, et au final ça devient illisible. Il faut penser à utiliser la cascade CSS! Il y a des propriétés qui sont héritées, il faut en tirer parti! Par exemple pour définir le style de tes liens.

Et pour finir: de toute façon, on ne peut strictement rien faire avec le code que tu donnes. Si ton menu «bouge», il bouge dans une page donnée, par rapport à d'autres éléments (sans doute parce que, dans IE, ce menu flottant n'a plus la place de se caser là où tu voudrais et donc passe à la ligne...). Où diable est cette page?

(Quand on va chez le médecin parce qu'un enfant a mal à la gorge, on n'amène pas que la gorge, on amène l'enfant entier. )

Bonsoir,
Ok, j'ai bien saisi l'idée...
Afin de ne pas donné mon code "chiant à lire" je vais un peu travaillé sur les quelques points que tu ma gentilement donné. (Cascade, hérité)

Je m'excuse d'avoir éparpillé les posts. Je suis nouveau, et je n'avais pas tout saisis dans l'ordre. (Donc => miacoulpa ^^)

Mais en gros quand tu dit que le bloc n'a pas assé de place... Tu voudrais dire que j'essaye de mettre un blog de 220px dans un emplacement de 200px ? J'ai vérifier mais ce n'est pas ce problème qui se pose ici.

Merci de tes explications, à l'avenir je tenterai de tenir compte des tes quelques recommendations d'usage

Bonne soirée, a bientot (dès que j'ai vérifié)

tashy a écrit :
Mais en gros quand tu dit que le bloc n'a pas assé de place... Tu voudrais dire que j'essaye de mettre un blog de 220px dans un emplacement de 200px ?

Oui, notamment. Ou bien que tu tentes de placer un bloc de 180px flottant à droite avec une marge de 12px à droite dans un espace de 200px, et que le Doubled Margin Bug fait que la marge de droite passe à 24px dans IE6, ce qui fait 204px pour 200px de disponible seulement.
Ou bien dans le bloc qui doit se trouver à côté du flottant tu as un élément trop large qui déborde, et le flottant ne tient plus.
Ou bien un obscur problème de HasLayout.
Ou bien...
Modifié par Florent V. (21 Dec 2007 - 23:06)