[Résolu] Problème marge dû à une balise <object> sous IE pas FF

Bonjour,

J'ai structuré une page en 3 colonnes de la manière suivante:

a écrit :

<div id="contenu">

<div class="index_gauche">
<p>
Colonne de gauche
</p>
</div>

<div class="index_centre">
<p>
Colonne du centre
</p>
</div>

<div class="index_droite">
<p>
Colonne de droite
</p>
</div>

</div>

le code css correspondant :

a écrit :

div#contenu
{
padding-left:10px;
padding-right:10px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
position:relative;
}

div.index_gauche
{
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px ;
margin-bottom: 0px ;
padding:0;
width:250px;
float:left;
border: solid 1px green;

}

div.index_centre
{
margin-left: 10px ;
margin-right: 10px ;
margin-top: 10px ;
margin-bottom: 0px ;
padding:0;
width:360px;
float:left;
border: solid 1px green;

}

div.index_droite
{
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px ;
margin-bottom: 0px ;
padding:0;
width:250px;
float:left;
border: solid 1px green;

}

Jusque là tout fonctionne correctement, j'ai bien 3 cadres séparés par des espaces de 10 px sous Firefox comme sous IE.

Maintenant, si je remplace dans la case du centre le bloc <p> par un bloc <object> pour afficher une animation flash, pas de problème sous Firefox mais sous IE il fait comme si au lieu de

a écrit :
div.index_centre
{
margin-left: 10px ;
margin-right: 10px ;
margin-top: 10px ;
margin-bottom: 0px ;
padding:0;
width:360px;
float:left;
border: solid 1px green;

}

j'avais écrit

a écrit :
div.index_centre
{
margin-left: 0px ;
margin-right: 20px ;
margin-top: 10px ;
margin-bottom: 0px ;
padding:0;
width:360px;
float:left;
border: solid 1px green;

}

j'ai essayé d'ajouter

a écrit :

div#contenu object
{

margin:0;
padding:0;
display:block;
}

Mais ça n'a rien changé. Si quelqu'un connait l'origine de la différence entre Firefox et IE lorsqu'ils traitent des balises <object>? Merci d'avance.

PS: Mon code pour la balise <object>

a écrit :

<object type="application/x-shockwave-flash" data="./flash/anim.swf" width="360" height="330">
<param name="movie" value="./flash/anim.swf" />
<param name="wmode" value="transparent" />
<p>Animation flash</p>
</object>

PS2: Explication en image du problème, chaque rectangle vert représente un bloc <div>

http://img177.imageshack.us/img177/7555/explicationii1.png
Modifié par Karadomine (24 Aug 2008 - 22:41)

De ce que j'ai testé il semblerait que la balise <object> ne soit pas du tout affectée par les changements que je fais au niveau du code css concernant les marges internes et externes, ni sous FF ni sous IE. La seule chose qui ait une incidence est l'attribut border, et il n'en a une que sous IE.

object
{
margin:100px;
padding: 50px;
border: dotted 1px #C0C0C0;
}

Renvoie la même chose que

object
{
border: dotted 1px #C0C0C0;
}

Si quelqu'un sait comment fonctionne la balise <object>...? merci.
Modifié par Karadomine (23 Aug 2008 - 17:47)

Bonjour,

Je pense que la balise 'object' est de type 'inline'.
En appliquant un 'display:block;' à 'object ça devrait aller.

Déjà tenté Sans incidence, malheureusement.

Après dans l'absolu je peux toujours placer l'animation en utilisant position:absolute; mais j'aimerais autant éviter, le jour où la taille des paragraphes qui sont au dessus et en dessous de l'animation devra changer dynamiquement ça va compliquer les choses.

Bonjour,

Peut-on voir une page en ligne, à tout hasard?

Mais dans l'absolu, j'aurais tendance à mettre l'espace de gauche en margin-right, sur le flottant de gauche, l'espace de droite en margin-left sur le flottant de droite, et peut-être le bloc central en pas flottant du tout...
Ou bien à utiliser du padding sur le bloc central, plutôt que des marges.
Modifié par Florent V. (24 Aug 2008 - 14:13)

Voici : http://www.serbis.fr/alsa/

Bon, ici vous ne verrez pas le problème apparaitre parce que j'ai placé l'animation en absolute à l'oeil au pixel près sur une image blanche de même taille qui elle est placée normalement. Sans ça toute la colonne du milieu est collée à la colonne de gauche sous IE mais pas sous FF.

PS: Rien ne fonctionne bien évidemment, ce n'est qu'une façade à l'heure actuelle.
Modifié par Karadomine (24 Aug 2008 - 15:09)

Merci Flo, ça marche en mettant les marges sur les flottants au lieu de les mettre sur le bloc du milieu. Par contre, le bloc du milieu reste insensible à son propre padding comme à son propre margin. Bizarre
Modifié par Karadomine (24 Aug 2008 - 22:42)

Karadomine a écrit :
Par contre, le bloc du milieu reste insensible à son propre padding comme à son propre margin. Bizarre

Ce ne serait pas plutôt parce que padding et margin en question passent sous les flottants, justement? Faire le test avec du background: red; sur le bloc du milieu (et du opacity: .5; sur les flottants, si besoin), ça devrait être parlant.

Et un peu de lecture:
Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Modifié par Florent V. (24 Aug 2008 - 23:03)