I have some trouble trying to define styles to form buttons. My application has to be IE6 compatible, which means I can't use attribute selectors. I added a class to each button instead.
Here is the code of one of my buttons (ASP.Net auto-generated code)
<input type="submit" name="ctl00$cphContenu$adminTabContainer$adminTabAccueil$ctl01" value="Valider" class="formBouton" />
And here are the CSS definitons that should affect it
*
{
font-family:verdana, sans-serif;
font-size:12px;
margin:0;
padding:0;
border:0;
}
input, textarea, select
{
border:2px inset #ccc;
}
.formBouton
{
border:2px outset #ccc;
}
The result is a button with an inset border. My first clue was that some other CSS in my style sheet was interfering, so I checked with Firefox's web developer toolbar which styles were applied to my button. Only two selectors are used : universal selector, and tag selector. No unwanted definitions are applied and the class is not taken into consideration at all. And I have no clue why.
EDIT : Thanks to IE6 being slow, I had the time to see what was actually happening : my class worked as intended but was suddenly removed during load time (which is why it didn't appear in wed dev toolbar). It was actually aa bug in my JS code. Thanks to all who tried to help. :)