[Resolu] Interprétation de float sous IE

Bonjour,

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

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

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

J'ai également testé avec un pied de page avec clear:both, mais même résusltat.

J'ai bien sur regarder d'autres messages traitants du même sujet, et je n'arrive toujours pas à résoudre ce problème.

Merci de votre aide.
Modifié par Fleep (29 Jan 2007 - 18:20)

Après plusieurs test avec ou sans div, avec ou sans float, je suis toujours au même point.

J'ai parcourus plusieurs tutoriaux présents ici, mais impossible d'arriver à mes fins.

Pourtant l'idée est simple : faire un bandeau constitué de 3 parties mis bout à bout.

La propriété float me parrait donc la plus approriée dans des div, mais IE ne veut rien savoir

J'ai vu un sujet qui traitait d'un "bug" de marge sous IE qui décallait les éléments de 3 pixels. Ce serait peut etre l'origine de mon problème, mais j'avoue ne pas avoir bien saisie le principe.

Enfin, pour essayer j'avais testé le faite de réduire également mes composants de qqs pixels dans un conteneur plus grand, mais même résultat, donc au final je suis perdu.

Merci de votre aide.

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

Bonjour,

Pour tes solutions display: inline, c'est normal, tes blocs se conforme aux propriétés des balises inlines ...

Pour ton problème, il te suffit de garder ta première solution en float left pour tes 3 bloc en ayant pris soin d'annuler les valeurs de margin par défaut soit margin: 0 pour tes 3 blocs et tu annuleras le bug d'ie.

Si la sortie de float te géne tu peux choisir les positions absolutes :

<style type="text/css">
*{padding: 0; margin: 0;}

#conteneur{
width: 800px;
margin: auto;
height: 400px;
border: 1px solid black;

}

.bande-degrade{

	width: 582px;
	height: 43px;
	position: relative;
	border: 1px solid black;
	
}

 

.degrade-angle-gauche{
	width: 8px;
	height: 43px;
	position: absolute;
	top:0;
	left: 0;
	background: red;

}

 

.degrade-angle-droit{

	width: 8px;
	height: 43px;
	position: absolute;
	top:0;
	right: 0;
	background: red;
}

 

.degrade-blue-middle{
	width: 566px;
	height: 33px;
	position: absolute;
	top:0;
	left: 8px;
	text-align: right;
	padding-top: 10px;
	background: yellow;

}
</style>
<body>
<div id="conteneur">
	<div class="bande-degrade"> 
 	 <div class="degrade-angle-gauche">
 	 </div>

 	 <div class="degrade-blue-middle">
 	 <input type="submit" value="Bouton" />
 	 </div>

 	 <div class="degrade-angle-droit">
  	</div> 

   </div> 
</div>
</body>

Bon courage

Posts croisés .... avec ghost ...

Ben ... tu résoud tout toi même, bravo !

a écrit :

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.

Tu as un problème (sous IE) de width... dû à border:2px... :
au total tu essayes de faire entrer 566 + 8 + 8 + (2 x 2) = 586px dans 582px
Autre chose (rien à voir avec ton problème) mais j'utiliserai plutôt des id à la place des class ... et je remettrais margin et padding à zéro avant de commencer ...

J'ai essayé ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
  <style type=text/css>
* {
  margin:0;
  padding:0;
}
#bande-degrade{
	border:1px solid red;
  width: 582px;
	height: 43px;
	margin: 0;
}
#degrade-angle-gauche{
	width: 30px;
	float: left;
}
#degrade-blue-middle{
	width: 520px;
	float: left;
	text-align: right;
}
#degrade-angle-droit{
	width: 30px;
	float: left;
}
</style>
 </head>
  <body>
<div id="bande-degrade"> 
  <div id="degrade-angle-gauche">
    T1
  </div>
  <div id="degrade-blue-middle">
    <img src="..." alt=" " ...>.
  </div>
  <div id="degrade-angle-droit">
    T2
  </div> 
</div>
  </body>
</html>

ça te conviens ?
Modifié par g41687 (30 Jan 2007 - 16:20)

Bon, déjà merci pour vos réponses.

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 .

Par contre, j'ai essayé avec vos versions et malheureusement ca ne fonctionne pas.

voilà comment j'ai procédé :

<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é :

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

En tout cas, merci quand même pour vos idées.

PS: g41687, mon bandeau est bien de 582 px, les 2px dont tu parles sont situés au dessus (border-top) et non sur la largeur, mais merci quand meme
Modifié par Fleep (30 Jan 2007 - 17:20)

Re,

En fait la solution la plus simple serait de ne faire qu'un seul bloc avec toute ton image de fond en bakground, car le seul interêt de cette méthode en 3 blocs (4 blocs c'est trop !) c'est à dire 1 conteneur avec le background centré et un en float left, (ou absolute left et right) l'autre en float right serait de rendre ce système extensible. Ce qui n'a pas l'air d'être le cas.

J'ai essayé, mais sans succès.

Je dis pas que ca marcherait pas, bien sur la logique voudrait que ca fonctionne, mais je pense que dans mon cas il doit y avoir un problème de configuration ailleurs qui fait que ca fait tout foirer.

Bref, merci quand même ^^.
Modifié par Fleep (30 Jan 2007 - 17:35)