css image border-radius

Version imprimable

Bonjour,
Je rencontre une difficulté avec le css et certaines images.
En fait je voudrais arrondir le bord de mes images. Cela fonctionne bien avec la balise <img> mais pas avec la balise <input type="image"/> sous ie9. Les versions antérieures ne m'intéressent pas pour ce projet. Bien entendu mon code fonctionne sous Firefox et Chrome.

Voici mon code simplifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="page"> <div class="image"> <img src="./bbb.jpg"/> </div> <div class="image"> <form action="video.php" method="post"> <input type="hidden" name="video" value="ma_val" /> <input type="image" src="./bbb.jpg" alt="photo input" /> </form> </div> </div>
et le css associé très simple également
Code:

1 2 3 4 img, input[type=image]{ border-radius: 15px; box-shadow: 0 1px 5px #000000; }
Si quelqu'un a une solution pour que les inputs image puissent s'afficher avec un contour arrondir, merci de m'en faire part

27/06/2012, 11h44
mcoutant

Salut AndroChristophe,

Aucun problème de mon coté, peut être devrait tu regarder du coté de "mode de compatibilité"

Sinon essaye de mettre ceci

Code:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Merci pour ta réponse rapide mais de mon coté ça ne marche pas. Pourtant j'ai laissé que l'essentiel pour ce test. Je ne connaissais pas le "mode de compatibilité"

Voici mon code maintenant et une image pour vous montrer. En fait j'ai l'impression que l'arrondi se fait bien car l'ombre derrière est arrondi, mais que l'image est collé par dessus et du coup n'applique pas le style.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>...</title> <style> img, input[type=image]{ border-radius: 15px; box-shadow: 0 1px 5px 3px #000000; margin: 10px; } </style> </head> <body> <div id="page"> <div class="image" style="float:left;"> <img src="./bbb.jpg"/> </div> <div class="image"> <form action="video.php" method="post"> <input type="hidden" name="video" value="ma_val" /> <input type="image" src="./bbb.jpg" alt="photo input" /> </form> </div> </div> </body> </html>
http://img696.imageshack.us/img696/8090/erreurimage.png

Désolé je débute en css, j'espère ne pas avoir oublié un truc évident.

27/06/2012, 13h32
mcoutant

Bon bah je suis vraiment désolé pour toi, mais sur ce coup la je ne peux t'aider c'est IE qui interprète mal et donc je vois pas comment faire si quelqu'un d'autre à la solution je serais ravis de la découvrir ^^