28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voila je cree une page avec cadres arrondis. Ca passe bien sous firefox, mais pas sous ie.

Sous IE : le 1er bloc ne se voit pas , et les bors de mes cadres sont faussés, comme abimés....

Vous pouvez voir l'image sous FF ici :
http://www.imageshotel.org/images/catseb/blocff_1.png

Celle sous IE ici :
http://www.imageshotel.org/images/catseb/blocie.png

Le code est inspiré de "cadre arrondi" de AlsaCreations, merci a eux.

Voici le code :

<style type="text/css">
body {font: 1em black verdana, sans-serif;}
#cadre1, #cadre4 {background-color: #FDD73D;}
#cadre1 {width:48%; float:left;}
#cadre2 {margin-left:52%;}
#cadre3 {margin-left:52%}
#cadre2, #cadre3, #cadre5 {background-color: #7BFB49;}
#cadre1, #cadre2, #cadre3, #cadre4, #cadre5 {margin-bottom:15px;}
#hg1, #hd1, #bg1, #bd1, #hg2, #hd2, #bg2, #bd2, #hg3, #hd3, #bg3, #bd3, #hg4, #hd4, #bg4, #bd4, #hg5, #hd5, #bg5, #bd5 {height: 19px; width: 19px; background-repeat: no-repeat; font-size:1px;}
#hg1, #hg4 {background: url(hgo.gif);}
#hd1, #hd4 {float: right;background: url(hdo.gif);}
#bg1, #bg4 {background: url(bgo.gif);}
#bd1, #bd4 {float: right;background: url(bdo.gif);}
#hg2, #hg3, #hg5 {background: url(hgv.gif);}
#hd2, #hd3, #hd5 {float: right;background: url(hdv.gif);}
#bg2, #bg3, #bg5 {background: url(bgv.gif);}
#bd2, #bd3, #bd5 {float: right;background: url(bdv.gif);}
</style>
<title></title>
</head>
<body>
	<div id="cadre1">
	<div id="hd1"></div><div id="hg1"></div>
	<div id="contenu">
		<p>bla bla bla</p>
		<p>bla bla bla</p>
		<p>bla bla bla</p>
		<p>++++</p>
		<p>Suite...</p>
		<p>Finnnnnnn</p>
	</div>
	<div id="bd1"></div><div id="bg1"></div>
	</div>
	<div id="cadre2">
	<div id="hd2"></div><div id="hg2"></div>
	<div id="contenu">
		<p>Texte de contenu</p>
		<p>Suite...</p>
	</div>
	<div id="bd2"></div><div id="bg2"></div>
	</div>
	<div id="cadre3">
	<div id="hd3"></div><div id="hg3"></div>
	<div id="contenu">
		<p>Texte de contenu</p>
		<p>Suite....</p>
	</div>
	<div id="bd3"></div><div id="bg3"></div>
	</div>
<div id="cadre4">
	<div id="hd4"></div><div id="hg4"></div>
	<div id="contenu">
		<p>Texte de contenu</p>
		<p>bla bla </p>
	</div>
	<div id="bd4"></div><div id="bg4"></div>
</div>
<div id="cadre5">
	<div id="hd5"></div><div id="hg5"></div>
	<div id="contenu">
		<p>Texte de contenu</p>
		<p>bla bla </p>
	</div>
	<div id="bd5"></div><div id="bg5"></div>
</div>
</body>
</html>


Donc ma question est simple :

Comment faire en sorte que le bloc du haut se voit sur IE, et comment corriger les imperfections d'affichage de IE ?

Merci par avance a tous.
Chez moi le code marche parfaitement sur Ie 6.0. ( sans les images ).
Si ce code fait partie d'une page plus complète, le soucie provient probablement de là ou de ta version d'Ie.