28172 sujets

CSS et mise en forme, CSS3

Div invisible dans IE6

Bonjour,

Je fais appel à vous, je sèche complètement.
J'ai un bloc positionné en absolute dans un bloc relative qui refuse d'apparaitre sous IE6. Il apparaît correctement sous IE7, firefox, safari.
Le truc étrange, c'est que si je manipule ses propriétés en css, si je lui mets un xxxx.style.display="none" puis un xxxx.style.display="" alors il apparaît.
Vous pouvez voir mon problème sur http://www.beemyfriend.org sur la page d'entrée.

Voici comment mes blocs sont structurés :

C'est le bloc <div id="laphotocontenu"> qui refuse d'apparaître.

********************CSS********************


#lebandeau{
	background:#CC66CC;
	margin-left: auto;
    margin-right: auto;
    width: 950px;
}

#lelogo{
	float:left;
	width: 340px;
	height:135px;
}

#lanav{
	float:left;
	background:#FFFFFF;
	width: 610px;
	height:135px;
}

#lecorps{
	position:relative;
	clear:both;
	z-index:1;
	/*background:#FF9900;*/
	margin-left: auto;
    margin-right: auto;
    width: 950px;
}

#lemenutexte{
	position:relative;
	float:left;
	background:#FFFFFF;
	width: 170px;
	height:415px;
}

#lemenuimage{
	position:relative;
	float:left;
	background:#FFFFFF;
	width: 170px;
	height:415px;
}

#lecontenu{
	position:relative;
	float:left;
	background:#FFFFFF;
	overflow:auto;
	text-align:justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	/*line-height:18px;*/
	height:415px;
	width: 420px;
	padding-left:20px;
	padding-right:20px;

}

#lestags{
	position:relative;
	float:left;
	background:#FFFFFF;
	width: 150px;
	height:415px;
}

#laphotocontenu{
	position:absolute;
	left:340px;
	top:0px;
	width:460px;
	height:415px;
	/*background:#FFFFFF;*/

}



***************HTML*******************************


<body>

<div id="lebandeau">
	<div id="lelogo">
    		xxx
    	</div>
    	<div id="lanav">
    		xxx
	</div>
</div>

<div id="lecorps">
	
	<div id="lemenutexte">
    	
	
		<ul>
			<li>xxx
			<li>xxx
			<li>xxx
			<li>xxx
			<li>xxx
		</ul>

	</div>
    
	<div id="lemenuimage">
    		xxxxx
	</div>
    
    	<div id="lecontenu"></div>    
    	<div id="lestags"></div>
    
    
   	<div id="laphotocontenu" style="z-index:10;"><img src="z_img/460415/imagecontenuhome.jpg"></div>

</div>
</body>


Merci de vote aide, je vous avoue que je suis un peu dépité, pcq j'ai essayé pasmal de choses, et je ne suis jamais arrivé à le faire apparaître dans IE6......

bison.
Modifié par bisonfute (15 Mar 2008 - 15:25)
Salut,

Elle ne refuse pas d'apparaitre elle est sous tes blocs Smiley cligne
Dans l'etat je ne vois pas pourquoi tu te compliques la vie comme ça?
Mais si tu tiens à ce montage de positionnement:

#lecontenu{
	position:relative;
	float:left;
	background:#FFFFFF;
	text-align:justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	/*line-height:18px;*/
	height:415px;
	width: 420px;
	padding-left:20px;
	padding-right:20px;

}

#lestags{
	position:relative;
	float:left;
	background:#FFFFFF;
	width: 150px;
	height:415px;
}

#laphotocontenu{
	position:absolute;
	left:0px;
	top:0px;
	width:460px;
	height:415px;
	/*background:#FFFFFF;*/

}


    <div id="lemenuimage">
    	<div id="menuimagephotohome"></div>	</div>
    
    <div id="lecontenu">
	   	<div id="laphotocontenu"><img src="imagecontenuhome.jpg" ></div>
    	    </div>    
    <div id="lestags">
    	    </div>
Hello,

En fait, je me complique la vie pcq entre chaque bloc j'ai des includes php pour générer le contenu qui devient plus complexe par la suite, tu peux jeter un oeil en naviguant sur le site. Cela dit, ça ne m'etonnerait pas que j'ai fait des trucs tordus par moment.

Sinon, j''ai essayé ta solution et ELLE MARCHE !!!

Mais, je ne comprends absolument pas.

Pourquoi mon bloc est-il dessus alors qu'il a un z-index de 10 ? Pourquoi est-ce qu'il devient visible si en javascript je fais un bloc.style.display="none";bloc.style.display=""; ??
Pourquoi est-ce que ça marche dans firefox, IE7 et safari??

Merci de tes réponses parce que là je t'avoue que je comprends pas.

Merci bcp !

bison.
Hello,

En fait, je me complique la vie pcq entre chaque bloc j'ai des includes php pour générer le contenu qui devient plus complexe par la suite, tu peux jeter un oeil en naviguant sur le site. Cela dit, ça ne m'etonnerait pas que j'ai fait des trucs tordus par moment.

Sinon, j''ai essayé ta solution et ELLE MARCHE !!! mais seulement à moitié. En effet, lorsque mon bloc de contenu a un overflow et qu'une scrollbar apparait, mon image ne passe pas par dessus la scroll bar, ce qui fait un effet très moche.

Mais, je ne comprends absolument pas pourquoi ma solution ne marchait pas !!

Pourquoi mon bloc est-il dessus alors qu'il a un z-index de 10 ? Pourquoi est-ce qu'il devient visible si en javascript je fais un bloc.style.display="none";bloc.style.display=""; ??
Pourquoi est-ce que ça marche dans firefox, IE7 et safari??

Merci de tes réponses parce que là je t'avoue que je comprends pas.

Merci bcp !

bison.
Modifié par bisonfute (15 Mar 2008 - 14:26)
Sujet clos
Aller à