Différence d'affichage entre Firefox, Chrome et Internet explorer

**akiniva** · 13/02/2010, 14h02

Bonjour à tous et à toutes,

J'ai fait une page du genre "cv" pour m'exercer.
Le problème est que j'ai une différence d'affichage entre Internet Explorer, FireFox et Chrome:

- ie: affichage normal, aucun problème
- Firefox : cadre inférieur droit ne taille différente et texte à l'intérieur des cadres non aligné
- Chrome : les cadres ne sont pas de la même taille et texte non aligné comme sur ie

Si vous souhaitez voir directement ce que ça donne:
http://trentehuitbis.com/arnaud/cv/cv_arnaud.html

Voici donc le code html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<title>CV d'Arnaud XXXXXXX</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="fr"> 
<meta name="keywords" content="cv, Arnaud OLIVIER, curriculum vitae" > 
<meta name="description" content=" curriculum vitae d'Arnaud OLIVIER " > 
<link rel="stylesheet" type="text/css" href="styles_ard.css"> 
<!--[if lte IE 8]> 
<script type="text/javascript" src="script/roundies.js"> </script>
<![endif]-->
</head> 
<body>
<div><img class="image_cv" src="image/cv.png" alt=""></div>
<div><img class="image_polaroid" src="image/polaroid_tache.jpg" alt=""></div>
<!--civilité-->
<div class="en_tete">OLIVIER Arnaud<br>N&eacute; le 13 janvier 1985 &agrave; vichy (03)<br>Tel:06.XX.XX.XX.XX<br>
<a href="mailto:arnaud.olivier@hotmail.fr">arnaud.olivier@hotmail.fr</a></div>
<!--diplome-->
<div class="arrondi_haut_gauche">
<div class="titre_paragraphe">DIPL&Ocirc;ME</div><br><span class="date">2009 - 2010 :</span>
 DEES Webmaster préparé en <span class="alignement_text">alternance</span><br><span class="date">2005 - 2007 :</span>
 BTS Communication des <span class="alignement_text">Entreprises</span><br><span class="date">2004 - 2005 :</span> BAC STT
 </div>
<!--experience-->
<div class="arrondi_haut_droite">
<div class="titre_paragraphe">EXP&Eacute;RIENCE</div><br><span class="date">2009 - 2010 :</span>
 webmaster / Intranet régional - <span class="alignement_text">XXXX(Clermont-Ferrand)</span><br><span class="date">2008 - 2009 :</span>
 testeur / Pixmania (Vichy)<br><span class="date">2007 - 2008 :</span> réalisation de logo, carte de visite,
 <span class="alignement_text">affiche pour diverses entreprises</span>
 </div>
<!--competences-->
<div class="arrondi_bas_gauche">
<div class="titre_paragraphe">COMPETENCES</div><br><span class="date">Informatique :</span>
 Photoshop, Microsoft Office<br><span class="date">Dévelopement web :</span> HTML, CSS, Php, JavaScript<br><span class="date">
 Communication :</span> réalisation de dossier de presse <span class="alignement_text1">et communiqué de presse</span>
 </div>
<!--loisirs-->
<div class="arrondi_bas_droite">
<div class="titre_paragraphe">LOISIRS</div><br><span class="date">Sport :</span> Football, Rugby,
 course d'endurance<br><span class="date">Autres :</span> concert, musique Française et <span class="alignement_text2">Internationale, 
 cinéma (Into the wild, 21 <span class="alignement_text2">grammes), typographie</span></span>
 </div> 
 
</body>
</html>

et le code css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.image_cv{
height:80px; width:300px;display:block;margin-left:auto;margin-right:auto;}
.image_polaroid{
margin-top:-100px;}
 
body{
font-family:verdana;font-size:12px;color:#222; width:68%;margin:auto;}
 
.en_tete{
margin-top:-110px;padding-left:210px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#707066;}
 
a{
text-decoration:none;color:#707066;}
a:hover{
color:#7BA733;font-weight:bold;}
 
/*pour les cadres arrondis*/
.arrondi_haut_gauche{
background-color:#72696b;margin-top:80px;padding:7px 7px 7px 7px;color:white;width:300px;-moz-border-radius:10px;/*firefox*/
-webkit-border-radius:10px;/*safari et chrome*/}
.arrondi_haut_droite{
background-color:#72696b;padding:7px 7px 7px 7px; color:white;width:300px;margin-top:-80px;margin-left:370px;margin-top:-116px;
-moz-border-radius:10px;/*firefox*/-webkit-border-radius:10px;/*safari et chrome*/}
.arrondi_bas_gauche{
background-color:#72696b;padding:7px 7px 7px 7px; color:white; width:300px; margin-top:50px;-moz-border-radius:10px;/*firefox*/
-webkit-border-radius:10px;/*safari et chrome*/}
.arrondi_bas_droite{
background-color:#72696b;padding:7px 7px 7px 7px; color:white; width:300px; margin-left:370px; margin-top:-100px;
-moz-border-radius:10px;/*firefox*/-webkit-border-radius:10px;/*safari et chrome*/}
 
 
 
/*pour les titre de paragraphe*/
.titre_paragraphe{
color:#d7dd36;text-align:center;width:300px;font-weight:bold;}
 
/*pour aligner le mot alternance dans le paragraphe*/
.alignement_text{
padding-left:85px;}
.alignement_text1{
padding-left:107px;}
.alignement_text2{
padding-left:50px;}
 
/*pour souligner les dates*/
.date{
text-decoration:underline;}

Perso je pense que je m'y prends mal pour aligner mes div ou texte.
Le problème doit venir de là peut-être.

Si quelqu'un peut m'aider, m'éclaircir ou me dire ce que je devrai changer pour rendre un affichage correcte.

Merci de votre aide par avance

Arnaud

**akiniva** · 13/02/2010, 14h15

Bon déjà, j'avais oublié de définir une hauteur pour les cadres

Différence d'affichage entre Firefox, Chrome et Internet explorer

CSS

Discussions similaires

Partager

Partager