[CSS] Propriétés de positionnement et Firefox 2

[Membre supprimé 2]

Bonjour à tous

Je paye un cornet de frites à celui qui m'apporte la solution
Je viens de me creuser l'esprit pendant 3 heures, sans succès :hein:

Mon problème concerne la propriété de positionnement "top" sur Firefox 2 (je n'ai aucun problème sur Safari, IE7 et autres navigateurs).

Voici ma page personnelle et ma feuille.

Capture #1: en réglant le "top" de #nav a 77px, mon menu est ok sur Safari, mais pas sur Firefox.

Capture #2: en réglant le "top" de #nav a 61px, mon menu est ok sur Firefox, mais plus sur Safari.

Mozilla a apparement changé un paramètre depuis la v2, car ce menu s'affichait correctement sur Firefox 1 avec le top réglé a 77px.

D'avance un grand merci, et bon week-end

 

[p4bl0]

j'ai aussi eu ce genre de problème.
En fait firefox tiens compte de la position dans le html, essaye de changer l'ordre d'apparition dans le fichier html (ou dans la fonction PHP qui génère le html).
La situation que je te décris je l'ai rencontré plusieurs fois notamment quand il y a des éléments floattants dans la page.
Donc essaye de mettre #nav avant l'élément précédent ou après l'élément suivant (selon ce qui reste logique).


EDIT :
En fait je voit que ce n'est pas un élément flottant ni #nav ni ce qu'il y a avant, c'est des div en position absolute, j'ai ce même problème sur mon site avec le menu (le même que toi, celui qui est dans le haut de page).
Sur Mac il s'affiche bien dans tout les navigateur, et dans le même firefox et le même opera mais sur windows il est décalé de 1 pixel du coup l'effet d'onglet ne marche plus (on voit tout le temps une bordure en bas du lien, même quand c'est la page actuelle)...

C'est chiant ces truc...
J'y ai en parti remédié en n'utilisant plus de position absolute pour ce menu : en fait c'est le height du titre au dessus qui le pousse vers le bas.
Mais j'ai toujours ce problème sur firefox windows par contre plus sur Opera windows il me semble.
Sous Linux ça marche avec Konqueror mais avec Firefox ça plante comme sur windows.

En tout cas c'est ce problème qui m'a fait découvrir que Firefox version 2.0.0.1 sous win et Firefox 2.0.0.1 sous Mac le rendu n'est pas pareil :mouais: :o

 

[Anonyme]

Bon. J'ai fait joujou avec firebug… J'ai enlevé le positionnement absolu, le top, le left, j'ai joué avec une marge négative et c'est bon dans Firefox (dans safari je sais pas) :

#nav {
    background: transparent none repeat scroll 0%;
    font-family:"Lucida Grande","Lucida Sans",verdana,arial,sans-serif;
    font-size:10px;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    height:22px;
    line-height:20px;
    margin:-15px 0pt 0pt;
    padding:2px 0pt 0pt;
}

Voili-voilou…

P.S. : la hiérarchie des titres n'est pas bonne…

 

[Anonyme]

Tiens, j'ai pas fait attention, mais tu utilises des points (pt) comme unité de mesure. Le point est une unité typographique qui doit être utilisée uniquement sur les médias print et pas pour l'affichage à l'écran.

 

[Benjamin D.C.]

Bonjour à tous

Je paye un cornet de frites à celui qui m'apporte la solution
Je viens de me creuser l'esprit pendant 3 heures, sans succès :hein:

Mon problème concerne la propriété de positionnement "top" sur Firefox 2 (je n'ai aucun problème sur Safari, IE7 et autres navigateurs).

Voici ma page personnelle et ma feuille.

Capture #1: en réglant le "top" de #nav a 77px, mon menu est ok sur Safari, mais pas sur Firefox.

Capture #2: en réglant le "top" de #nav a 61px, mon menu est ok sur Firefox, mais plus sur Safari.

Mozilla a apparement changé un paramètre depuis la v2, car ce menu s'affichait correctement sur Firefox 1 avec le top réglé a 77px.

D'avance un grand merci, et bon week-end

Ben même chose que sur alsacreations: pourquoi un positionnement absolu? Je n'ai pas regardé la source, c'est pour une modification de l'ordre des éléments dans le code xhtml?

 

[p4bl0]

Tiens, j'ai pas fait attention, mais tu utilises des points (pt) comme unité de mesure. Le point est une unité typographique qui doit être utilisée uniquement sur les médias print et pas pour l'affichage à l'écran.

Je pensais qu'au contraire on nous encourageait a utiliser le pt pour les tailles de police même dans le media screen.
Ceci étant justifié par le fait que les tailles en pixel, c'est cool pour que ledesign ne bouge pas, mais pour les gens qui ont une très grande résolution si on fixe la taille à 10px ils ne verront rien (trop petit) alors que si on avait mis 9pt par exemple la taille serait la même partout indépendamment de la résolution du visiteur.


Mais peut-être aussi que c'était un article en anglais et qu'en fait je me suis embrouillé (pourtant ça parait logique ce que je raconte) :heu: :rateau:

 

[Benjamin D.C.]

Je pensais qu'au contraire on nous encourageait a utiliser le pt pour les tailles de police même dans le media screen.
Ceci étant justifié par le fait que les tailles en pixel, c'est cool pour que ledesign ne bouge pas, mais pour les gens qui ont une très grande résolution si on fixe la taille à 10px ils ne verront rien (trop petit) alors que si on avait mis 9pt par exemple la taille serait la même partout indépendamment de la résolution du visiteur.


Mais peut-être aussi que c'était un article en anglais et qu'en fait je me suis embrouillé (pourtant ça parait logique ce que je raconte) :heu: :rateau:

Oui, effectivement, tu n'as pas du tout bien comprendre (ou bien, l'article est bien mauvais!). Un peu de lecture, en français cette fois :
Comment définir la taille du texte en ems (traduction).

 

