Décalage dans un div (firefox,explorer6)==>J'ai mis le lien

Bonjour à tous et toutes. En fait j'ai un petit probléme sur IE6 alors que sur firefox ma page fonctionne sans aucun problème. Mon soucis est un décalage sous l'images de tout mes div présentant les produits. Ainsi qu'un décalage d'un ou deux pixels à l'intérieur gauche de mon conteneur. Sauriez vous m'aider svp.

http://clarenne-gregory.heaj.be/travaux/travail_wathieu1/intro_wathieu.html

Voici ma Feuille de style:

h1{
margin-top:0px;
text-indent:-5000px;
}

div#conteneur{
width:800px;
margin:10px auto 0px auto;
border-top:solid 1px gray;
border-left:solid 1px gray;
border-right:solid 1px gray;
}

div#header{
margin:15px 0 15px 12px;
background:url(titre.gif) no-repeat white;
}

div#sousmenus{
background:url(ligne2.gif) repeat-y ;
float:left;
height:590px;
width:150px;
}

div#contenu{
width:800px;
height:590px;
padding-top:0px;
}

div#foot{
border-top:solid 1px gray;
border-bottom:1px solid gray;
}

p#ligne1{
text-align:right;
font-weight:bold;
font-size:12px;
padding:2px 15px 5px 0;
margin:0px;
background-image:url(ligne1.gif);
height:13px;
border-top:solid 1px gray;
border-bottom:solid 1px gray;
}

p#ligne2{
color:#159a3d;
font-weight:bold;
font-size:12px;
padding:2px 0 5px 12px;
margin:0px;
background-image:url(ligne1.gif);
height:13px;
border-top:solid 1px gray;
border-bottom:solid 1px gray;
text-align:left;
}

p#ligne1 a{
color:black;
text-decoration:none;
}

p#ligne1 a:hover{
color:#1C247F;
}

ol#menu1{
padding:0px;
margin:1px 0 1px 0;
background-color:#159a3d;
width:800px;
height:33px;
}

ol#menu1 li{
margin:0;
padding:0;
list-style-type:none;
float:left;
font-size:14px;
font-weight:bold;
}

ol#menu1 li#menu1-1 a{
width:52px;
}

ol#menu1 li#menu1-2{
height:27px;
border-right:1px solid white;
padding:6px 10px 0px 13px;
background-color:white;
width:57px;
}

ol#menu1 li#menu1-3 a{
width:60px;
}

ol#menu1 li#menu1-4 a{
width:55px;
}

ol#menu1 li#menu1-5 a{
width:54px;
}

ol#menu1 li a{
height:27px;
border-right:1px solid white;
padding:6px 10px 0px 13px;
display:block;
text-decoration:none;
color:black;
}

ol#menu1 li a:hover{
height:27px;
padding:6px 10px 0px 13px;
display:block;
text-decoration:none;
color:black;
background-color:white;
}

ol#menu2{
border-top:1px solid white;
width:150px;
background-color:#159a3d;
margin:0;
padding:0;
list-style-type:none;
font-size:14px;
}

ol#menu2 li{
border-bottom:1px solid white;
}

ol#menu2 li a{
height:15px;
display:block;
padding:2px 0 2px 11px;
text-decoration:none;
color:black;
}

ol#menu2 li a:hover{
border-left:4px solid #1C247F;
padding-left:7px;
text-decoration:none;
color:black;
background-image:url(ligne2.gif);
}

div#foot ol#menufoot{
font-family:"Courier New", Courier, monospace;
width:368px;
height:20px;
padding:0px;
margin:0 auto;
}

div#foot ol#menufoot li{
margin:0px 0 3px 0;
float:left;
list-style-type:none;
}

div#foot ol#menufoot li a{
font-size:10px;
text-decoration:none;
padding:0 14px;
color:black;
border-right:1px solid black;
}

div#foot ol#menufoot li a:hover{
font-size:10px;
text-decoration:none;
color:#1C247F;
text-decoration:underline;
}

div#foot ol#menufoot li#menu3last a{
border:none;
}

div#foot ol#menufoot li#sanslien{
margin-top:5px;
font-size:10px;
text-decoration:none;
padding:0 14px;
color:black;
border-right:1px solid black;
}

p#copyright{
margin:0 auto 0 auto;
width:300px;
font-size:12px;
}

div#contenu h2{
padding:6px 0 10px 0;
color:black;
margin:0 0px 6px 0px;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:dotted 1px black;
}

div#poubelles{
background-color:#9fd6b0;
float:right;
width:628px;
height:588px;
margin:1px;
list-style-type:none;
padding:0 10px 0 10px;
}

div#poubelles div{
float:left;
background:url(lignepoub.gif) no-repeat white;
width:200px;
}

div#poubelles #poubelle1{
margin-right:5px;
margin-bottom:10px;
}

div#poubelles #poubelle2{
margin-right:5px;
margin-bottom:10px;
}

