CSS: Explicitly declaring position, padding, margin, and overflow for every item?

Question

I've been working for a guy whose been teaching me css. I made a website based on his designs which I'm pretty proud of, but he got back to me saying that I need to explicitly declare the padding, margin, position, and overflow (specifically every item should have "overflow:hidden") on every item. Is there any basis to this at all? Is there anything I can use to refute this? I thought that declaring something like div,span,h1,[...] {padding:0;margin:0;postion:static;overflow:hidden} would take care of everything due to the cascade.

Answer 1

Blindly applying styles to every element will surely give you unwanted results, but you could nail everything with * { margin: 0; padding:0; etc }

I would recommend using a reset stylesheet instead to reduce browser inconcistencies, this one is pretty popular: http://meyerweb.com/eric/tools/css/reset/

Note that reset stylesheets have their own (usually minor) issues with IE7. I usually create a separate IE7 only stylesheet.

Answer 2

I think you should use a CSS reset instead.

Answer 3

He is overly paranoid about cross browser differences. You do not need to do this.

Answer 4

Except for increasing the CSS file size, there is no reason to explicitly declare common properties down a cascade if already declared on a generic item. The browser should take care of properly rendering the items, taking the cascade structure into account.

Answer 5

Another resource, that I think is better for resetting CSS is YUI Reset (from Yahoo!). It has a great reset CSS file with additional files you can add on the end to make everything look consistent cross-browser (including fonts which can get very annoying very fast in CSS)

Here are the links

http://developer.yahoo.com/yui/reset/

http://developer.yahoo.com/yui/base/

http://developer.yahoo.com/yui/fonts/

I use the Reset, Base and Font stylesheets (in that order) in ALL my web projects.

Using a reset stylesheet that consists of "* { margin: 0; padding: 0; }" will create even worse cross-browser issues. You need to reset everything and THEN declare a base that all the browsers can start from (the purpose of reset.css and base.css).s