affichage diff

Le
mcc
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.

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>&nbsp;&nbsp;&nbsp;

<a href="submit_site.php">

<img src="img/gedit-icon.png" title="Proposer un site"
alt="Proposer un site" /></a>

&nbsp;&nbsp;&nbsp;

<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">&nbsp;</div>

<div class="navD2">
<a href="index.php">Accueil</a>&nbsp;&nbsp;&nbsp;

<a href="submit_site.php">Proposer un site</a>&nbsp;&nbsp;&nbsp;

<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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22061141
Le 12/12/08 2:34 PM, mcc a écrit :
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 ; */ }
Olivier Miakinen
Le #22061131
Bonjour,

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 ?
mcc
Le #22061121
Le Fri, 12 Dec 2008 16:24:48 +0100, Olivier Miakinen a écrit :

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
Le #22061111
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), 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
Le #22061101
Le 12/12/2008 16:47, mcc a écrit :

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
Le #22061091
Le Fri, 12 Dec 2008 17:04:58 +0100, Olivier Miakinen a écrit :


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
Le #22061081
mcc wrote:
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 #22061041
Le 12/12/08 5:53 PM, Pierre Goiffon a écrit :
mcc wrote:
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 ?



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
Le #22061031
Le 12/12/2008 18:26, SAM a écrit :

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
Le #22061021
Le 12/12/2008 14:34, mcc a écrit :
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.




Merci SAM pour la solution. Je la recopie ici au cas où d'autres feraient
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
Publicité
Poster une réponse
Anonyme