Problème firefox 3

Bonjour à tous .

Voila je vous explique le problème.

Mon site internet est : www.guide-geothermie.org

Le problème se situe au niveau de mes images en roll over .

Tout marche parfaitement sous ie5 / 6 / firefox 2.0 etc sauf sous ce fameux FF3 :'(

je m'explique :

voici un de mes rollover de couleur :

#menu .rouge a:link, #menu .rouge a:visited {
    display: block;
    height: 46px;
    line-height: 46px;
    text-decoration: none;
	text-align:left;
    background: url(../images/bt/bt_rouge.jpg) no-repeat;
	color:#000;
	font-weight:700;
	font-size:15px;
	padding-left:10px;
}

#menu .rouge a:hover, #menu .rouge a:active {
    background: url(../images/bt/bt_rouge.jpg) 0 -47px no-repeat;
    padding: 0px 0px;
	color:#FFFFFF;
	padding-left:10px;
}

et voila le resultat sous FF3 qui me modifie completement l'aspect de mon CSS :

#menu .rouge a:link, #menu .rouge a:visited {
background:transparent url(../images/bt/bt_rouge.jpg) no-repeat scroll 0% 0%;
color:#000000;
display:block;
font-size:15px;
font-weight:700;
height:46px;
line-height:46px;
padding-left:10px;
text-align:left;
text-decoration:none;
}
#menu .rouge a:hover, #menu .rouge a:active {
background:transparent url(../images/bt/bt_rouge.jpg) no-repeat scroll 0pt -47px;
color:#FFFFFF;
padding:0px 0px 0px 10px;
}

Modifié par emino (25 Jun 2008 - 08:16)

Bonjour,

Si tu regardes bien ton site, tu peux voir que ton li commence sous le bord gauche de ton animation Flash. Si tu enlèves ton animation Flash, tes background vont apparaître à gauche de ton site.

J'espère que cette indice peut déjà bien t'avancer

Bonne journée.

Bonjour,

MAIS POURQUOI TU CRIES?

Merci d'éditer le titre de ton sujet en éditant ton 1er message

Felipe

Bonjour,

Ah ça, quand un navigateur se met à faire les choses proprement en corrigeant ses propres bugs, ça peut surprendre.
Firefox 3 rejoint donc Opera et sans doute Safari (à confirmer pour ce dernier) dans les rangs des navigateurs qui traitent correctement ce cas de figure. Je m'étonne d'ailleurs que tu n'aies pas remarqué cette similitude de comportement lors de tes tests avec Opera (par exemple la dernière version en date, la 9.5).

a écrit :
et voila le resultat sous FF3 qui me modifie completement l'aspect de mon CSS

Le code CSS tel qu'affiché par des outils pour développeurs (notamment Firebug) n'est pas un «résultat» mais un aperçu de la manière dont le code est interprété par le navigateur. Tu remarqueras que ce code que tu cites est strictement équivalent au code CSS écrit dans ta feuille de styles.

D'accord , merci a tous pour ces explications ... en effet je suis passé par firebug .

Je vais modifier tout cela .

Felipe , désolé pour le Capslock , fin de journée j'ai pas regardé ... pardon

Ha j'arrive pas a trouver une solution ... Je cherche , je modifie les float , je clear etc , mais non :'(

 <!-- BANNIERE FLASH -->
	        <div class="left">
		        <!-- Diaporama -->
				<object type="application/x-shockwave-flash" data="dewslider.swf?xml=source.xml&amp;transition=fade&amp;speed=20&amp;timer=5&amp;showbuttons=1" width="524" height="368"><param name="movie" value="dewslider.swf?xml=source.xml&amp;transition=fade&amp;speed=20&amp;timer=5&amp;showbuttons=1" /></object>

	        </div> 
	           
	         <!-- MENU -->       
	        <ul id="menu">   
	       		  <li class="marron"><a href="geothermie/historique.html">Historique</a></li> 
				  <li class="violet"><a href="geothermie/principe-geothermie.html">Le principe de la g&eacute;othermie</a></li>
				  <li class="orange"><a href="geothermie/pompe-a-chaleur.html">Les pompes &agrave; chaleurs</a></li>
				  <li class="bleu"><a href="geothermie/utilisation-geothermie.html">Quelles utilisations ?</a></li>
				  <li class="vert"><a href="geothermie/solution-ecologique.html">Une solution &eacute;cologique</a></li>
				  <li class="rouge"><a href="geothermie/geothermie-chez-moi.html">La g&eacute;othermie chez moi</a></li>
				  <li class="neutre"><a href="geothermie/temoignages.html">T&eacute;moignages</a></li>
			</ul>

en effet , j'ai des problème juste avec FF3 / OPERA / SAFARI

emino a écrit :
Felipe , désolé pour le Capslock , fin de journée j'ai pas regardé ... pardon

Il n'est pas trop tard pour bien faire et pour modifier ton titre en éditant ton premier message.

Concernant ton problème, il me semble qu'un simple margin-left:540px; (environ) sur ton <ul> (#menu) devrait suffire...
Modifié par Heyoan (24 Jun 2008 - 10:57)

Merci , Tout marche parfaitement ...



Maintenant je voudrais comprendre pourquoi faut t'il mettre margin-left:540px; ?


Le float est interprété differement suivant les navigateur .

emino a écrit :
Maintenant je voudrais comprendre pourquoi faut t'il mettre margin-left:540px; ?

Et bien je ne suis pas sûr que cette explication soit la meilleure mais on me contredira si je me gourre-je :

Le float sur ta div class="left" sort l'élément du flux et tous les éléments inline du conteneur (div class="bloc_content") sont repoussés vers la droite pour lui laisser la place. Or aucun de ces éléments n'est de type inline (<ul>, <li> et <a> avec un display:block;). Il ne reste donc plus que les libellés à l'intérieur des liens qui soient effectivement décalés. Avec FF2, l'image en background que tu as placée (par défaut en top left) sur les liens est elle aussi décalée mais FF3 corrige le tir car en fait les balises <a> prennent concrètement toute la place disponible (la largeur de ta div class="bloc_content" moins les padding) et l'image en background se retrouve bien en top left et donc sous ton animation flash. A la place du margin-left tu aurais pu placer les background en top right mais cette solution me semble plus compliquée .

L'explication est bonne.