IE6: coins arrondis sur une div

[nina_bee]

bonjour,

pour les besoins de mon site, je voudrais creer une boite avec une bordure et des coins arrondis. Sur firefox et ie7 aucun problème mais IE6 semble récalcitrant. J'ai donc fait une feuille de style spéciale IE6 appelée avec des commentaires conditionnels.

Pour créer mon cadre aux bords arrondis, j'ai creer une div section3 avec une bordure de 2px. A l'intérieur, j'ai placé une div haut et une div bas chacune contenant deux petites div qui affichent des images des coins arrondis.

Je les cale avec des margin mais le blanc de l'image ne recouvre pas les coins carrés!!

voila le code XHTML:

<div id="section3">
		<div id="haut">
			<div id="coin_hg"></div><div id="coin_hd"></div>
		</div>
		<div id="formulaire">
			<form name="search" id="recherche" method="post" action="resultatrecherche.php"> 
			<label for="recherche">Accès direct: </label><input type="text" name="recherche" class="champ" />
			<input type="submit" id="rechercher" value="ok" name="ok" />
			</form>
		</div>
		<a href="user.php">espace utilisateur</a>
		<div id="bas">
		<div id="coin_bg"></div><div id="coin_bd"></div>
		</div>
	</div>

et les CSS:

#section3{
	height:45px;
	background-color:#FFFF00;
	border:2px solid #b6acaa;
	margin-top:5px;
	white-space:nowrap;
}

#section3 div#haut{
	height:21px;
	margin-top:-4px;
	white-space:nowrap;
}

#section3 div#haut div#coin_hg{
	height:21px;
	width:21px;
	background-image:url(../img/coin_hd.gif);
	float:left;
	margin:-2px 0 0 -5px;
	white-space:nowrap;
}

#section3 div#haut div#coin_hd{
	height:21px;
	width:21px;
	background-image:url(../img/coin_hg.gif);
	float:right;
	margin-right:-6px;
	white-space:nowrap;
}

#section3 form{
	margin:-10px 0 0 150px;
}

#section3 a{
	float:right;
	margin:-15px 70px 0 0;
}

#section3 div#bas{
	height:21px;
	margin-top:-5px;
	white-space:nowrap;
}

#section3 div#bas div#coin_bg{
	height:21px;
	width:21px;
	background-image:url(../img/coin_bg.gif);
	float:left;
	white-space:nowrap;
	margin:0 0 0 -5px;
}

#section3 div#bas div#coin_bd{
	height:21px;
	width:21px;
	background-image:url(../img/coin_bd.gif);
	float:right;
	white-space:nowrap;
	margin:0 -5px 0 0;
}

[Sarc]

Bonjour,

Aurais-tu la possibilité de mettre cette page en ligne, avec toutes les images, et tout et tout ? Ca serait plus facile de visualiser les problèmes et de traficoter directement dessus.

Sinon, est-ce que ce menu a une largeur fixe, ou variable ? Parce que si c'est fixe, il vaut mieux pas utiliser autant de div. Si c'est variable aussi tu me diras, y'a possibilité de faire moins...

Enfin, essaye de mettre la page en ligne, ça sera plus facile de te conseiller

[Vikchill]

Décidément, on vois ça partout en ce moment

Regarde ici, si tu veux t'en inspirer: http://www.vikchill.fr/round_corner.htm

Un peu de doc? <clic>

[Régis]

Bonjour 'nina_bee',

=> "je voudrais creer une boite avec une bordure et des coins arrondis."

Voici une application pour webdesigner : RoundedCorner propose de générer du code .css et .html pour faire des "boites" avec des coins arrondis.

Pratique...