div#poubelles #poubelle3{
margin-bottom:10px;
}

div#poubelles #poubelle4{
margin-right:5px;
}

div#poubelles li{
color:white;
font-family:Georgia, "Times New Roman", Times, serif;
padding-left:10px;
font-size:12px;
list-style-type:none;
background:url(li_arrow2.gif) no-repeat 0px 5px;
}

div#poubelles li.last{
padding-bottom:5px;
border-bottom:1px dotted white;
}

div#poubelles li.first{
padding-top:5px;
}

div#poubelles ul{
padding:0 15px 11px 15px;
background:url(lignepoub2.gif) no-repeat 0 113px #199c41;
margin:130px 0px 0px 0px;
}

div#poubelles img{
margin:2px 0 0 20px;
padding:0px;
border:none;
float:left;
}

div#poubelles h3{
color:#159a3d;
margin:0px 15px 0px 15px;
padding:0px;
float:left;
}

div#poubelles p{
margin:0 0 0 15px;
padding:0px;
font-size:13px;
float:left;
}

Et voici ma page html:

<body>
	<div id="conteneur">
		<div id="header">
			<h1>Compacto</h1>

		</div>
		<div id="menusprincipal">
			<p id="ligne1"><a href="#" title="Lien pour se connecter sur le site">Connexion</a></p>
			<ol id="menu1">
				<li id="menu1-1"><a href="index.html">Accueil</a></li>
				<li id="menu1-2">Produits</li>
				<li id="menu1-3"><a href="#">Boutique</a></li>

				<li id="menu1-4"><a href="#">Support</a></li>
				<li id="menu1-5"><a href="contact.html">Contact</a></li>	
			</ol>
		</div>
		<p id="ligne2">Produit</p>
		<div id="contenu">
			<div id="sousmenus">
				<ol id="menu2">

					<li><a href="express.html">Compacto express</a></li>
					<li><a href="#">Compacto elegante</a></li>
					<li><a href="#">Compacto designed</a></li>
					<li><a href="#">Compacto nuevo</a></li>
					<li><a href="#">Compacto light</a></li>	
				</ol>
			</div>

			<div id="poubelles">
				<h2>Compacto la poubelle intelligente</h2>
				<div id="poubelle1">
					<a href="express.html" title="Vers poubelle nuevo"><img src="nuevo.jpg" alt="Poubelle nuevo" /></a>
					<h3>Express</h3>
						<p>L'élegance aliant <br />la praticitée.</p>
						<ul>

							<li class="first">Ouverture extra large.</li>
							<li>Capacité 50 litres</li>
							<li>Acier inoxydable</li>
							<li>Fond plastique protégeant le sol</li>
							<li class="last">Dimension: base Ø 40,5 cm, H 84 cm.</li>
						</ul>

				</div>
				<div id="poubelle2">
					<a href="elegante.html" title="Vers poubelle elegante"><img src="nuevo.jpg" alt="Poubelle elegante" /></a>
					<h3>Elegante</h3>
						<p>L'élegance aliant <br />la praticitée.</p>
						<ul>
							<li class="first">Ouverture extra large.</li>

							<li>Capacité 50 litres</li>
							<li>Acier inoxydable</li>
							<li>Fond plastique protégeant le sol</li>
							<li class="last">Dimension: base Ø 40,5 cm, H 84 cm.</li>
						</ul>
				</div>
				<div id="poubelle3">

					<a href="designed.html" title="Vers poubelle designed"><img src="nuevo.jpg" alt="Poubelle designed" /></a>
					<h3>Designed</h3>
						<p>L'élegance aliant <br />la praticitée.</p>
						<ul>
							<li class="first">Ouverture extra large.</li>
							<li>Capacité 50 litres</li>

							<li>Acier inoxydable</li>
							<li>Fond plastique protégeant le sol</li>
							<li class="last">Dimension: base Ø 40,5 cm, H 84 cm.</li>
						</ul>
				</div>
				<div id="poubelle4">
					<a href="nuevos.html" title="Vers poubelle express"><img src="nuevo.jpg" alt="Poubelle express" /></a>

					<h3>Nuevo</h3>
						<p>L'élegance aliant <br />la praticitée.</p>
						<ul>
							<li class="first">Ouverture extra large.</li>
							<li>Capacité 50 litres</li>
							<li>Acier inoxydable</li>

							<li>Fond plastique protégeant le sol</li>
							<li class="last">Dimension: base Ø 40,5 cm, H 84 cm.</li>
						</ul>
				</div>
				<div id="poubelle5">
					<a href="light.html" title="Vers poubelle light"><img src="nuevo.jpg" alt="Poubelle light" /></a>
					<h3>Light</h3>

						<p>L'élegance aliant <br />la praticitée.</p>
						<ul>
							<li class="first">Ouverture extra large.</li>
							<li>Capacité 50 litres</li>
							<li>Acier inoxydable</li>
							<li>Fond plastique protégeant le sol</li>

							<li class="last">Dimension: base Ø 40,5 cm, H 84 cm.</li>
						</ul>
				</div>
			</div>
		</div>
		<div id="foot">
			<ol id="menufoot">
				<li><a href="index.html">Accueil</a></li>

				<li id="sanslien">Produits</li>
				<li><a href="#">Boutique</a></li>
				<li><a href="#">Support</a></li>
				<li id="menu3last"><a href="contact.html">Contact</a></li>	
			</ol>
		</div>
	</div>

	<p id="copyright">Copyright © 2007 Compacto Corporation. Tous droits réservés</p>