[Anonyme]

Je pensais qu'au contraire on nous encourageait a utiliser le pt pour les tailles de police même dans le media screen.
Ceci étant justifié par le fait que les tailles en pixel, c'est cool pour que ledesign ne bouge pas, mais pour les gens qui ont une très grande résolution si on fixe la taille à 10px ils ne verront rien (trop petit) alors que si on avait mis 9pt par exemple la taille serait la même partout indépendamment de la résolution du visiteur.


Mais peut-être aussi que c'était un article en anglais et qu'en fait je me suis embrouillé (pourtant ça parait logique ce que je raconte) :heu: :rateau:

L'affichage des caractères en points risque d'être très variable d'un système à l'autre. Le mieux c'est d'utiliser les em et éventuellement les px pour le placement des éléments au pixel près (quoiqu'un design fluide est toujours mieux).

source : jdn

 

[Benjamin D.C.]

Le mieux c'est d'utiliser les em et éventuellement les px pour le placement des éléments au pixel près (quoiqu'un design fluide est toujours mieux).

Pour être vraiment pointilleux, l'idéal n'est pas d'utiliser des ems particulièrement, mais bien des unités relatives. D'ailleurs, je favorise pour ma part plutôt l'utilisation des pourcentages.
Pour ce qui est des designs fluides, je ne suis pas tout à fait d'accord, mais c'est un autre débat.

 

[p4bl0]

L'affichage des caractères en points risque d'être très variable d'un système à l'autre. Le mieux c'est d'utiliser les em et éventuellement les px pour le placement des éléments au pixel près (quoiqu'un design fluide est toujours mieux).

source : jdn

OK.

Je viens de faire des test et chez moi et 1em = 10pt.
J'ai de la chance ou c'est partout pareil ?

EDIT : en fait ça marche partout sauf dans le font-size de body...

EDIT2 : bon ignorez ce message : il est hors sujet et n'aide pas à résoudre le problème de tumb puis de toute façon je vais rester en pt parce que les em ça change en fonction du navigateur et quand je vois que je trouve la police trop petite dans Firefox et trop grande dans Safari avec la même feuille de style je laisse tomber :rateau:

 

[Anonyme]

Pour être vraiment pointilleux, l'idéal n'est pas d'utiliser des ems particulièrement, mais bien des unités relatives. D'ailleurs, je favorise pour ma part plutôt l'utilisation des pourcentages.
Pour ce qui est des designs fluides, je ne suis pas tout à fait d'accord, mais c'est un autre débat.

OK.

Je viens de faire des test et chez moi et 1em = 10pt.
J'ai de la chance ou c'est partout pareil ?

EDIT : en fait ça marche partout sauf dans le font-size de body...

EDIT2 : bon ignorez ce message : il est hors sujet et n'aide pas à résoudre le problème de tumb puis de toute façon je vais rester en pt parce que les em ça change en fonction du navigateur et quand je vois que je trouve la police trop petite dans Firefox et trop grande dans Safari avec la même feuille de style je laisse tomber :rateau:

Je me suis planté dans le terme, je n'aurais pas du utiliser Design fluide. En fait, un em, c'est en typographie ce qu'on appelle un cadratin (em space en anglais), un espace fixe qui, dans un texte en corps 12, prendra exactement 12 points de hauteur sur 12 points de large (et pas la largeur d'un M comme on le lit souvent). Vous pouvez d'ailleurs voir la taille que prend cet espace avec les tirets :

• sur cadratin : — (alt trait d'union)
• sur demi-cadratin : – (alt-majuscule trait d'union)

Comme expliqué dans le billet de Laurent Denis la valeur de l'em dépend des préférences de l'utilisateur dans son navigateur (16 par défaut). Une personne ayant des problèmes de vue pourra par exemple mettre une valeur de 36 et si votre site est conçu avec des unités relatives (em ou &#37 tout s'agrandira. Si dans le même temps vous donnez également des largeurs d'éléments en em, ils s'agrandiront aussi. Par exemple le menu de gauche fait 10 em de large (soit 160 pixel par défaut) tandis que chez la personne malvoyante il fera 360 pixel de large. Mais là je rejoint dcz_ sur l'utilisation des % ou un mix des 2.

Exemple : le site de pompage.net, avec des styles fixes/relatifs pour l'écran et des styles en points pour l'impression (faites un aperçu avant impression sur un article pour voir le résultat à l'écran ).


Bon j'arrête de flooder et de bousiller le fil de tumb.


P.S. : p4bl0 ton probl&#232;me serait peut-&#234;tre d&#251; au fait que tu as du texte directement dans le body et pas entre balises <p>.

P.S. bis : il est possible de taper directement des cadratins, fines, etc, sur un site en UTF-8, via la palette de caract&#232;re de Mac OS X, sinon en utilisant les entit&#233;s.

 

[p4bl0]

P.S. : p4bl0 ton problème serait peut-être dû au fait que tu as du texte directement dans le body et pas entre balises <p>.

Non non il n'y a rien directement dans le body de mon site, mais il y a vraiment trop de différence entre les tailles de police par défaut des différents navigateurs ! (entre safari et firefox par exemple).

Le design de mon site est en partie fluide. Il y a quand même un min-width pour le contenu et un min-width et un max-width pour la bar sur le coté.
La barre du haut est de taille fixe par contre.

Enfin bref je verrais comment arranger tout ça, mais ça ne résout pas la question de tumb (qui a en plus un horrible thème firefox :rateau: ).

 

[Anonyme]

Enfin bref je verrais comment arranger tout &#231;a, mais &#231;a ne r&#233;sout pas la question de tumb (qui a en plus un horrible th&#232;me firefox :rateau: ).

Ben je lui en ai donn&#233; une de solution, le probl&#232;me c'est que je ne l'ai pas test&#233;e dans safari car faite en direct-live dans firefox.

 

[Membre supprimé 2]

Merci à tous les 3, et désolé pour le délai (j'ai 9 heures de moins qu'en France).

Gloup Gloup : le code que tu me donnes fonctionne en effet très bien sous Firefox, mais pas sur Safari: problème équivalent à la capture #2.

P4blo:

En fait firefox tiens compte de la position dans le html, essaye de changer l'ordre d'apparition dans le fichier html (ou dans la fonction PHP qui génère le html).

Je crois qu'on tient une piste. Il arrive quelque chose de stupéfiant sur mon site:
toutes les pages statiques en Xhtml ont le même problème, mise à part le blog qui est généré dynamiquement par Dotclear et qui s'affiche aussi bien avec Safari qu'avec Firefox.
La feuille de style est exactement la même, Firefox, interpreterait donc une page différemment si elle est statique ou dynamique ?

Dcz: je viens de supprimer les positions absolute juste pour faire un test, et le problème persiste.

 

[Benjamin D.C.]

Dcz: je viens de supprimer les positions absolute juste pour faire un test, et le problème persiste.

Bon bon bon... Je suis d'humeur généreuse, alors en gros:

HTML

<div id="header">

<div class="wrap">
<h1>Fabien Egot</h1>
<p>30 Dec. 2006</p>
</div>

</div>

<div id="menu">

<ul class="wrap">
<li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li>
<li><a href="#">Onglet 4</a></li>
<li><a href="#">Onglet 5</a></li>
</ul>

</div>

<div class="wrap">

... contenu principal ...

</div>





CSS

* {margin:0; padding:0; border:none;}

#header {background:#333; padding:10px 0 35px; overflow:auto; color:#fff;}

ul {list-style:none;}

.wrap {width:960px; margin:0 auto; overflow:auto;}

h1,#menu li {float:left;}

h1+p {float:right;}

#menu {background:#ccc; margin-bottom:50px;}

#menu a {display:block; background:#aaa; padding:5px 8px; margin-right:10px;}

Bonne continuation

 

[Membre supprimé 2]

Pour &#234;tre vraiment pointilleux, l'id&#233;al n'est pas d'utiliser des ems particuli&#232;rement, mais bien des unit&#233;s relatives.

Excuses-moi de t'avoir r&#233;pondu sans avoir pris le temps de regarder la feuille en d&#233;tail. Il s'agissait bien d'un probl&#232;me li&#233; aux unit&#233;s relatives. Merci beaucoup pour ton aide.