How can I reset buttons back to default style if I have * {padding: 0; margin: 0;} set?

Question

I have a page with

* {
padding: 0;
margin: 0;
}

set and it's the only way I can get the layout to work properly across all the browsers, but it unfortunately also makes any buttons in forms looks really ugly. I want the browser default styling on the button.

Is there any kind of CSS I can put to fix it?

Answer 1

it's the only way I can get the layout to work properly across all the browsers

I would suggest you fix that problem, rather then trying to just override it for buttons. Having said that, you can just explicitly put the padding back in:

* {
    padding: 0;
    margin: 0;
}

input[type=button], button {
    padding: 6px;
}

(I don't know if "6px" is the default, but you can experiment).

Additionally, instead of just setting * with "padding: 0" you could try one of the reset CSS files which set it up on just those elements that require it.

Answer 2

I don't think there is a way to return to CSS back to the browser once you've specified a rule that overrides the browser style (never seen one in all my years, anyway).

I think, rather than a blanket reset like what you have there, you might want to try using a more sophisticated reset: http://meyerweb.com/eric/tools/css/reset/ or http://developer.yahoo.com/yui/3/cssreset/

Of course, you can further adapt either of these - but they are pretty solid foundations for CSS.