Pb compatibilté firefox

Fermé
Cyril - 16 nov. 2005 à 19:28
 aloneInTheDark - 17 nov. 2005 à 21:46
Bonjour,j'ai un probleme de compatibilté,mon code marche trés bien sous internet explorer 6.0 et netscape 7.0 mais pas sous firefox 5.0.
Cela doit faire un tableau qui me sert de menu avec des rollover geré par CCS.je me sert de <div> pour pouvoir placer un fond d'écran mauve et un autre fond d'écran noir juste en dessous et a coté ce qui me donne un effet de relief.Mias firefox gére mal tout ca...pouvez vous m'aider?

le probleme resemble à ca:

http://cyrille.flour.free.fr/PB/print/Ie6.0_et_firefox5.0.JPG

et le lien est :

http://cyrille.flour.free.fr/PB/Index2.htm

mon code est :

<html><head>
<style>
table tr td a{text-decoration: none;color:black;display:block;font-weight:normal;width:100%}

table tr td a:hover{text-decoration: none;color:navy;display:block;font-weight:bold;width:100%;background-image: url(Photos/rolloverfond.jpg);}

.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; height:100%;float:left;}

.boiteg {width:170px;height:50px;background-image:url(Photos/contenuboite.jpg);border: solid 2px black;position:relative;top:-3px;left:-3px;}

.ombreg {width:170px;height:50px;color:black;background-color:black;}
</style>

</head>

<body background="Photos/fondsite.jpg">
<div class="menugauche">
<div class="ombreg" >
<div class="boiteg">
<table width="100%" cellpadding="0" cellspacing="0">

<tr><td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td></tr>
<tr><td><a href="liens/menu1_1.html">La crêpe dentelle</a></td></tr>
<tr><td><a href="liens/menu1_2.html">Le secret de son origine</a></td></tr>
<tr><td><a href="liens/menu1_3.html">Technique de fabrication</a></td></tr>

<tr><td><img src="Photos/lamour%20du%20produit.gif" alt=""></td></tr>
<tr><td><a href="liens/menu2_1.html">Naissance</a></td></tr>
<tr><td><a href="liens/menu2_2.html">Evolution</a></td></tr>

<tr><td><img src="Photos/nos%20references.gif" alt=""></td></tr>
<tr><td><a href="liens/menu3_1.html">Les médias en parlent!</a></td></tr>
<tr><td><a href="liens/menu3_2.html">Les distinctions</a></td></tr>
<tr><td><a href="liens/menu3_3.html">Livre d´or des célébrités</a></td></tr>
<tr><td><a href="liens/menu3_4.html">Livre d´or du site</a></td></tr>

</table>
</div>
</div>
</div>


</body></html>
A voir également:

6 réponses

C'est encore moi, apparement firefox n'aime pas du tout ma facon d'écrire mes pages avec mes <div> car dans d'autres parties de mon site j'ai le meme probleme il arrive pas a faire la difference entre le contenant et le contenu et il m'encadre n'importe koi n'importe ou...
Personne n'a eut de problemes similaires?ou une solution pour la résoudre?
0
aloneInTheDark
16 nov. 2005 à 20:14
Salut !!!

Je pense que FF réagit correctement au code que tu as fais.

Tu utilises :
.boiteg {
height:50px
}
.ombreg {
height:50px
}


Ton div fais bien 50px de haut !!!

De plus pourquoi tant de <div> ?
Il y a aussi des paradoxes color black, background black ???
border-width: 0; ????

Tant qu'a utiliser le css, autant le faire en oubliant l'utilisation des tables sauf pour ce à quoi elles sont faites.
0
merci,oui tu avais raison j'ai indiqué 50pixels donc firefox ne me mets que 50 px de fond,mais bizarrement ie et ns s'adapte a mon tableau...

Sinon,pour ta remarque sur color black et background black, tu as raison c'est superflue,j'ai rectifié.

Pour le border-witdh=0,je le laisse car de temps en temps je mets sa valeur a 1, pour mieux voir ou se place mes <div> et mes tableaux

