CSS XHTML 1 STRICT et Internet Explorer : un univers dingue!

**tynmar** · 06/04/2006, 11h23

Bonjour à tous,
Je m'adresse à vous puisqu'après avoir cherché moulte temps et m'être pris la tête, je n'arrive pas à comprendre ce problème.
J'ai des liens ("<a href...>") tout ce qui a de plus normal et une image dans un div. Tout marche comme il faut sur tous les navigateurs, c'est le paradis.
Ah ! non !! J'allais oublier : Internet Explorer (cette sal*#¤rie!) Au survol de ce lien, mon div diminue de 16px (j'ai fait des screenshots et comparé)
J'ai cherché comme un dingue et je ne pige pas. Si vous avez déjà rencontré ce problème, faites moi un signe, ça serait aimable.
Voici mon code html et css :
PS : ne commencez pas à me faire une étude sur IE, c'est un navigateur en carton mais tout le monde l'utilise.

Code :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Logipro, le logiciel de gestion des professionnels</title>
<style type="text/css">
/*=============== BEGIN = GENERAL =====================*/
body{font: 11px/15px Tahoma, Arial, sans-serif;color:#333333;background-color:#eee;margin:0px 0px 0px 0px;}
h1{ position:relative; top:5px;text-align:center;font: bold Arial, Helvetica, sans-serif; font-size:16px;color:#666666; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} 
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color:#555555;}
a:active {color: #000000;}
/*=============== END = GENERAL =====================*/
 
 
.New{ display:block;width:320px;position:relative;overflow:visible;left:0px;margin-bottom:20px;padding:5px 80px 25px 80px;}
a.NewsPlus{top:5px; position:relative;color:#BBA!important; text-decoration:underline; }
a.NewsPlus:hover{top:5px; position:relative;background-color:#BBA; color:#EEEEEE!important; text-decoration:underline;}
.New h2{font-size:15px; font-weight:bold;color:#911;position:relative;margin:0px;}
.New h3{background:url(pics/fleche-new-h3.gif) no-repeat left; border-top:#666666 solid 1px;font:11px/15px Tahoma, Arial normal;color:#F19A43;margin:5px -5px 0px 0px;padding:2px 0px 2px 14px;}
.New p{margin:0px 0px 0px 5px;padding:0px 0px 0px 5px;text-align:justify; height:auto;}
.imageDroite{float:right;padding-left:10px;}
.imageGauche{float:left;padding-right:10px;}
.calNew{
	color: #BBA; text-align:center; text-transform:uppercase; font-size: 10px;
	background:url(pics/calendrier.gif) 0 0 no-repeat;
	position:relative;display:block; 
	line-height:1; 
	width: 40px; height:45px;
	padding-top:5px; margin-bottom:-45px;
	top: -15px; left: -45px;
}
.calNew .day {
	color:#BBA; font-weight:bold; font-size:20px; text-indent:-3px; letter-spacing:-2px; text-shadow: #bbb 2px 2px 0;
	display: block;     padding-bottom: 5px;}
 
 
 
/*=============== BEGIN = DIV =====================*/
#entete{width:700px;height:30px;position:relative;top:5px;margin:0px auto 0px auto;background:url(002.gif) repeat;background-color:#F8F8F8;overflow:hidden;}
#page{background-color:#F8F8F8;
	position:relative;
	top:20px;
	width:500px;
	margin:0px auto 10px auto;
	padding:10px 10px 10px 10px;
	border:#ddd solid 1px;
	overflow:hidden;
	float:left;
}
#corps{overflow:hidden;margin:10px auto;width:700px;padding:0px 5px 15px 5px;}
/*=============== END = DIV =====================*/
 
</style>
</head>
 
<body>
<div id="corps">
<div id="entete">
  <h1>Titre de la page</h1>
</div>
<div id="menu">
 
</div>
<div id="page" title="">
	<div class="New">
		<h2>Titre de la new 1</h2>
		<span class="calNew">Mars <span class="day">23</span></span>
		<h3>Petite description 1</h3>
		<p> Formations Logiplus V10 et SAV
		Venez découvrir les nouvelles fonctionnalités de la version  de formation dans toute la France. <br /><a href="#" class="NewsPlus" title="En savoir plus">En savoir plus...</a></p>
	</div>
	<div class="New">
		<h2>Titre de la new 2</h2>
		<span class="calNew">Mars <span class="day">10</span></span>
		<h3>Petite description 2</h3>
		<p> Formations Logiplus V10 et SAV
		Venez découvrir les nouvelles fonctionnalités de la version V10 d'Logiplus pro lors de nos journées de formation dans toute la France.  <br /><a href="#" class="NewsPlus" title="En savoir plus">En savoir plus...</a></p>
	</div>
	<div class="New">
		<h2>Titre de la new 3</h2>
		<span class="calNew">Fev <span class="day">20</span></span>
		<h3>Petite description 3</h3>
		<p>Formations Logiplus V10 et SAV<img src="MONIMAGE.jpg" class="imageDroite" width="100" height="106" alt="ma définition" />
		Venez découvrir les nouvelles fonctionnalités de la version V10 d'Logiplus pro Venez découvrir les nouvelles fonctionnalités de la version V10 d'Logiplus pro lors de nos journées de formation dans toute la France.  <br /><a href="#" class="NewsPlus" title="En savoir plus">En savoir plus...</a></p>
	</div>
	<div class="New">
		<h2>Titre de la new 4</h2>
		<span class="calNew">Janv <span class="day">27</span></span>
		<h3>Petite description 4</h3>
		<p> Formations Logiplus V10 et SAV
		Venez découvrir les nouvelles fonctionnalités de la version V10 d'Logiplus pro lors de nos journées de formation dans toute la France.  <br /><a href="#" class="NewsPlus" title="En savoir plus">En savoir plus...</a></p>
		<h3>Petite description 5</h3>
		<p> Formations Logiplus V10 et SAV
		Venez découvrir les nouvelles fonctionnalités de la version V10 d'Logiplus pro lors de nos journées de formation dans toute la France.  <br /><a href="#" class="NewsPlus" title="En savoir plus">En savoir plus...</a></p>
	</div>
</div>
</div>
 
</body>
</html>

Merci

MAJ : oups ! sorry. Vous pouvez copier le code et voir comment il réagit sous IE, c'est assez embêtant.

**blueice** · 06/04/2006, 11h47

Pas du tout envie de lire, édite ton message et utilise les balises code.

Merci pour nos petits yeux

**-DeN-** · 06/04/2006, 17h58

J'ai testé c'est vrai que c'est étrange. Surtout qu'apparemment c'est dû à cause de background color du hover! C'est fou.

Par contre:

Tout marche comme il faut sur tous les navigateurs, c'est le paradis.

As-tu testé netscape 7, opera 5 et 6 et IE5 ? Dans les trois premiers cars rien ne s'affiche et dans le dernier c'est un peu déformé...

Et encore j'ai pas testé konqueror, ou mac

Vive le w3c...

**tynmar** · 06/04/2006, 18h18

Merci pour ta réponse -DeN-.
J'ai testé ça sur tous les navigateurs mais je n'ai que les versions récentes (opera 8, FF 1.5.0.1, IE 6 et NetScape 7.2).
Je respecte les standards W3C XHTML 1.0 strict et ça couille sur IE.
J'ai commencé à bidouiller un fichier CSS que seul IE6 ne lira pour corriger ces problèmes, mais par principe, je refuse de coder des bugs pour contrer ceux de IE.

Je lance ma campagne pour Opera et invite tout le monde à ne plus utiliser IE

Si jamais vous avez une lumière pour ce bug, je veux bien connaitre la solution, mais quelque part je ne veux pas perdre trop de temps là dessus et ça n'est pas trop grave.

Merci beaucoup.