affichage différent firefox 2 et 3
mcc
je viens de m'apercevoir que ma page d'entrée ne s'affichait pas de la
manière souhaitée avec firefox 3. Avec firefox 2 et ie6 oui.
voici le code
<div class="navmenu">
<div class="navG">
<div class="logo">Portail CIO</div>
<div class="info">Informations <br />pour l'orientation<br /> sur
internet</div>
<div class="navD">
<a href="index.php"><img src="img/gtk-home.png" title="Accueil"
alt="Accueil" /></a>
<a href="submit_site.php">
<img src="img/gedit-icon.png" title="Proposer un site"
alt="Proposer un site" /></a>
<a href="nouveautes.php"><img src="img/dialog-warning.png"
title="Nouveautés" alt="Nouveautés" /></a>
</div><!-- fin div navD -->
</div><!-- fin div navG -->
<div class="separe"> </div>
<div class="navD2">
<a href="index.php">Accueil</a>
<a href="submit_site.php">Proposer un site</a>
<a href="nouveautes.php">Nouveautés</a>
</div><!-- fin div navD2 -->
</div><!-- fin div navmenu -->
et le css
.navG {margin:0ex ;padding : 0ex ; padding-top : 2ex ;}
.logo {float : left ; margin-right : 5ex ;font-family: Verdana;
font-size:180%; color:#445544 ;; padding-top : 1ex ;}
info {float : left ; font-size:110%; color:#445544 ;}
.navD {float : right ; margin:0ex ; padding-top : 2ex ;}
.navD2 {
text-align : right ;
margin:0ex ;
padding : 0.5ex 1ex;
background : #BCCBBC ;
color : black ;
border-bottom : solid #607060 1px;
border-top : solid #607060 2px;
}
J'ai peut-être un peu trop de div imbriquées ? mais si j'en supprime, ça
saute avec ie6. Qui peut m'expliquer ce comportement ? merci
Si vous préférez voir réellement, voici l'adresse
http://portailcio.free.fr
C'est les icônes du menu qui sont bien à droite avec firefox 2 et collées
au texte à gauche avec firefox 3
--
mcc
Olivier Miakinen
Le 12/12/2008 14:34, mcc a écrit :
>
> .logo {float : left ; margin-right : 5ex ;font-family: Verdana;
> font-size:180%; color:#445544 ;; padding-top : 1ex ;}
^^
Même si cela semble valide d'après la doc, tu peux essayer de remplacer
ce « ;; » par un simple « ; » ? Il pourrait y avoir un bug dans Firefox.
> Si vous préférez voir réellement, voici l'adresse
> http://portailcio.free.fr
>
> C'est les icônes du menu qui sont bien à droite avec firefox 2 et collées
> au texte à gauche avec firefox 3
Vu. Ce serait le float:right de .navD qui ne ferait pas ce qu'il faut ?
SAM
> Bonjour,
>
> je viens de m'apercevoir que ma page d'entrée ne s'affichait pas de la
> manière souhaitée avec firefox 3. Avec firefox 2 et ie6 oui.
essaie :
.navmenu { position: relative }
.navD { position: absolute; right: 10px;
/* float : right ; margin:0ex ; */ }
mcc
> Bonjour,
>> .logo {float : left ; margin-right : 5ex ;font-family: Verdana;
>> font-size:180%; color:#445544 ;; padding-top : 1ex ;}
> ^^
> Même si cela semble valide d'après la doc, tu peux essayer de remplacer
> ce « ;; » par un simple « ; » ? Il pourrait y avoir un bug dans Firefox.
Effectivement, j'ai viré le ";" en trop. T'est-il possible de me dire si
cela change quelque chose avec FF3 ? je suis encore avec ff2 ici
> Vu. Ce serait le float:right de .navD qui ne ferait pas ce qu'il faut ?
Il semblerait mais je ne vois pas pourquoi firefox3 ne l'aime pas...
--
mcc
mcc
>> je viens de m'apercevoir que ma page d'entrée ne s'affichait pas de la
>> manière souhaitée avec firefox 3. Avec firefox 2 et ie6 oui.
>
>
> essaie :
>
>
> .navmenu { position: relative }
> .navD { position: absolute; right: 10px;
> /* float : right ; margin:0ex ; */ }
Avant d'en venir à de telles extrémités (j'évite au maximum de
positionner en absolute), j'aimerais comprendre où est mon erreur. Car je
suppose que ça vient bien d'une erreur quelque part dans le html ou le
css.
Si pas d'autre solution, j'essaierai la tienne (elle marche bien avec ff2
et ie6) mais je ne peux pas tester avec FF3 maintenant - sauf si j'arrive
à l'installer sans bousiller mon FF2 (c'est un autre problème !).
Merci de l'idée, je la garde en réserve.
--
mcc
Olivier Miakinen
>
> Effectivement, j'ai viré le ";" en trop. T'est-il possible de me dire si
> cela change quelque chose avec FF3 ?
Comme on pouvait s'y attendre, ça ne change rien. D'ailleurs tout ton
code (XHTML + CSS) passait déjà sans erreur aux validateurs.
>> Vu. Ce serait le float:right de .navD qui ne ferait pas ce qu'il faut ?
>
> Il semblerait mais je ne vois pas pourquoi firefox3 ne l'aime pas...
Les conditions d'utilisation de float m'ont toujours paru assez
nébuleuses, alors je ne saurais pas te dire ce que ça doit vraiment
faire. Je sais aussi que Firefox 2 n'implémentait pas la totalité
de CSS2 puisqu'il ne passait pas le test Acid2 ; peut-être ton code
fait-il partie des choses incorrectement implémentées, à la fois par
Firefox 2 et par Internet Explorer ?
Au fait, as-tu testé ta page avec Opera, ou d'autres navigateurs ?
mcc
> Comme on pouvait s'y attendre, ça ne change rien. D'ailleurs tout ton
> code (XHTML + CSS) passait déjà sans erreur aux validateurs.
Merci d'avoir regardé
>
>
> peut-être ton code fait-il
> partie des choses incorrectement implémentées, à la fois par Firefox 2
> et par Internet Explorer ?
Mais si c'est FF3 qui a raison, c'est que j'ai fait une erreur dans les
css, je veux bien le croire, mais je ne trouve pas laquelle. J'ai beau
relire et relire...
>
> Au fait, as-tu testé ta page avec Opera, ou d'autres navigateurs ?
Oui avec opera 9.51 et seamonkey 1.1.13, pas de problème. Pas pu tester
le moteur khtml, je n'ai pas de konqueror.
--
mcc
Pierre Goiffon
> http://portailcio.free.fr
>
> C'est les icônes du menu qui sont bien à droite avec firefox 2 et collées
> au texte à gauche avec firefox 3
Euh ça semble ok sur Fx 3.0.4 Windows, résultat similaire à IE7.
Avez-vous trouvé la solution ?
SAM
> Le Fri, 12 Dec 2008 16:22:29 +0100, SAM a écrit :
>
>
>>> je viens de m'apercevoir que ma page d'entrée ne s'affichait pas de la
>>> manière souhaitée avec firefox 3. Avec firefox 2 et ie6 oui.
>>
>> essaie :
>>
>>
>> .navmenu { position: relative }
>> .navD { position: absolute; right: 10px;
>> /* float : right ; margin:0ex ; */ }
>
> Avant d'en venir à de telles extrémités (j'évite au maximum de
> positionner en absolute),
Ben on fait c'qu'on peut sans toucher au HTML ;-)
Bon, alors tt simplement, vire le float:left; de navG
c'est OK pour mon FF.3
(merci FireBug et son édition à la volée des CSS)
(quelle idée ! faire flotter un truc qui doit occuper tte la largeur !)
La prochaine fois nomme tes classes autrement, qu'on capte bien que navG
et navD ne sont pas au même niveau d'imbrication ;-)
--
sm
SAM
Sur mon FF.3.0.4 Mac, non les 3 icones ne sont pas contre le bord droit
du view-port (ou du body elastique)
Voici :
Le conteneur (navG) est en float:left;
ce devrait être équivalent à position: absolute;
pour le calcul de sa largeur.
Ce conteneur est donc réduit en largeur au total des largeurs des
éléments inclus.
On a beau flotter à droite on reste bloqué dans ces limites et navD ne
peut se coller à droite du body (ou du sur-conteneur)
La solution est donc de redonner une largeur normale à ce conteneur.
(en supprimant float:left; de navG qui n'aurait jamais dû y être,
puisqu'à côté il ne semble rien il y avoir d'autre à faire glisser.
Ça doit être un reste d'essais ?)
Enfin ... j'analyse ça comme ça.
--
sm
toujours tout vérifier, croiser, mettre en doute
Olivier Miakinen
>
> La solution est donc de redonner une largeur normale à ce conteneur.
> (en supprimant float:left; de navG qui n'aurait jamais dû y être,
> puisqu'à côté il ne semble rien il y avoir d'autre à faire glisser.
C'est ce que je voulais vérifier, mais le temps que je réinstalle Web
Developer pour FF3 mcc a dû déjà tenir compte de ta solution. En tout
cas, maintenant ça marche.
mcc
>
> je viens de m'apercevoir que ma page d'entrée ne s'affichait pas de la
> manière souhaitée avec firefox 3. Avec firefox 2 et ie6 oui.
>
la même erreur...
> Bon, alors tt simplement, vire le float:left; de navG c'est OK pour mon
> FF.3
> (quelle idée ! faire flotter un truc qui doit occuper tte la largeur !
> Ça doit être un reste d'essais ?)
Absolument, au départ navG et navD étaient côte à côte et navD non inclus
dans navG.
Depuis le changement, ça n'avait aucun sens et c'est bien ça qui
merdoyait. (et je ne sais plus pourquoi j'ai modifié, peut-être IE ?)
Entre temps, j'étais partie chercher un portable avec FF3 pour vérifier
mais tout le monde est d'accord : y'a plus de problème.
Et voilà un week-end qui s'annonce plus cool :) Merci !
--
mcc
Sergio
> J'ai peut-être un peu trop de div imbriquées ? mais si j'en supprime, ça
> saute avec ie6. Qui peut m'expliquer ce comportement ? merci
>
> Si vous préférez voir réellement, voici l'adresse
> http://portailcio.free.fr
>
> C'est les icônes du menu qui sont bien à droite avec firefox 2 et collées
> au texte à gauche avec firefox 3
Je viens de tester avec :
FF 3.0.4 sous XP et Ubuntu 8.10
IE 7 sous XP
IE 6 sous W2000
Safari 3.2 sous XP
Je ne vois pas de différences... Assez joliment fait d'ailleurs.
--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
mcc
>
> Je viens de tester avec :
> FF 3.0.4 sous XP et Ubuntu 8.10
> IE 7 sous XP
> IE 6 sous W2000
> Safari 3.2 sous XP
>
> Je ne vois pas de différences... Assez joliment fait d'ailleurs.
Oui, le problème est maintenant résolu, mais tu me permets de savoir que
cela va aussi avec safari et IE7, c'est bon.
--
mcc