Sinon,pour ta remarque sur mes nombreux div...bah euh je sais pas koi dire.C'est peut etre pas le top niveau organisation mon site,mais en fait dés que je passe a un petit emsemble je mets un <div> et des que je passe a un nouvel emsemble je mets un autre div et ainsi de suite...C'est pour ca qu'il y en a bcq car j'ai decomposé ma page et mon site en de nombreuses petites parties..Je sais pas si c'est le meiux mais bon...
0
aloneInTheDark
16 nov. 2005 à 21:15
Oui, en fait IE considère height à la façon d'un min-height (propriété que seul IE ne comprends pas), et donc ne respecte pas la hauteur des blocs et les agrandis en fonction de leur contenu, ce qui n'est pas logique.

Tandis que les autres navigateurs eux considèrent les dimensions d'un block comme fixent (peu importe le contenu).
Donc, il faut utiliser height: auto , cela devrait je pense résoudre le problème.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
j'ai tout d'abord essayé d'augementer la hauteur et ca marche bien,puis j'ai essayé avec height: auto et ca marche aussi.
Mais sinon j'ai un autre pb,sous ie j'ai un effet d'ombrage en bas et a droite de mon menu j'ai une fenetre noire qui déborde un peu de 3 pixels.en mettant height:auto, cet ombre apparait aussi en bas dans netscape et firefox (avant ca apparaissait pas). Donc j'aimerais savoir comment je peux faire pour que l'ombre soit aussi apparente sur la droite du menu sous firefox et netscape. J'avais cru lire qqpart que netscape et fierefox gerait les definitions de pixels differement d'ie?
Autre question, a la suite de mes modifs sous netscape le rollover marche mais est desormais moins rapide que sous ie.C'est a dire que qd je survole un des liens, la police change tout de suite, mais l'image de fond est plus longue a se charger...y'a t'il une solution?
une derniere question pour la route (d'ordre general).Quand on fait un site internet en HTML , quelle est la meilleire facons d'organiser sa page?Pour ma part,j'ai divisé ma page en differents <div> et chaque <div> ont été definis en pixels.Est une bonne facon de faire?et le fait de mettre ca en pixels aussi?ou alors c'est mieux de mettre les dimensions des <div> en %?
Sinon merci aloneinthedark pour tes reponses et ton aide
0
aloneInTheDark
17 nov. 2005 à 21:46
Salut !

Mais sinon j'ai un autre pb,sous ie j'ai un effet d'ombrage en bas et a droite de mon menu j'ai une fenetre noire qui déborde un peu de 3 pixels.en mettant height:auto, cet ombre apparait aussi en bas dans netscape et firefox (avant ca apparaissait pas). Donc j'aimerais savoir comment je peux faire pour que l'ombre soit aussi apparente sur la droite du menu sous firefox et netscape.

Pourrais tu montrer le code et/ou la page où réside ton problème ?

J'avais cru lire qqpart que netscape et fierefox gerait les definitions de pixels differement d'ie?

Je ne pense pas quil y ait une différence à ce niveau, je n'en ai jamais rencontrés, des différences d'interprétation du css, là oui, il y en a beaucoup.

Autre question, a la suite de mes modifs sous netscape le rollover marche mais est desormais moins rapide que sous ie.C'est a dire que qd je survole un des liens, la police change tout de suite, mais l'image de fond est plus longue a se charger...y'a t'il une solution?
On peu précharger les images du rollover en css http://batraciens.net/css-astuces/pre-chargement-images-css.htm

Il y a aussi une solution en js, mais je n'en suis pas trop partisan.

une derniere question pour la route (d'ordre general).Quand on fait un site internet en HTML , quelle est la meilleire facons d'organiser sa page?Pour ma part,j'ai divisé ma page en differents <div> et chaque <div> ont été definis en pixels.Est une bonne facon de faire?et le fait de mettre ca en pixels aussi?ou alors c'est mieux de mettre les dimensions des <div> en %?

Bah là, je dirais c'est surtout relatif au contenu.
Pour ma part, je fixe d'abord mes blocs principaux <div>, ensuite un l'intérieur de ceux-ci, au besoin absolu, je rajoute d'autres <div>, ensuite les <p>, <ul>, <span>, etc...
Oui je pense que travailler en px est une bonne méthode, perso j'utilise les % et les px.

Mais ce n'est que mon avis, je ne suis pas un expert ;-)
0