[résolu]C'est bon avec ie et FF mais gros pb avec safari

Bonjour

J'ai refait completment le design de mon site
www.guidanceloire.org
et c'est pas mal avec IE et firefox (pour une fois qu'il sont d'accord) mais cette fois c'est safari qui fait n'importe quoi.

Par ailleur j'ai un problème sur Firefox et IE que je n'ai pas sous safari, il s'agit du "générez votre magazine" en haut a droite, qui est une image de fond d'un lien, spécifiée en no-repeat mais qui se répete quand même et en plus sur elle même (c'est pas évident a expliquer mais essayez de changer la taille des police en ragardant l'image)

merci pour votre aide
Modifié par yobuntu (02 Aug 2006 - 09:28)

un petit up,
si il manque des infos, dites le moi.
j'aimerai vraiment résoudre ce problême.
Y a t'il un problème avec la position: absolute dans safari?

Effectivement, Safari fait "n'importe quoi", comparé au résultat obtenu avec FireFox.

Je remarque une erreur dans le css qui est peut-être à l'origine du problème (pas testé) :

#menu {
		margin-left:200px;
		margin-right: 100px;
        border: solid;
        border-color: #FFFFFF;
        border-width: 1px;
        font-family:Tahoma, Verdana, sans-serif;
        height: 55px;
		background-image: url(images/interface/fd_menu_horiz_vide.gif);
		font-family:Tahoma, Verdana, sans-serif;
		font-size: 1em;
		color:#333333;

    background-repeat: repeat-x;

    padding: 0em 0em 0em 0em;*/
}

Remarquez la fermeture de commentaire sans ouverture de commentaire.

A tester.

Pour le xhtml et le css, il n'est pas inutile de faire appel à un valideur.
Personnellement, j'ai installé l'extension "Web developper" : elle me rend de grand service.

background: url('images/interface/picto_generez.gif') no-repeat;

Normalement, l'url de la background image, se met sans guillements, ni apostrophes. A tester.

merci beaucoup.

J'ai testé la suppression de la fin du commentaire, mais je ne pense pas que cela joue car cette fin de commentaire était dans #menu alors que ce qui pose problème est #menulat.

J'ai également supprimé les guillement dans l'url du background image: sans effet.

enfin j'utilise l'extension firefox web develloppper et tidy qui m'affiche 1 avertissement qui est du au code de phpmv2.

encore merci pour vos proposition mais le problème demeure

c'est bien le CSS mais parfois j'y comprend rien de rien...
Modifié par yobuntu (31 Jul 2006 - 09:24)

Bonjour,

h2o a écrit :

background: url('images/interface/picto_generez.gif') no-repeat;

Normalement, l'url de la background image, se met sans guillements, ni apostrophes.

Non : la précaution à prendre est l'inverse, en fait.

Les syntaxes avec guillemets ", avec apostrophe droite ' et sans guillemets sont toutes les trois correctes. Mais la syntaxe sans guillemets n'est possible que si l'url ne contient pas certains caractères réservés en CSS, telle que les parenthèses (cf un exemple très récent dans ce forum).

La syntaxe avec apostrophe droite n'étant pas reconnue par certaines versions anciennes de navigateurs graphique, ces défauts d'implémentation peuvent être utilisés comme un filtre fort pratique. Et la syntaxe avec guillemets est au bout du compte la plus robuste (c'est à dire la plus indifférentes au contenu de l'url, et aux comportements actuels et futurs des moteurs de rendu).
Modifié par Laurent Denis (31 Jul 2006 - 09:35)

bonjour et merci de vous interresser à mon problème.

dans mon cas l'image s'affiche, et j'ai l'impression que c'est la partie qui "déborde" à droite qui revient à gauche alors que l'image devrait simplement se "caler" à gauche.

mais ce qui me gène le plus c'est cet affichage horrible dans safari, un copain m'a dit que c'est parce que safari gère très mal la position absolute, mais après une recherche sur le web, je n'ai pas trouvé grand chose à ce sujet.
pepnsez vous que mon problème puisse venir de ce que mon menu latéral est en absolute?
si c'est le cas comment contourner le problème?
Je pourrais toujours revenir sur une mise en page en tableaux, mais j'ai vraiment pas envie de revenir en arrière a cause d'un navigateur qui fait pas ce que l'on attend de lui...

yobuntu a écrit :
il s'agit du "générez votre magazine" en haut a droite, qui est une image de fond d'un lien, spécifiée en no-repeat

Le problème vient apparemment de l'image elle-même. Refaire le gif (je ne vois pas d'autre explication possible aux vues du code HTML et du code CSS, et un simple passage du gif dans photoshop suffit à corriger la même erreur qui se produit également dans Opera 9).
Modifié par Laurent Denis (31 Jul 2006 - 10:42)

bonjour, je ne possede pas photoshop j'ai donc enregistré l'image au format jpeg, avec un fond gris comme il n'y a plus de transparence, et je crois du coup avoir compris le problème.
j'ai l'impression qu'il y a une image de fond par mot dans mon lien.
J'ai donc mis un display: block.
cela a tout décalé vers le bas, mystère?
puis en jouant sur les padding j'ai tout recalé comme ca devait être et c'est bon!

reste mon principal problême:
le menu latéral qui fait n'importe quoi avec safari.

mais parfois je me dit que je ne comprend rien du tout au css, j'essaie des truc différents jusqu'a ce que cela fonctionne, sensation un peu frustrante.

merci encore pour votre aide a tout les 2

Merci à Laurent Denis pour le conseil concernant les guillemets/apostrophes

@ yobuntu : maintenant, sur Safari, le menu est ok !

merci a tout les 2, je n'avais pas retesté avec safari entre temps donc je ne sais pas quel manip a permis de rendre mon menu ok pour safari.
en revanche pour l'image qui se répète je suis presque sûr que c'est le display block qui a fait la différence!

en bref une fois de plus ça marche mais sans que je ne sache vraiment pourquoi...