</body>

Merci d'avance pour vos réponses.
Modifié par doncho (11 Apr 2007 - 16:09)

Salut,

Il semble que le problème vient du placement de ton image servant à finir chaque bloc en angle corné.
Cette image est placée dans ta CSS ainsi :

div#poubelles ul{
padding:0 15px 11px 15px;
background:url(lignepoub2.gif) no-repeat 0 [b]113px[/b] #199c41;
margin:130px 0px 0px 0px;
}

Ton image fait 14px de haut, ce qui signifie que si ton bloc fait bien 127px de haut, l'image placée à 113px du haut arrive bien jusqu'en bas de ta div.
Par contre, si le bloc est plus petit ou plus grand, l'image quoi qu'il arrive sera soit trop haut dans le bloc, soit au contraire trop bas, et n'apparaitra donc pas. C'est ce que tu obtiens sur IE, ou la hauteur du bloc est plus grande.
Pour corriger ce problème, il te faut normalement utiliser ceci :

div#poubelles ul{
padding:0 15px 11px 15px;
background:url(lignepoub2.gif) no-repeat 0 [b]bottom[/b] #199c41;
margin:130px 0px 0px 0px;
}

Ainsi, quelle que soit la hauteur du bloc l'image restera toujours en bas.

Merci bien je vais essayer ca, je vous tiens au courant.

Et bien le problème de l'image du dessous et résolu et je t'en remercie. Mais un problème persiste entre le vert du bloc de contenu descriptif et l'image au dessus de celui-ci sous IE6, alors que sur firefox c'est nikel.

Et merci encore à toi
Modifié par doncho (11 Apr 2007 - 17:56)

doncho a écrit :
Et merci encore à toi

Bravo
Tu considères que ce sujet est [Résolu] ?

Non comme Je l'ai marqué il est partiellement résolu. Il subsiste deux problême.

1. Décalage de 1-2 pixels sur internet explorer 6 à l'intèrieur de mon conteneur à son extrême droite.

2. Un décalage a l'intérieur de chaque div de descritpion des produits. Entre le vert et l'image au dessus(bande verte dégradé) il apparait une bande blanche qui décale la description du produit vers le bas.

Sinon mon problème à été solutionner a 35 %.

Voila. Espèrons que ces derniers problèmes trouverons une solution grace à vous. Merci

Moi je connais quelqu'un qui ne sait pas encore que travailler avec des hauteurs fixes (qui plus est en pixels) pour des blocs de contenu c'est une bêtise.

Mais comme il n'est jamais trop tard pour apprendre, un peu de lecture :
- Accessibilité : Agrandissement de la taille des polices
- Typographie web : gérer la taille du texte avec les « em »

Et encore... si les blocs de contenu doivent être extensibles en hauteur, ça n'est pas qu'à cause de la gestion du texte, mais aussi tout simplement à cause des nombreux imprévus possibles (contenu trop long, problème de rendu d'un navigateur...) qui font qu'il est indispensable de garder un design suffisamment souple.

C'est bien simple : si le design n'est pas souple (comprendre : au minimum extensible en hauteur), au moindre pépin l'utilisateur ne pensera qu'une chose : « Boudiou, il est tout bizarre ce site, ça déborde dans tous les sens ».
Et ça, c'est pas un bon point.

Allez, une petite capture d'écran pour se mettre en joie ( ) :

(Et ça se passe sous Firefox 2.0)



Niveau intégration du design, le dégradé vert devrait appartenir au style de div#poubelles ul, justement pour prévoir le coup d'un texte au final pas placé pile là où on l'attendait.



Pour l'écart trop important entre les items de liste sous IE, un petit div#poubelles ul {line-height: .9em;} devrait remettre les choses d'aplomb.
Modifié par Florent V. (11 Apr 2007 - 21:34)

doncho a écrit :
1. Décalage de 1-2 pixels sur internet explorer 6 à l'intèrieur de mon conteneur à son extrême droite.

Un « doubled float-margin bug » qui affecte div#poubelles, semble-t-il.
Faire une petite recherche pour de plus amples informations.

Au passage, c'est plutôt une mauvaise idée de faire flotter à le fois le menu de gauche et le bloc de droite. On s'expose à plein d'emmerdements.
Prendre exemple sur ce modèle, mais sans la colonne de droite :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html