Mise en page IE problématique...

bonjour,

j'aurais besoin d'un peu d'aide, car j'ai peur de ne plus avoir le recul nécessaire pour résoudre un problème d'incompatibilité avec Explorer...

Ce que je veux faire :
Deux colonnes de texte (ou autre), côte à côte.
Un background-image qui se répète sur toute la hauteur que la colonne de droite soit plus longue que la gauche et vice et versa.

Voici le code html :

<div id="intro">
	<div id="presentation">
		<p> texte 1 </p>
	</div>
	<div id="zoneReactive">
		<p> texte 2</p>				
	</div>
	<br class="cleared" />
</div>

Oui, j'en suis même arrivé à faire un très moche "<br>" cleared...
Le code CSS :

#intro{
  margin-top:2em;
  border-top:1px solid #b8b7b4;
  border-bottom:1px solid #b8b7b4;
  position:relative;
  background:repeat-y top center url(images/fondIntro.gif) #e0ded7;
  font-family:verdana, arial, sans-serif;
  font-size:0.8em;
}
.cleared {
  clear:both;
}
#presentation{
  float:left;
  width:60%;
  margin-left:20px;
  margin-left:39px !important; 
}
#zoneReactive{
  float:right;
  width:30%;
}

Merci de votre aide !
Modifié par Fugita (16 Jan 2006 - 23:46)

bonjour,
mise a part une inversion de ligne , je vois pas ce qui cloche:

#presentation{
  float:left;
  width:60%;
  margin-left:39px !important; 
  margin-left:20px;/* cette ligne devait etre apres la suivante */
}

Generalement, quand je veut m'affranchir du bug de double marge d'IE,et quand c'est possible je transforme le margin-left du contenu flottant par un padding-left du conteneur de même valeur.

a plus

Merci du conseil pour le padding.

Le problème vient du fait que l'image d'arrière plan ne s'affiche pas sous IE. La couleur de fond ne s'affiche même pas.

rebonjour
as tu essayer de changer ta façon de declarer tes valeurs a background ?

 background:url(images/fondIntro.gif) repeat-y top center  #e0ded7;

ou

background-color: #e0ded7;
background-image:url(images/fondIntro.gif);
/* .etc ... */

Parfois IE zappe sans raison apparentes certaines regles ....
As tu un lien pour que l'on se rende compte du rendu IE/firefoxe ou un autre ?
ou le code html complet avec son doctype ?
a plus

Bonjour,

C'est un bug de reflow : supprimer la position relative ou ajouter à celle-ci n'importe quelle propriété dotant le conteneur de haslayout (width, height, zoom, float, etc), ce qui obligera IE à redessiner correctement l'élément en position relative.

Remarque par ailleurs : bien que l'ordre des valeurs de la propriété background soit théoriquement indifférent en CSS2.1, il est préférable de n'utiliser que l'ordre canonique, pour des problèmes d'implémentation lié à d'autres navigateurs. Cet ordre est :

CSS2.1 a écrit :
<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>

Modifié par Laurent Denis (16 Jan 2006 - 08:52)

Merci !
IE affiche bien le background-image en retirant à #intro le "position:relative;" et en ajoutant "height:auto !important; height=7em;"

Mais c'est très tordu comme solution

Fu'
Modifié par Fugita (17 Jan 2006 - 00:05)