28172 sujets

CSS et mise en forme, CSS3

Bug FireFox border-radius

Bonjour,

J'ai un bug d'affichage lorsque j'utilise border-radius avec une bordure autre que 'solid'. Pour le cas actuel, je veut faire mes boutons de formulaire avec du css, donc avec de la bordur inset et outset, mais j'ai deux coin avec un bug d'affichage.

J'ai chercher un peu sur le net mais pas trouvé de référence à ce bug... Ca vous dit quelques chose ? Et/ou, une idée de solution à se problème ?

Le css de mes boutons :

input[type=submit], input[type=reset] {
	background-color:#e27903;
	border-color: #e27903;
	border-style: outset;
	border-width: 1px;
	font: 11pt Verdana;
	color: #fff;
	border-radius : 8px;
 }


D'avance, merci ;o)
Modérateur
Bonjour,
Voici le rendu que j'ai chez moi, ça à l'air de fonctionner sauf pour IE... (Opera fonctionne aussi)
upload/15086-outset-rad.jpg
Voici le bug que ça me donne :
upload/50673-bugbtn.jpg


Win 7 64bits
Firefox 22.0 ( pas de bug sous IE10 )

Il arrive dans certain cas ( mais je ne sais déterminer lesquels ) qu'en raffraichissant ( ou en faisant jouer le bouton avec du survol ), il finisse par s'afficher correctement. Mais il y a des cas ( c'est ce que je viens de remarquer ) où il n'y a visiblement rien a faire.

Voici les css du bouton que j'ai mis en image :


input[type=submit], input[type=reset] {
	background-color:#e27903;
	border-color: #e27903;
	border-style: outset;
	border-width: 3px;
	font: 14pt Verdana;
	color: #fff;
	border-radius : 8px;
 }
	input[type=submit]:hover, input[type=reset]:hover {
	 background-color:#eb9b0d;
	border: #e27903 inset 3px;
	 }
	input[type=submit]:active, input[type=reset]:active {
	 background-color:#dd6b01;
	border: #e27903 inset 1px;
	}

Modifié par MrWhite (09 Jul 2013 - 18:19)
Hello,

Je ne rencontre pas ce problème, mais je suis sous mac...
http://dabblet.com/gist/5959001
Si quelqu'un d'autre peut tester sur une config proche de la tienne...

As-tu vérifié si tu n'avais pas de "styles parasitaires" qui viendraient interférer avec tes propriétés (avec Firebug par exemple) ?
Un script js pour faire passer certains styles à certains mauvais élèves ou vieux dinosaures ?
Bonjour,

Tu as un espace avant le deux-points dans ta déclaration (border-radius : 8px;), ça vient peut-être de là.
Modifié par thierry (09 Jul 2013 - 19:59)
Modérateur
Yordi a écrit :
Bonjour,
Voici le rendu que j'ai chez moi, ça à l'air de fonctionner sauf pour IE... (Opera fonctionne aussi)
upload/15086-outset-rad.jpg

Pour info, j'étais sous Win 7 64bits avec Firefox 20.0.1 et je viens de faire la mise à jour vers Firefox 22 et toujours aucun soucis...

Fais le test sur un page totalement à part en appliquant juste ce que tu à donné...
Modifié par Yordi (10 Jul 2013 - 09:54)
Rectification faite, mon OS c'est du 32bits.

J'ai fait ma page test, toujours le bug...
Je vous mets les codes :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                
		<link rel="stylesheet" type="text/css" href="./css/styles_test.css" />
		
		<title>test</title>
		
	</head>
<body>
<form>
	<input type="submit" name="modif_cat" value="SEND FILE"/>
</form>
</body>
</html>


Et le css :


input[type=submit], input[type=reset]{
	background-color:#e27903;
	border-color:#e27903;
	border-style:outset;
	border-width:3px;
	color:#fff;
	border-radius:8px;
 }
	input[type=submit]:hover, input[type=reset]:hover{
	background-color:#eb9b0d;
	border-color:#e27903;
	border-style:inset;
	border-width:3px;
	border-radius:8px;
	 }
	input[type=submit]:active, input[type=reset]:active{
	background-color:#dd6b01;
	border-color:#e27903;
	border-style:inset;
	border-width:3px;
	border-radius:8px;
	}
Par chance j'ai vu l'un de mes boutons sans bug. J'ai donc isolé au maximum le code qui fait que ça fonctionne. Dès que je retire une ligne de css, le bug apparrait. Il faut par exemple absoluement que le bouton soit centré. Pour le moment, je comprends absolument pas les raison de ce bug, mais au moins on y voit plus claire.

Voici les codes de ma page test.
HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                
				<link rel="stylesheet" type="text/css" href="./css/styles_test.css" />
		
		<title>test</title>
		
	</head>
<body class="general"> 
<div class="conteneur">
<form action="deposit_files.php" method="post">
	<input type="submit" name="modif_cat" value="SEND FILE"/>
</form>
</div>
</body>
</html>




body.general{
	background:  url(../img/bg.jpg) no-repeat;
	background-attachment:fixed;
}
div.conteneur {
	background-color:#fff;
	
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/* ------ Bordure arrondie  ------*/
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: #000 0px 2px 40px;
	-moz-box-shadow: #000 0px 2px 40px;
	box-shadow: #000 0px 2px 40px;
	behavior: url(/pie/PIE.htc);
}
/****************************************************************************/
/*  <<<<<<<<<<<<<<<<<<<       Les FORMULAIRES       >>>>>>>>>>>>>>>>>>>>   */
/**************************************************************************/
form{
	text-align:center;
}
input[type=submit], input[type=reset] {
	background-color:#e27903;
	border-color: #e27903;
	border-style: outset;
	border-width: 3px;
	font: 14pt Verdana;
	color: #fff;
	border-radius : 8px;
 }


Ca donnera peut-être des idées à certain sur l'origine de ce bug. Bien qu'il y ai de bonne chance que ce soit liée à un problème sur ma machine... Mais lequel... ?
EDIT : je viens de tester sur un autre pc et effectivement, j'ai pas le bug ( Win7 64bits ; FF 22.0 )
Modifié par MrWhite (12 Jul 2013 - 17:01)
Sujet clos
Aller à