views:

85

answers:

3

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

+1  A: 

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

Dustin Laine
+2  A: 

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;

    }
Pekka
That works. I'll use this method instead, for compatibility. Thanks!
o-logn
A: 

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

Steve
Are you sure? It seems to be working in IE8 for me. Is there an alternative way of styling all buttons in for IE?
o-logn
I meant IE 6,7 - 8 may well support them but definitely the older version do not. There's no CSS-only way of selecting elements by their attributes in these browsers, you could always apply `class="submit"` to all submit buttons and then apply style to `.submit` however.
Steve
Thanks for the info. I think I'll create a submit class and use that then.
o-logn