A Common Starting Point Redux
As I pointed out previously I prefer to start my CSS Stylesheets out with the wildcard (*) selector zeroing out the default margin and padding settings that the various browsers implement. I do this to level the playing field and assure myself that I am starting at a common ground cross-browser.
Here’s the CSS declaration I’m talking about:
* { margin: 0; padding: 0;}
Maybe this CSS declaration is taking things a little too far. Turns out that somethings…I want left alone.
Press My Button
Consider the form button. When the wildcard selector is applied to your document it changes the characteristics of a form button. In Firefox & Netscape browsers, it no longer appears to push in when you click it.
Examples:
Wildcard Selector Form
A form that is styled with the wildcard selector zeroing out all padding and margin.
Explicit Selector Form
A form that uses an explicit declaration of specific tags to zero out the padding and margin.
The CSS declaration I used on the Explicit form is like this:
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote {margin : 0; padding : 0;}
I could have continued to add fieldset & input to that list, but those are the two elements I don’t want zeroed out in this case.
If your using Firefox or Netscape, you’ll notice that the wild card form’s button doesn’t push in like the explicit form’s button does. There is no inverting of the button bevel, nor slight movement of the text to make it appear as if you’ve actually pushed it in.
The Browser Test
| Browser | Wildcard | Explicit |
|---|---|---|
| Firefox 1.5.0.3 | Smaller button. Doesn’t invert on click. |
Normal button. Inverts on click. |
| Internet Explorer 6.0 | Normal appearance. Inverts on click |
Normal button. Inverts on click. |
| Netscape 7.2 | Smaller button. Doesn’t invert on click. |
Normal button. Inverts on click. |
| Opera 8.54 | Smaller button. Inverts on click. |
Normal button. Inverts on click. |
I like my buttons to push in. Form buttons are practically the last ‘button holdout’ from the old days of web site design. Let’s keep ‘em around a little longer.