Bug CSS safari

I

Isag

Membre confirmé
30 Octobre 2005
32
0
Abidjan
igoirand.me.ht
Hello,

dans le cadre de la boite de com où je bosse, je monte le nouveau site des chocolats voisins (très connu a lyon miam c biento noel lol), et je voulais savoir si un pro du CSS avait une idée du pourquoi du comment le menu est enfoncé que sur safari !!!!

j'ai fait les test sur Firefox 1.0.7 (mac) et IE 6 (PC) et tout est impecable sur les deux.

je tiens à préciser que jai eu un mal fou, mais vraiment un TRUC de OUF à faire tout fonctionner sur IE qui interprete comme un gateux le CSS quand il arrive à en comprendre qqchose, alors que FF passe tjrs nickel les trucs. Mes découvertes pour contourner les bugs d'IE en CSS vont bientôt faire l'objet d'un post pour ceux que ça interesse sur mon blog (que grouik adore !)
http://goirand.christophe.free.fr/dotclear/

le fameux site:
http://goirand.christophe.free.fr/Site_test/voisin/

Safari étant un des meilleurs navigateurs, ça serait dommage que ce site marche pas dessus comifo !

a peluche
 
Bonjour. :)

J'ai regardé la première page du site.

La première chose qu'on voit sous Safari, c'est le "menu" qui rentre dans le div "smenuzone". La ligne de menu est plus basse que dans Firefox.

Cela provient de l'interprétation du "position:absolute; top: 36px;" du "menu" dans le fichier CSS.

Doit-on incriminer Safari ? Ce n'est pas sûr. Pour s'en convaincre, il suffit d'ajouter quelque chose (un " " ou n'importe quel autre texte) au début du "body" et avant le "menu". Et là, tout rentre dans l'ordre, parce que les deux navigateurs font la même chose... peut-être la même bêtise, mais je pense que le comportement de Safari se tient, et que c'est Firefox qui se comporte de manière illogique. Pourquoi les coordonnées absolues d'un objet dépendraient de l'existence d'un texte au début du "body" ?

Je ne parle pas de IE, parce que, là :eek: , c'est vraiment n'importe nawak !!

Et si on change la taille des caractères (ce qui est souvent le cas quand on a la vue basse et une bonne définition d'écran) ça devient encore plus compliqué.

Tous ces problèmes viennent d'une utilisation aléatoire des référentiels de coordonnées graphiques. Quand on met "position:absolute;" ou "position:relative;", il faut savoir à quoi ça correspond (absolu, dans quel référentiel ? relatif, par rapport à quoi ?), et pour chacun des navigateurs, qui de toute évidence adoptent des principes différents.

Je ne sais pas si on doit parler de bug dans ce cas.

Pour ma part, j'ai réglé un bon nombre de problèmes en bannissant autant que possible les "position:absolute;", les mélanges "relative"/"absolute", et l'idée que la taille et le positionnement des caractères était des choses prédéterminées.

Bonne continuation, et bon courage :)
 
merci pour les réponses,
j'ai trouvé le problème: pour le menu il faut mettre position relative, la le resultat est le mm sous les 3 navigateurs.

Je ne sais pas si on doit parler de bug dans ce cas
Cliquez pour agrandir...

je sais pas: en isolant tout, sauf le menu, jai vu que safai laisse une marge en haut, en laissant une position absolue et en mettant top :0px, c'est pas logique !?
 
FireStorm a dit:
en isolant tout, sauf le menu, jai vu que safai laisse une marge en haut, en laissant une position absolue et en mettant top :0px, c'est pas logique !?
Cliquez pour agrandir...
Je trouve plus logique que cette marge existe tout le temps sous Safari, alors que Firefox la fait tout de même apparaître, mais seulement quand un texte d'une ou plusieurs lignes est présent au début du "body".

Je préfèrerait donc penser que le "body" doit toujours commencer par un texte (au moins un " "), et qu'il y aura toujours une marge d'une ligne en haut de la fenêtre pour les coordonnées absolues des CSS. Ce point de vue simplifie les choses et permet d'obtenir la même mise en page pour tous les navigateurs

:)
 
Haut Bas