CSS XHTML 1 STRICT et Internet Explorer : un univers dingue!
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:
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.
