Probleme de compatibilié entre firefox et ie

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Dangman

Probleme de compatibilié entre firefox et ie

Message par Dangman »

Bonjour,

Je suis entrain de faire un nouveau site et je suis depuis peu sous firefox. J'apprecie beaucoup ce navigateur mais malheureusement j'ai beaucoup de problemes de compatibilité entre les deux.

Exemple: je fais un margin-top avec une valeur de 20 celas'affiche tres bien sous firefox mais sous ie c'est completement décalé!!!! J'ai egalement ce soucis sur l'espace entre chaque interligne etc...
bref beaucoup de probleme de compatibilté, pourriez me dire si il y a une solution ou si je suis condamné à choisir entre l'un ou l'autres... Merci beaucoup.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Il y a un nombre incalculable de raisons possibles pour ce genre de problèmes. Si tu as un lien (ou au pire un bout de code, mais mieux vaut un lien vers une page qui a ce problème), peux-tu nous le donner ?

Bien entendu il est tout à fait possible de faire un site compatible dans tous les navigateurs. C'est parfois un peu difficile car IE a des comportements non standards (ne respectant souvent pas les règles du W3C), mais on y arrive toujours :P
Dangman

Message par Dangman »

voila le lien de la page:

http://www.fswg.org

Sur cette page dans l'image de fond central le texte et la scroll fonctionne sou ie cela est bien centré mais sous firefox (de plus pas moyen d'habiller la scroll bar sous firefox) merci beaucou pour votre aide c'est tres gentil.

Dangman
dangman

Message par dangman »

voila le lien pour le css désolé j'ai oublié plus haut:

http://www.fswg.org/style1.css

cela se trouve dans la balise body_contenu

voili voilou merci
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Bon, allons-y joyeusement :wink:
  1. Code : Tout sélectionner

    <font face="Arial, Helvetica, sans-serif" size="0">
    C'est fait exprès le size="0" ? :shock:
    Ce d'autant plus que...
  2. Tu as un doctype XHTML 1.1 ! Sais-tu au moins ce que ça signifie ? Je ne pense pas que ce soit une très bonne idée de commencer par là (à vrai dire je dirais même que c'est une mauvaise idée tout court). Fais plutôt du HTML 4.01 pour commencer, variante transitionnelle au départ vu que tu utilise des balises de mise en forme.
  3. Ta pagene valide pas. C'est en grande partie lié au point précédent. Choisi un bon doctype, vu le code de ta page et l'utilisation que tu fais des <font> dépréciés et des tableaux dans un but de mise en forme je ne peux que te recommander un doctype HTML 4.01 transitionnel :

    Code : Tout sélectionner

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Ce n'est pas moins bien qu'un autre, et tu pourra toujours passer à un doctype HTML 4.01 Strict par la suite quand tu décidera de séparer strictement le contenu et la forme de tes pages ;-)
    Si tu veux mon avis, ces deux doctypes sont les plus adaptés au web d'aujourd'hui, le XHTML n'étant malheureusement pas encore supporté par de nombreux navigateurs, il vaut mieux ne pas l'utiliser (surtout du XHTML 1.1 !)
Pour en revenir spécifiquement au problème, ce ne serait pas lié au bug de padding d'IE ? Tu as justement un padding et un margin-top :? Parce que si je calcule, tu as un padding-top:42px; sur #body et 5px de padding-top+65px de margin-top sur .body_contenu ce qui fait 112px d'espacement entre le haut de #body et le contenu, j'ai l'impression que IE sous-estime un peu tout ça :? (à l'oeil il n'affiche pas plus de 50px d'écart :x )

Alors je te conseille de supprimer le padding-top sur .body_contenu et de passer le margin-top à 30px;, j'ai l'impression que ça va bien ;-)

Bon, dernière chose : tu devrais fournir une loupe aux visiteurs de ton site (heureusement que mon Firefox est bien réglé) :lol: :wink:
Tyrian

Message par Tyrian »

Il n'y a pas moyen tout court d'habiller la scroll-bar, sauf sous IE, mais c'est une fonction non standard (pour un résultat heu... enfin bon les goûts et les couleurs)
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Tyrian a écrit :Il n'y a pas moyen tout court d'habiller la scroll-bar, sauf sous IE, mais c'est une fonction non standard (pour un résultat heu... enfin bon les goûts et les couleurs)
Ah oui, pour les scrollbars j'avais dit quelques mots sur ce sujet :wink:
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

http://css.alsacreations.com/Bases-et-i ... le-partout
pour comprendre les margin-padding-border

Calimo
à propos de xhtml, je suis pas trop d'accord : ça donne un véritable confort d'utilisation, mais c'est pas polémique :wink:
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

ottomar a écrit :à propos de xhtml, je suis pas trop d'accord : ça donne un véritable confort d'utilisation, mais c'est pas polémique :wink:
D'utilisation... tu parles de l'utilisateur ? Ou du codeur ?
C'est vrai que niveau syntaxe c'est plus strict, mais franchement, au vu des limitations des navigateurs actuels, on est obligé de le bâcler (= l'envoyer en text/html ce qui n'est pas une bonne idée et que je ne peut pas me résoudre à conseiller).
Autres arguments : http://blog.alsacreations.com/2005/04/07/143 :wink: (je devrais pluôt dire : les mêmes en mieux dit !)
Dangman

Message par Dangman »

Merci pour votre aide, j'ai essayer en enlevement le padding-top mais j'ai toujours une difference entre ie et firefox. je vais essayer de chercher plus encore. Merci pour tout.
Mirovinben
Lézard vert
Messages : 194
Inscription : 13 nov. 2004, 08:54

Message par Mirovinben »

voir ici (site OpenWeb, l'incontournable selon moi) : Gérer les modèles de boîtes CSS standard et Microsoft

Et de l'intérêt de pouvoir passer dès que possible en...

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ou en...

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Bienheureux les fêlés car ils laissent passer la lumière...
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Dangman a écrit :Merci pour votre aide, j'ai essayer en enlevement le padding-top mais j'ai toujours une difference entre ie et firefox. je vais essayer de chercher plus encore. Merci pour tout.
Ah ouais effectivement ça n'a pas suffit :?
Je pense qu'il faut chercher dans ce sens-là. Sinon on peut utiliser des hacks, mais c'est assez risqué.
Mirovinben a écrit :voir ici (site OpenWeb, l'incontournable selon moi) : Gérer les modèles de boîtes CSS standard et Microsoft

Et de l'intérêt de pouvoir passer dès que possible en...

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ou en...

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dans ce cas il me semble qu'il n'y a pas de "border" donc le problème ne peut pas venir de là...
Mirovinben
Lézard vert
Messages : 194
Inscription : 13 nov. 2004, 08:54

Message par Mirovinben »

calimo a écrit :Dans ce cas il me semble qu'il n'y a pas de "border" donc le problème ne peut pas venir de là...
voui... mais s'il y a du padding ?...
dans un navigateur appliquant le modèle de boîte standard, les deux boîtes sont identiques : leur largeur apparente est égale à width + padding + border (...)

dans un navigateur appliquant le modèle de boîte Microsoft, la boîte verte est plus petite que la jaune : la largeur apparente étant égale à la seule valeur de width (...)
... :wink:

De toute façon ça ne mange pas de pain d'étudier la page d'Openweb et de tenir compte de ton conseil concernant le Doctype. :D
Bienheureux les fêlés car ils laissent passer la lumière...
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

Dangman
apparemment, ça vient de ta div#body, puisque le padding et margin se comptent depuis les bords de celle-ci pour son contenu (div#body_contenu)
donc essaye de régler déja ta div#body
d'autre part, apparemment, c'est une page d'accueil ou il n'y aura que cela, donc n'hésite pas avec les positions absolues et relatives.

merci qui ? merci Colorzilla super petite extension dont le principal interet est de délimiter au passage de la souris, les zones d'une page, je ne peux plus m'en passer
et webDevelopper aussi d'ailleurs
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

et c'est peut-etre pas une bonne idée de l'avoir appellée...body :!:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité