Problème avec firefox et saphari

Bonsoir à tous,

J'ai un petit souci sur un site que je viens de faire et qui foire un peu (beaucoup...)sur Firefox.

Je débute seulement en création de site internet et après avoir lu plusieurs forum, il m'est apparu que c'est votre site qui était le plus sité. C'est pour ça que j'ai débuté ici et que je me suis servi d'un de vos tutos pour faire mon site : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

Pour en revenir à mon problème, en fait, sous ie ça passe très bien mais une fois sous firefox, je me retrouve avec des images complètement décalées

voici un aperçu sous ie:

http://plop.free.fr/test_site/images/version_ie1.jpg

et voici un aperçu sous firefox:

http://plop.free.fr/test_site/images/version_firefox.jpg


Ce que je souhaiterai faire, c'est un site avec une image qui reste où elle est, même avec une scrollbar (d'où dans le code source la fonction background-attachment: fixed;)

pour le site en question, c'est là : http://plop.free.fr/test_site
(je préviens de suite, les couleurs sont là juste pour situer les éléments et je metterai de vraies images plus tard...)

j'ai parcouru le forum à la recherche de réponses mais je ne suis pas sûr d'y avoir trouvé une réponse adaptée à mon problème, donc si quelqu'un a une réponse à me donner, je lui en serait reconnaissant

Merci !
Modifié par pat_la_pouffe (01 Feb 2008 - 01:11)

personne n'a d'idée ?

Bonjour,

Je ne sais pas de quel IE tu parles (6 ou 7?) mais même maintenant que IE7 existe, il est fortement conseillé de développer d'abord pour Firefox (ou Opera ou Safari) c'est-à-dire un navigateur respectant au maximum les standards du web et ensuite seulement de s'atteler à la compatibilité avec IE6 et IE7 (via les commentaires conditionnels

Pour isoler les éléments problématiques, un tutoriel: http://blog.alsacreations.com/2004/12/08/100-methodologie-pour-resoudre-les-problemes-daffichage-en-css ,
un article de FAQ: http://forum.alsacreations.com/faq/faq-44-Methodologie-generale-de-correction-de-bugs-classiques.html

et l'extension Firebug si tu arrives à t'y retrouver
Le problème avec ta page sur Firefox viendrait de

border: 2px ... 
(règle p#images a)

mais je n'ai pas pris le temps de regarder pourquoi cela décalait tout. Avec 1px ça passe.
Modifié par Felipe (26 Jan 2008 - 16:20)

au temps pour moi, il s'agit d'une base ie6, que j'utilise en l'occurence à travers maxthon pour être précis.

en ce qui concerne la marge de 2px, effectivement elle change quelque chose pour l'espacement entre les petites images.
vraiment bizarre qu'un seul petit pixel change autant de choses...

par contre, d'après ce que je vois, cela ne résout malheureusement pas le problème que l'on voit sur ces mêmes petites images, à savoir que le cadre est décalé par rapport à l'image.

pour ce qui est de l'image avec la fleur, j'ai résolu le problème en changeant ceci :

div#contenu {
height: 500px;
overflow: auto;
background: url(images/content.jpg) no-repeat;
background-attachment: fixed;
text-align: justify;
}

par ceci :

div#contenu {
height: 500px;
overflow: auto;
background:transparent url(images/content.jpg) no-repeat scroll 0%;
text-align: justify;
}

mais là, c'est sous ie que cela ne fonctionne pas; mais ça n'est pas grave, maintenant que j'ai vu que l'on pouvait attribuer un .css par type de navigateur avec les commentaires conditionnels
il suffit que je mette le code suivant pour que cela fonctionne si j'ai bien compris :

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![ endif]-->

Modifié par pat_la_pouffe (26 Jan 2008 - 18:05)

Bonjour,

comme ça, rapidement, sous Firefox 2.0 pas de problème, par contre le premier paragraphe est différent du 2e sous IE 6.
Quand on regarde le source, il manque une balise fin de paragraphe au milieu du premier, il y a une balise

<br/>

à la place...

Salut !

bien vu l'aveugle pour le </p>, mais après modification, ça change pas grand chose malheureusement...

donc pour le moment, j'ai dû "résoudre" mon problème de bordure en mettant la ligne en commentaire.
je fais des test mais rien de concluant pour l'instant
Modifié par pat_la_pouffe (27 Jan 2008 - 19:23)

bonjour à vous,

j'ai pu résoudre mon petit problème de cadre en appliquant un display block pour mes images.
le seul souci, c'est que maintenant, pour avoir un espacement entre celles-ci, j'ai aussi mis un margin-left de 5px.

le souci, c'est que sous ie du coup, ça me décale le cadre entier du site, comme si les 5px poussaient la scrollbar sur le côté, ce qui est un peu chiant

grâce au lien sur les commentaires conditionnels, j'ai fait un css pour ie et un pour firefox&cie et bien que la marge ne soit pas dans le css pour ie, celle-ci s'applique quand même et cause donc ce décalage

un idée pour avoir un espacement entr les images sous ie sans pour autant que ça décale le cadre ?