Problème compatibilité navigateurs

Fermé
lylyD Messages postés 3 Date d'inscription vendredi 10 août 2012 Statut Membre Dernière intervention 10 août 2012 - 10 août 2012 à 10:55
lionel-DIL Messages postés 1220 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 - 10 août 2012 à 14:49
Bonjour,

Je viens de réaliser un code en html pour réaliser un template mail, et celui-ci s'affiche parfaitement sur chrome et safari, un peu sur firefox (traits bleus en plus) et pas du tout sur IE...
Le but de ce template et que le beaucoup de monde le voie, donc si il ne fonctionne pas sur IE...

Auriez-vous une idée de ce qui pourrait bloquer?

Je vous mets mon code:

<!DOCTYPE html>
<html>
<body>
<center>

<div style="width:600px; height:706px; position:relative; z-index:1;"><img src="up.jpg" alt="" /></div>

<div style="width:600px; height:625px; position:relative; z-index:2; top:-35px;"><img src="BG.png" alt="" /></div>

<div style="width:530px; height:100px; position:relative; z-index:3; top:-630px; text-align:justify;"> XXX</div>

<div style="position:relative; z-index:3; top:-630px; left:-1px;"><img src="bloc.jpg" alt="" /></div>

<div style="width:530px; height:100px; position:relative; z-index:3; top:-630px; text-align:justify;"> XXX</div>

<div style="width:30px; height:30px; position:relative; z-index:3; top:-630px; left:-225px;"><a href="http://www.facebook.com/><img src="facebook.jpg" alt="" /></div>

<div style=" width:30px; height:30px; position:relative; z-index:3; top:-660px; left:-165px; "><img src="twitter.jpg" alt="" /></div>

<div style= "width:30px; height:30px; position:relative; z-index:3; top:-690px; left:-106px; "><img src="linkedin.jpg" alt="" /></div>

<div style="width:600px; height:197px; position:relative; z-index:1;top:-705px;"><img src="footer.jpg" alt="" /></div>

</center>
</body>
</html>

Je ne m'y connais pas trop en html et je sais que là c'est super moche car je n'ai pas fait le CSS à part mais je dois tout faire sur une page...


Merci beaucoup pour votre aide!


5 réponses

lionel-DIL Messages postés 1220 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 765
10 août 2012 à 11:04
Bonjour,

Manque plein de choses : le head, quelques meta etc.
Le style doit être mis dans une feuille de style.
z-index:3; et top:-630px; sont assez dépréciés car interprétés différemment par les navigateurs.
Il faut mettre des tailles pour les images.
1
lylyD Messages postés 3 Date d'inscription vendredi 10 août 2012 Statut Membre Dernière intervention 10 août 2012 1
10 août 2012 à 11:29
Je ne cherche pas à faire une page internet, donc le titre et la description ne sont pas vraiment nécessaires, et quand je change <center> pour <<div style="text-align: center"> la moitié des éléments de ma page ne sont plus alignés...

Je ne suis pas sûre que ce soit la bonne solution...
1
lylyD Messages postés 3 Date d'inscription vendredi 10 août 2012 Statut Membre Dernière intervention 10 août 2012 1
10 août 2012 à 11:08
Merci bien de ta réponse!

Quels sont les méta qui manquent?
Pour le style justement je ne peux pas le mettre sur une feuille de style car ce code sera ensuite chargé dans un logiciel où je ne peux mettre qu'une seule page...

Donc je rajoute un head, je mets des tailles pour les images, mais je fais comment pour remplasser les z-index et positions?
0
lionel-DIL Messages postés 1220 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 765
10 août 2012 à 14:49
C'est avec les marges, padding etc. qu'il faut placer ses éléments, pas center.
Ok pour le titre, mais l'UTF 8 ou ISO, c'est un minimum
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
lionel-DIL Messages postés 1220 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 765
10 août 2012 à 11:14
Déjà :

<meta charset="utf-8" />

Le titre.
Éventuelle description.
pour remplacer les z index et autres trucs inutiles, il y a des margin, padding, des width, des height, float etc.

Sinon, rien ne sert de mettre un doctype d'HTML 5 si on fait de l'HTML dépassé.

La balise <center> est dépréciée aussi.
<div style="text-align: center"> pour remplacer.
-1