Simple floating mais pourtant IE bugge

**ArithmeticException** · 01/02/2005, 22h15

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 :

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
<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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...

**Necron** · 01/02/2005, 23h18

c'est normal ton float devrait etre avant ton conteneur perso
moi je fais pareil mais plutot comme ca :

Code :

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

1
2
3
4
5
6
 
<span class="photo_contact"> 
   <img src="22_thumb.png" alt="photo"> 
    <a  href="">modifier</a> 
 </span> 
<p>paragraphe ou div avec la photo up alignée a gauche</p>

**ArithmeticException** · 02/02/2005, 08h32

Trouvé.

Etant assez nouveau aux css, j'ignorais la presence de ce bug apparement bien connu.

La solution est simplement de mettre height:1%; a l element "cadre" (qui redimensionnera de toutes facons selon le contenu, d ou la petite taille) ou de preciser une taille (height ou width) pour l element "infos_contacts".

http://www.positioniseverything.net/...hollyhack.html

Simple floating mais pourtant IE bugge

CSS

Discussions similaires

Partager

Partager