Discussion :

[canabral]

Bonjour,

J'ai développé une dizaine de page en combinant HTML, CSS, les templates Modelixe et du PHP. Lors du développement je me suis basé sur IE 6 pour voir le rendu (je sais ce n'est pas forcément un exemple dans l'intégration des standards mais IE est utilisé par 65% des internautes). Aujourd'hui je viens d'installer Firefox pour "voir" (plus de 25% des internautes dont il faut également se soucier ...) et j'ai vu que les différentes pages ressemblaient à rien (mais vraiment à rien ...) Que faire??
J'ai pourtant lu différents tutoriaux, exemples, conseils ... pour ne pas faire n'importe quoi mais apparemment cela n'a pas suffit !!!

Je ne sais pas vraiment pas ou commencer, quoi vérifier, quoi changer ...
Apparemment le problème vient de mes blocs (blocs logo, menu, contenu, ...), ils se superposent ou ne se mettent pas la où il faudrait.

Connaissez-vous un site qui indiquerait les différences de traitement entre IE et Firefox?

Merci

[franculo_caoulene]

Salut,

la bonne pratique c'est en fait exactement le contraire de ce que tu as fait. Développer pour FF (respectant les standards) puis adapter à IE.
Le problème principal vient des marges internes et externes des blocs. En général définis explicitement tes marges. Si tu n'as pas de marges définis les donc à 0.

[canabral]

Merci pour l'info, je regarde ça demain et je viendrais vous dire quoi ...

[marsupix]

en effet: interprétation différente des padding:
sous IE
largeur total = width (contenu + padding) + border + margin
sous FF
largeur totale = width (contenu) + padding + border + margin
(voir "box model" dans google pour plus d'infos)

mais aussi, chose que j'ai remarqué, IE ne connais pas la syntaxe:
#monID > a (désignant seulement les "a" directement fils de #monID (et pas les "petits-fils" si ça se dit...)

ensuite pour spécifier des lignes css que pour IE, mets * html devant l'élement. ex: * html #monID{ width:...; // largeur seulemnt pour IE)

[canabral]

j'ai un bloc 'ensemble' qui englobe la page entière et me permet:
de centrer le site avec une marge blanche à gauche et à droite pour les résolutions 1024*768 ou d'afficher le site sans marge pour une résolution 800*600.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.ensemble {position:absolute; height:100%; width:760px; left:50%; margin-left:-380px;}

Sous IE ce bloc fonctionnait bien, avec Firefox tout est décalé vers la gauche, le left:50% ne semble pas marché ...

Comment faire donc pour centrer son site avec ou sans marge suivant les résolutions ...

Merci

[hotkebab99]

Le mieux est effectivement de commencer par Firefox et ensuite de bidouiller (excusez du mot mais c'est celui ci qu'il convient d'employer) pour rendre compatible avec les autres navigateurs comme IE et aussi Opéra (ne pas l'oublier ce navigateur).

C'est à toi de modifier tes valeurs de largeur, hauteur, marges et padding pour que ce soit nikel.

Tu auras aussi peut-etre des problemes au niveau des scripts Javascripts.

Bon courage mais avec un peu de patience, c'est pas forcemment compliqué !