Discussion :

[rems033]

Salut à tous...
Comme un bel exemple faut mieux que de longues phrases, je vous invite à vous rendre avec FF3 et IE6/7 à l'adresse suivante : URL

Loggez-vous grâce à "**********" / "*****" ;

Dirigez-vous ensuite dans la section "ma recherche" ;

Puis cliquez sur "dont 44 dans le 13 (Bouches-du-Rhône)"

et patatra !! la c'est le drame...
Sous IE6/7, no soucy (enfin presque on va dire à part la mise en forme qui va être retouchée)
Mais sous FF3 !!! Les div "annonces" ne s'ajustent pas au contenu !!!

Pour vous résumer le code HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="annonce">
   <div id="annonce_header">
       <div id="annonce_header_left">Contenu</div>
       <div id="annonce_header_right">Contenu</div>
   </div>
   <div id="annonce_spacer"></div>
   <div id="annonce_contenu">
       <div id="annonce_contenu_left">Contenu</div>
       <div id="annonce_contenu_right">Contenu</div>
   </div>
</div>

et voici le code CSS :

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
 
#annonce {
    margin-bottom:5px ;
    width:90% ;
    background-image:url(../images/back_fieldset2.png) ;
    background-repeat:repeat-x ;
    background-position:bottom ;
    border-color:#999999;
    border-style:solid ;
    border-width:1px ;
}
 
#annonce_header {
    padding-top:5px;
}
 
#annonce_header_left {
    float:left;
    width:60%;
    text-align:left;
    padding-left:18px;
    color:#333333;
}
 
#annonce_header_right {
    float:left;
    width:30%;
    text-align:right;
    padding-right:10px;
    color:#333333;
}
 
#annonce_contenu {
    clear:both;
    padding-top:5px;
    font-size:11px;
}
 
#annonce_contenu_left {
    float:left;
    width:60%;
    text-align:left;
    padding-left:18px;
}
 
#annonce_contenu_right {
    float:left;
    width:30%;
    text-align:right;
    padding-right:10px;
}
 
#annonce_spacer {
    height:1px;
    background-image:url(../images/annonce_sep.png);
    background-repeat:no-repeat;
}

Merci de toute aide ou aiguillage précieux qui me permettra d'avancer !

[Bisûnûrs]

Heu, ton code HTML est un peu construit n'importe comment là.

Tu as tout mis dans la balise header, qui au passage est censée avoir une hauteur de 151px selon ton code CSS.
Ca résume bien le reste, tout ton code est basé sur des erreurs de dimensions et d'imbrication.

Et avec un peu de recherche, tu aurais vu que le problème que tu avances est un problème très récurent (de nombreux sujets sur le forum) lié au contexte de formatage (je te laisse chercher avec ces termes).

[rems033]

Impec', c'est tout rectifié...
C'était en effet un problème de contexte de formatage...un overflow:auto absent qui cassais tout.
Soit disant en passant, le div header a été modifié aussi...
Merci bisounours et a plus tard