Simple floating mais pourtant IE bugge
Bonjour,
J ai tenté de faire page tres simple : une image a la gauche d un texte de longueur variable le tout compris dans un bloc.
Sans plus attendre, voici le code de la dite page :
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css</title>
<style type="text/css">
<!--
* { font: 9pt Verdana, sans-serif; }
.cadre { border: 1px solid #dedede; background-color: #fafafa; }
p.photo_contact { float: left; background-color: #fafafa; text-align: center; width: 150px; margin: 5px; }
p.infos_contact { color: #333; background-color: #fafafa; margin: 5px 5px 5px 165px; }
a { color: #aaa; font: 7pt Verdana,sans-serif; text-decoration: none; }
a:hover { color: #aaa; font: 7pt Verdana,sans-serif; text-decoration: underline; }
.spacer { font: 0pt Verdana,sans-serif; clear: both; }
-->
</style>
</head>
<body>
<div>
<div class="cadre">
<p class="photo_contact">
<img src="22_thumb.png" alt="photo">
<a href="">modifier</a>
</p>
<p class="infos_contact">
texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>
</p>
<div class="spacer"> </div>
</div><br><br>
<div class="cadre">
<p class="photo_contact">
<img src="21_thumb.png" alt="photo">
<a href="">modifier</a>
</p>
<p class="infos_contact">
texte<br>texte<br>texte<br>
</p>
<div class="spacer"> </div>
</div><br><br>
<div class="cadre">
<p class="photo_contact">
<img src="23_thumb.png" alt="photo">
<a href="">modifier</a>
</p>
<p class="infos_contact">
texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>
texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>texte<br>
</p>
<div class="spacer"> </div>
</div>
</div>
</body> |
Le probleme est que sous IE le texte des 2 premiers bloc est apres le chargement de la page totalement invisible. Le 3e passe bien par contre.
Si on selectionne le texte invisible ou qu on fait en sorte de "couvrir" la zone (reduction puis agrandissement de la fenetre, deplacement d une autre fenetre au dessus puis retrait...etc) le texte apparait alors comme par magie. Ce qui ressemble beaucoup a un probleme de painting comme on appelerait ca en Java.
Et ce n est pas tout : le texte a rallonge du 3e bloc ne suit plus l alignement passé l image. (de peu, mais quand meme..).
Sous firefox, comme d hab, no problem.
La page et le style css valident bien.
Pour illustrer mes propos, voici 2 screenshots :
http://www.chez.com/holonic0/ie_bug.jpg
http://www.chez.com/holonic0/firefox_ok.jpg
Quelqu un aurait une idee d ou vient le probleme ?? (reponses "parce que c est IE et puis c est tout", merci sans facons)
Ou alors un moyen de contourner le probleme / coder differement la chose ?
Ca me depasse quand meme qu une page aussi simple ne passe pas sur le navigateur utilise par 90% des gens... :roll:
