Différences d'affichage

patwet Messages postés 1 Statut Membre -  
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   -
Slt,
je construit actuelment 1e page web essentielment en html - pour le balisage - et en css - pour la mise en forme - et sur IE ça marche du tonnerre. sur Firefox par contre, c'est la cata. voici le pb:
en html, j'ai édité ma page en 3 tb. #header pour le haut, #corps pour la barre de navigation hztale sous le header et #texte pour les infos.
le header est clean pour les deux navigateurs. c'est le corps et le texte qi pose pb N.B: corps et texte sont des noms de balises tb
le corps est 1e barre de nav déf sous forme d'1 tb cstitué d'1 tr et 9 td (il faudrait noter par ailleurs q tous les tb ont le même width=950px). chaq td a 1 width=95px et porte 1 lien chaq. les pptés déf pour la class et les liens sont les suivantes:
#corps {
width: 950px;
padding:0;
margin:0;
}
#corps .menu a {
width: 95px;
font-family: Calibri;
font-size: 11px;
border-bottom:black double 4px;
text-align: center;
padding: 0;
}
#corps .menu a:hover {
border-bottom: blue double 4px;
background-color: #B7B7DB;
}
#corps .menu a:link, #corps .menu a:visited {
color: black;
text-decoration: none;
}
#corps .menu a:hover, #corps .menu a:active, #corps .menu a:focus {
color: white;
text-decoration: none;
background-color: #B7B7DB;
}
sur IE chaq lien s'inscrit dans 1 espace de dimension fixe et tous égaux et les pptés ci-dessus déf s'apliq à toute la surface du td; l'intevalle entre les liens est équivalent (impeccable).
sur Firefox les liens st complètement décalés et les pptés de lien ne s'apliq q'au niveau des libellés des liens.

#texte est 1 tb à 1 tr et 3 td. les td portent également des tb. globalement, le pb se situe:
- au niveau de la col du centre où j'ai 1 tb de 4 groupes tr et 8 td (le 1er tr porte 1e bannière "colspan=8"; le 2è tr porte 1e barre de nav d'où les 8 td; le 3è tr porte 1 marquee; et en 4, une suite de tr portant des infos de même nature, les colspan me permettent d'ordonner les infos, dc pas de pb). cpdt, la barre de nav pose ici le mêm pb que le précédent. par ailleurs j'ai remarqué aussi des espaces entre les col sur Firefox qi n'existe pas sur IE;
- la col de gauche génère sur Firefox un espace (malgré son width=150px
#texte .col1 {
width: 150px;
text-align:center;
vertical-align:top;
})
la col de gauche pousse ainsi celle du centre sur celle de droite. ce qui est aussi embêtant est qe la col de droite porte un formulaire d'enregistrement dont le bouton "annuler" passe sous "valider" avec Firefox

je ne comprend pas l'interprétation de Firefox. merci d'avance.

1 réponse

avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Bonjour,

C'est l'inverse normalement : IE affiche mal et Firefox correctement.

Je m'explique : Firefox, contrairement à IE, respecte les standarts et donc il affiche réellement ce que le CSS lui dis donc si il y a une erreur, elle s'affiche contrairement à IE qui lui fait autrement.

Et au passage : N'utilise jamais de tableaux pour la mise en page : ils sont là pour afficher des données structurées !

Je ne pourrais pas t'aider plus à part si tu donne un Zip avec le fichier HTML et le fichier CSS. Tu as de la chance que je suis de bonhumeur : je vais te faire un beau code et retirer ces tableaux (du moins si on sait ...)
0