Bordures arrondies sous IE (fonctionne sous FF)

Bonjour,

je travaille actuellement sur un design, et j'aurai souhaité avoir des bords arrondis sur certains "blocs". J'ai utilisé http://www.roundedcornr.com/ pour la génération des images et du code, et j'ai retouché ce dernier (afin d'éviter une marge).

Le résultat fonctionne sur une partie de ma page (en haut et en bas) mais pas sur une autre (à droite, les blocs d'information).

Je vous laisse juger :
url : http://lebret.info/dbf/design/dbformation.com/
login : user
pass : password

Essayez avec Firefox puis avec IE, et vous comprendrez tout de suite mon problème (voir à droite).

Sous Firefox : http://lebret.info/dbformation-bloc-arrondi-firefox.jpg
Sous IE : http://lebret.info/dbformation-bloc-arrondi-ie.jpg


J'ai également un problème de marge en bas de page : fonctionne sur Firefox, mais pas sur IE. Si vous voyez d'autres problèmes, n'hésitez pas.


Si vous pouviez m'aider, je vous en serai reconnaissant

Bonjour,

Je n'aurais pas procédé ainsi pour intégrer ces coins arrondis.
Pour le conteneur principal ou le pied de page, j'aurais utilisé quatre coins (des éléments span vides, par exemple) positionnés en absolu, en positionnant le conteneur principal et le pied de page en relatif. Cette technique est décrite dans l'article Faire un cadre arrondi ou graphique en CSS et XHTML (deuxième exemple).

Pour les titres des blocs de la colonne de droite, il suffit d'utiliser deux images de fond (coin haut gauche et coin haut droite) et donc deux éléments imbriqués. On peut donc avoir un code HTML dans ce style:

<h4 class="box-title"><span>À propos de Entreprise</span></h4>
<div class="box-content">
	Entreprise est un centre de formation agrémenté...
</div>

(Astuce: passer le span dans le titre en display: block, et utiliser du padding qui va bien sur cet élément. Ah oui, et ne pas donner de largeur à tous ces éléments, mais se contenter de donner une largeur à la colonne et laisser les éléments prendre toute la largeur disponible.)

Pour ce deuxième cas, les principes à utiliser sont décrits ici: boîte avec bordures en HTML et CSS. Il faut pas mal adapter, mais si on comprend la logique de cet exemple on doit être capable de faire ces coins arrondis très facilement.

PS: les coins arrondis, c'est has been.
Modifié par Florent V. (23 May 2008 - 18:04)