Problème d'interprétation de float sur IE
Bonjour,
J'ai un soucis d'interprétation de mon fichier css sur IE.
Voila le source :
Code:
1
2
3
4
5
6
7
8
9
10
11
| <div class="bande-degrade">
<div class="degrade-angle-gauche">
<img src="..." alt="..." />
</div>
<div class="degrade-blue-middle">
<a href="#" onclick="javascript:submitForm(document.forms[0]);"><img src="..." border="0" alt="..."/></a>
</div>
<div class="degrade-angle-droit">
<img src="..." alt="" />
</div>
</div> |
et mes classes css :
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
| .bande-degrade{
width: 582px;
height: 43px;
float: left;
margin: 0;
border-top: 2px solid white;
}
.degrade-angle-gauche{
width: 8px;
height: 43px;
float: left;
}
.degrade-angle-droit{
width: 8px;
height: 43px;
float: left;
}
.degrade-blue-middle{
width: 566px;
height: 33px;
float: left;
text-align: right;
padding-top: 10px;
background: URL("...");
} |
L'idée est de faire un bandeau constitué de 3 images :
- la première est la bordure gauche avec les bords arrondis.
- la deuxième est une zone avec en background, une image dégradée, et aligné à droite un bouton de validation de formulaire.
- la dernière est la bordure droite avec les bords arrondis.
Mon soucis semble venir du float. IE met ces 3 éléments l'un en dessous de l'autre au lieu de les alignés (Alors que sur Firefox, tout marche sans problème).
Après avoir revérifié plusieurs fois mon code, et en vérifiant le fonctionnement de la propriété float, je n'arrive pas à déterminer ce qui coince.
Merci de votre aide.
