CSS button not styling

Question

Hey, I must be missing something obvious, but can someone explain what I'm doing wrong with my CSS? I would like all buttons to have a certain format, except a few. I was expecting to use CssClass in order to override the few that should be different, but they all seem to use the standard one.

My CSS:

.btn
{       
     border:none;
     background-color:red;         
}    

input[type="submit"]
{
     border: 2px solid black;
     background-color:green;        
}

All the buttons take the second value (green background, with a border). However, I have this button:

<asp:Button ID="btnAdd" CssClass="btn" runat="server" Text="Add" />

I was expecting this to have no border, and a red background, but it's the same as every other button.

Any ideas what I'm doing wrong? Thanks

Answer 1

Place your .btn below you input[type="submit"] rule. If that still does not work add !important.

.btn
{    
     border:none !important;
     background-color:red !important;    
}

See here for CSS precedence: http://www.w3.org/TR/CSS2/cascade.html

Answer 2

The type='button' rule probably beats the btn rule in specificity. You could use !important but that won't work in IE < 8 and is bound to give problems in the long run.

Try this first:

input[type="submit"].btn
    {

         border:none;
         background-color:red;

    }

Answer 3

It's also worth noting that attribute selectors such as input[type="submit"] won't work in IE, they do in FF though.