Discussion :

[Fleep]

Bonjour,

J'ai un soucis d'interprétation de mon fichier css sur IE.
Voila le source :

Code html :

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

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 :

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
.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.

[trotters213]

Alors plusieurs choses :

• Utilise des id (#) plutôt que des classes étant donnée que tes div sont uniques (apparemment)
• Mets ceci au début de ton code CSS

  Code :

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

  1
  2
  3
  4
  * {
  margin:0;
  padding:0;
  }

  car dans tonc code tu donnes un margin à 0 mais tu ne définis pas le padding
• Si ton image de fond est juste un dégradé alors ne mets pas l'image complète en fond d'écran (car c'est trop lourd) mais juste une image qui fait 1px de large et que tu répètes sur l'axe des x.
• Si ça ne fonctionne toujours pas essaie d'agrandir, de quelques pixels à peine, la largeur de bande-degrade.

[Fleep]

Merci pour ta réponse.

J'ai donc mis en application tout ce que tu m'as dis, mais rien à faire.

- En ce qui concerne les id, c'est juste pour que ce soit soit plus propre, mais bon, je pense pas que ca change grand chose au résultat, je me trompe ?

- Pour l'image de fond, c'est bien sur un trait d'1 pixel de largeur sur 43 de hauteur.

- J'ai tenté d'agrandir effectivement le bande-degrade, mais rien à faire
D'ailleurs, sous IE, il ne m'affiche même pas l'image de fond ce qui est encore plus bizarre.

En effet, j'obtiens en définitive mes images les unes en dessous des autres avec le bouton submit au milieu, mais privé de son fond dégradé.

Au début j'ai bien cru effectivement à un problème de dimensionnement, mais après vérification, tout est bien calculé au pixel pres.

J'ai tenté de modifier la valeur de float, et aussi surprenant que ca soit, un coup il m'affiche mon dégradé, un coup non, bref j'ai vraiment l'impression qu'il interprete le float au petit bonheur la chance.

[Fleep]

Bon, j'avance tout seul

En faisant 2-3 recherches, au final, j'ai trouvé que cela provenait bien d'un bug de IE.

En effet, lorsque vous mettez un élément à la suite d'un div flottant dans un conteneur et que vous avez définis une valeur de margin, IE va doubler cette valeur de margin.

Le résultat est que du coup, mon conteneur (qui était calculé au pixel pret) n'était alors pas assez grand pour contenir mes 3 blocs flottants.

Pour résoudre ce problème, il faut forcer et violer un peu la norme W3C en changeant le style du float par "display: inline".

voici l'adresse de la page qui m'a donné les explications : Floats, Margins and IE

Bref, mon problème est presque résolu, mais pas tout à fait.

Mon idée est de faire un bandeau constitué de 3 parties :
- la partie de gauche avec les coins arrondis de mon bandeau.
- la partie centrale avec un bouton de validation de formulaire.
- la partie de droite avec les coins arrondis de mon bandeau.

J'ai encore un dernier problème sur IE, c'est que celui ci réduit la zone centrale à la taille du bouton de validation au lieu de l'étendre en fonction du nombre de pixels dont je l'ai déclaré.

En gros, il ignore les paramètres (tel que "text-align: right;") que j'ai déclaré dans la classe de ma zone centrale.

Merci de votre aide ... et de la mienne aussi

[Fleep]

Donc j'ai enfin réussis à résoudre mon problème, maintenant j'ai bien le résultat que je voulais à la fois sur IE et sur FF .

voilà comment j'ai procédé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="bande-degrade">
  <div class="degrade-angle-gauche" style="display:inline">
    <img src="..." alt="" />
  </div>                    
  <div class="degrade-blue-middle" style="display:inline; margin-left:444px; vertical-align:super;">
    <a href="#" onclick="javascript:submitForm(document.forms[0]);"><img src="..." border="0" alt=""/></a>
  </div>
  <div class="degrade-angle-droit" style="display:inline">
    <img src="..." alt="" />
  </div>
</div>

et le css associé :

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
.bande-degrade{
    width: 582px;
    height: 43px;
    float: left;
    margin: 0;
    padding:0;
    border-top: 2px solid white;
    background: URL("...");
}
 
.degrade-angle-gauche{
    width: 8px;
    height: 43px;
}
 
.degrade-angle-droit{
    width: 8px;
    height: 43px;
}
 
.degrade-blue-middle{
    width: 566px;
    height: 33px;
    text-align: right;
    vertical-align: super;
    padding-top: 10px;
}

Au final, j'ai abandonné l'idée d'utiliser des float, j'ai donc rusé en définissant une marge entre mon bouton et le bord gauche de ma zone centrale, tout en définissant mes div en inline.

Alors, on va me demander : Pourquoi ne pas avoir mis certains attributs directement dans mon css ??

Et bien, aussi bizarre que ca puisse paraittre, les attributs que j'ai rajouté après mon "class" ne sont pas interprétés par IE si je les mets dans mon css !!!

Ca reste un mystère, et moi même je cherche toujours pour quelle raison le faite de mettre "margin-left:444px;" dans la balise div est interprété par IE, alors que si vous la mettez dans le css, elle ne le sera pas ... ... vive IE !!!

Alors, en faite, ce qu'il faut savoir est que j'ai repris le code d'une page, et qu'avant mes balises div, il y a deja pas mal de code. Je soupsonne donc qu'il y ait une sorte de conflis (le développeur ayant abusé de div flottants dans tous les sens).

C'est dommage, car bon, ca fait un peu brouillon ces attributs directement dans la balise, mais bon, au moins ca marche !

En tout cas, si vous avez une idée sur ce qui peut générer un tel conflit je serait vivement interessé.

Et puis, un grand merci à moi-même