[Résolu] Décalage de blocs avec <option> sur Firefox

Bonjour à tous !

Toute nouvelle parmi vous je viens vous demander votre aide afin de régler un problème que j'ai et que j'ai pas réussir à résoudre (malgré de nombreuses recherches grâce à mon ami Google).

Voici ma page html (épurée):

<div id="global">
	<div id="header">
			
	</div>
	<div id="contenu">
	
		<div id="content">

			<select name="" size="1">
			  <option>texte 1</option>
			  <option>texte 2</option>
			  <option>texte 3</option>
			</select>	
						
		</div>
		
		<div id="annexes">
		
			<div id="menu">
				<ul>
					<li><a href="">Lien</a></li>
					<li><a href="">Lien</a></li> 
					<li><a href="">Lien</a></li>
				</ul>
			</div>
		</div>
		
	</div>
	
	<div id="footer">
		All right reserved.
	</div>
</div>

et un morceau de ma feuille de style :

div#global{
width:850px;
text-align:left;
font-size:70%;
height:auto !important;
height:600px;
min-height:600px;
margin:0 auto;
}

	div#global div#header{
	height:100px;
	width:850px;
	background-color:#CC0066;
	}
	
	div#global div#contenu{
	height:auto !important;
	height:480px;
	min-height:480px;
	width:850px;
	border-top:2px solid #eaeade;
	display:table;
	background-image:url(../images/fond.gif);
	background-repeat:repeat-y;
	}
	
			
		div#global div#contenu div#content{
		float:left;
		height:auto !important;
		height:460px;
		min-height:460px;
		width:578px;
		background-color:#d4d0cd;	
		padding:10px;	
		border-right:2px solid #eaeade;
		text-align:justify;
		display:inline;
		}
		
			
		div#global div#contenu div#annexes{
		float:left;
		height:auto !important;
		height:480px;
		min-height:480px;
		width:250px;
		background-color:#c1beb9;
		color:#2e2e2e;
		display:inline;
		}
		
	
	div#global div#footer{
	clear:both;
	height:18px;
	width:850px;
	background-color:#979797;
	color:#FFF;
	border-top:2px solid #afaca7;
	text-align:center;
	padding:4px 0 0 0;
	}

select{
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
border:1px solid #969696;
padding:0;
height:18px;
font-size:100%;
color:#302E2F;
}

Le problème : sous IE tout fonctionne comme je le souhaite, mais sous Firefox : le fait de mettre les balises <option> (liste déroulante) me décale mon bloc de droite en dessous du bloc de gauche. Je n'ai aucune idée du pourquoi du comment. Moi qui suis une pro Firefox, pour le coup... je sèche...

Pour être peut être plus claire :
Sur Firefox :
Sur IE :


Merci de vos futures réponses, qui j'espère pourront m'aider

A bientôt !
Modifié par lisouille (21 May 2007 - 09:11)

Bonjour,

Sans vouloir te vexer et en restant politiquement correct, la css est comment dire assez "confuse"

div#global{
	width:850px;
	text-align:left;
	font-size:70%;
	min-height:600px;
	margin:0 auto;
}

div#header{
	height:100px;
	background-color:#CC0066;
	}

div#contenu{
	overflow: hidden;
	border-top:2px solid #eaeade;
	background: lime;
	}

div#content{
	float:left;
	min-height:460px;
	width:578px;
	background-color:#d4d0cd;	
	padding:10px;	
	border-right:2px solid #eaeade;
	text-align:justify;
	}

div#annexes{
	float:left;
	min-height:480px;
	width:250px;
	background-color:#c1beb9;
	color:#2e2e2e;
	}

div#footer{
	clear:both;
	height:18px;
	background-color:#979797;
	color:#FFF;
	border-top:2px solid #afaca7;
	text-align:center;
	padding:4px 0 0 0;
	}

select{
	font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
	border:1px solid #969696;
	padding:0;
	height:18px;
	font-size:100%;
	color:#302E2F;
}

Il y a surement encore à "gratter" mais ...

Salut,

arf plus rapide que moi ghost,

ouh boudiou la css ! Lisouille, je vois que tu as des soucis de ciblage.

j'ai corrigé ta css ainsi :

body { 
 text-align: center 
}
#global{
 font-size: 70%;
 text-align: left;
 margin: 0 auto;
 width: 850px 
}
#header {
 background-color: #cc0066;
 height: 100px 
}
#contenu  {
 border-top: 2px solid #eaeade 
}
#content{
 border-right:2px solid #eaeade;
 background-color: #d4d0cd;
 padding: 10px; width: 578px;
 float: left 
}
#annexes {
 color: #2e2e2e;
 background-color: #c1beb9;
 margin-left: 578px 
}
#footer { color: #fff;
 background-color: #979797;
 text-align: center;
 padding: 4px 0 0;
 height: 18px;
 clear: both;
 border-top: 2px solid #afaca7 
}
select{
 font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
 border:1px solid #969696;padding:0;
 height:18px;
 font-size:100%;
 color:#302E2F;
}
ul {
 margin: 0 
}
li {
 list-style-type: none 
}

++
Modifié par Nolem (21 May 2007 - 02:36)

Hello!

Je ne comprends pas ce que tu entends par "problèmes de ciblages"?... Je n'ai jamais de problème en travaillant comme ça... ça m'a permis d'ailleurs de régler certains problèmes entre navigateurs, m'enfin... dis m'en plus Nolem si ça ne te dérange pas...

Sinon mon problème est résolu, cela venait du "display:table" du div#content... D'ailleurs je l'ai juste enlevé et le reste fonctionne correctement...

Merci d'avoir répondu aussi vite en tout cas !

A bientôt!

Salut,

Si tu regardes bien les deux css (ghost et moi), on va directement sur le div concerné. On utilise pas un chemin absolu. Ainsi, les navigateurs comprennent mieux les instructions et vont également plus vite.

Par contre, quand tu veux faire une instruction dans un div sur un element précis, tu fais comme ceci :

exemple :

#menu li a {
blabla;
blabla;
}
#menu li a:hover {
blablabla;
blablabla;
}

Ton codage en soit n'est pas tout à fait faut mais plus long à la compréhension pour la relecture du codeur et du navigateur. Autant aller droit au but, n'est ce pas ?

++

Nolem a écrit :
Ainsi, les navigateurs comprennent mieux les instructions et vont également plus vite.

Oh... La belle légende urbaine ! Pur sucre, celle-là

Nolem a écrit :
On utilise pas un chemin absolu.

La notion de «chemin absolu» n'a strictement rien à voir avec les sélecteurs CSS.

Nolem a écrit :
Ainsi, les navigateurs comprennent mieux les instructions et vont également plus vite.

Je serais tenté, comme Laurent, d'affirmer que c'est une légende. Mais comme c'est la première fois que je l'entends, je ne suis pas sûr de pouvoir lui décerner le statut légendaire. Je me contenterai donc d'affirmer que c'est une bêtise.

Quant à la compréhension par le codeur (c'est à dire l'auteur de la feuille de style et ceux qui pourraient être amenés à y jeter un oeil, voire à la modifier), l'argument me semble également faible. Le fait d'utiliser un sélecteur tel que div#global div#footer peut, à la rigueur :
- renseigner sur le fait que div#footer est un enfant ou descendant de div#global ;
- poser problème (styles inactifs) si jamais div#footer est déplacé en dehors de div#global (dans le code HTML, s'entend).