17 replies [Last post]
mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 10 years 38 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

Hi Everybody, I've been using the minimal reset when I start writing my style sheets for some time now.

* {
	padding: 0;
	margin: 0;
	}

I was wondering if this is the best way to do this, I found this article http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/and after reading it, I am worst than before reading it. Can you guys tell me what is the best practice in this case.

Thanks in advance.

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

flamenco
flamenco's picture
Offline
Enthusiast
US, East Coast
Last seen: 12 years 2 weeks ago
US, East Coast
Timezone: GMT-5
Joined: 2009-04-13
Posts: 240
Points: 144

Hola, Among pro web

Hola,
Among pro web developers you will find big arguments about reset CSS. No agreement at all.

I think the best argument for using it is that you have a better chance of getting compatibility across browsers. A good thing, in principle.

However, as a trade-off you will generally have to write more CSS code... since everything is zeroed out, you'll have to define many settings from scratch. You'll also see funny things, such as any form will usually look awful without a lot of new styling.

I'm actually with you - if I use a reset at all (and I often don't), I will use something similar to what you have. I also find that I only code for about 4 or 5 browsers(!). This will cover maybe 95% of what's out there. I like to check the browser statistics on w3schools.com every so often. Every time I look, horrible IE6 is a little closer to death. Smile

I'm not being paid enough, nor do I have timeframes that allow me to make sure that my code works in every Linux browser, IE5 and earlier, all versions of Opera, and so on. Possibly the biggest reason I don't use resets is that I'm usually working with someone else's code, and it's often horrible. I did work on a site that already had Meyer's reset last summer, and it was intriguing to handle it - the previous coder was skilled, so it went pretty well.

The professionals that are arguing about this may be the geniuses working for the highest-paying firms, and actually are asked to make this super-compatibility code, and have time to do it. I may be mistaken, but I think that the top CSS coders do like to use one of those resets you pointed out, or one they've made themselves. If they use it all the time, they'll get so good at it, that it may save them time!

So maybe an idealist or top performer might tend to choose reset CSS. That's not me. Yet. Wink

And I'd bet that some of the stuff I've said above will bother someone. Oh well. It's a controversial subject. Smile

!Saludos a Costa Rica!
Ciao, Dave

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

There are many ways to cook

There are many ways to cook an egg Smile
Personally I don't usually use a reset stylesheet, I prefer to adjust the browser defaults where and when needed.
If I was going to use one I would tend to be more selective about which rules I reset.

Instead of reseting values to 0 why not look at setting default values for elements.

/* simplified example*/
p, ul, dl{margin:.5em;}

That way instead of wiping out margins etc for those elements you are setting a default for all browsers to use.
You don't need to reset to zero then add a value back later.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

We currently had a

We currently had a conversation about this, which you can see at http://csscreator.com/node/34411

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Thanks, Deuce, for the

Thanks, Deuce, for the reminder. As I reread that thread, the only change I would make to my comments, would be to be more adamant about the total waste of time that such resets are.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 10 years 38 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

Thanks my men! Costa Rica

Thanks my men! Costa Rica Rocks, hahaha, thanks all of you for your comments!

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Gary of course refers to

Gary of course refers to wishing that he were more like that late punk era singer Adam Ant not sure the relevance to the thread though

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

mpoveda, there is something

mpoveda,
there is something you must watch out for:

* {
	padding: 0;
}

If you have any forms on your site, you don't want this. You can leave the * {margin: 0;} just fine, but the paddings removed from form elements can't always be added back in. Clicking a submit doesn't show the usual punched-in look, selects in some browsers will let the arrow thingie cover the text inside, and sometimes checkboxes and radios can look kinda goofy.

I'm a resetter, but refuse to touch that steaming pile Meyer made, and I'm more careful about my padding than I used to be.

I'm no expert, but I fake one on teh Internets

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 10 years 38 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

Thanks Stomme poes,... so

Thanks Stomme poes,... so maybe selecting certain elements to reset would be better than using the wildcard star selector (*). For example, something like this:
div, p, ul, li, span, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
? What do you think, how do you reset?

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Did you actually bother to

Did you actually bother to read the link left by duece?

There are a few of us that have been using this process from the early days before it was widely known about or used and long before Meyer came along with his interpretation. Have a read of the thread and see what a few of us feel about using this technique now.

If you feel you really have reset because everyone else is then yes be selective but it really is a pointless exercise and is beginning to become a mark of those that follow blindly, do not use Meyers full implementation it has problems, which I'm interested to see if he ever spots.

Anyway I'm sure Poes will fill you in further on how she uses resets, if you need to follow something, and Poes does appear to understood the basic flaws inherent in the various approaches.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Adam Ant and other maunderings

@Hugo: Puh-leeze! Adamant equals Adam Ant? I am not the one with punctuation, capitalization, and runtogetherwords issues. Wink

@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin. What is the point of zeroing those properties?

Ul has top and bottom margins plus indentation. What about ol, dl, and dd? Why ignore them? If you want to determine the top/bottom margins, then do so. There is no benefit to be gained by setting them to zero first. Removing the indentation on ul or ol has a negative side effect; the list marker is located in that space, and will either be lost or will overlap adjacent elements. Different browsers do use different mechanisms for setting the indent, so normalization to either margin or padding is reasonable, but seldom necessary.

P and h1-6 all have default font-sizes and top and bottom margins. None have a default padding. Are you going to leave those margins at zero? I doubt it. Why add another layer to the cascade, one that brings nothing positive to the table?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

gary.turner wrote: @mpoveda:

gary.turner wrote:

@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.

Shock

LI has default margins.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

gary.turner wrote:@Hugo:

gary.turner wrote:

@Hugo: Puh-leeze! Adamant equals Adam Ant? I am not the one with punctuation, capitalization, and runtogetherwords issues. Wink

Smile it's just that I suddenly realised that his name was a play on words, only taken me twenty years to spot that

@mpoveda this how it ran with myself when I first started to use the original universal selector approach:

I set everything to zero, realised quickly that naturally I did in fact want margins and would be stating them rather often; as I always set a number of default global styles at the start of a stylesheet it made sense to therefore set a margin for all P tags, for all UL, etc thus I had a nice set of defaults that I knew every browser would now use and I would only have to adjust these values again for special circumstances and that worked well but it fairly quickly (or maybe not) dawn on me that having set these global default values there was in effect absolutely no point having set zero values right at the start, to what end?

Describe a set of global values for those elements that you know require margins and that suit the layout you are working with, that's job done! only then maybe having to re-adjust occasionally later on.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 10 years 38 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

I think I got it now,

I think I got it now, really, why zeroing everything or some elements if later on I am going to give margins and/or paddings to those same elements.. it's true, its just that I start doing this, yes maybe following other people, and because as a starter, doing CSS layouts is kinda frustrating, to achieve cross-browser compatibility. But I understand know. Really thanks to all you guys for sharing. I will finish reading the link Deuce posted.

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Chris..S wrote:gary.turner

Chris..S wrote:
gary.turner wrote:

@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.

Shock

LI has default margins.

In which browser(Drunk? Firefox specifies only the display property for li.

li {
  display: list-item;
}

file:///path to Firefox/res/html.css

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo wrote: it's just that

Hugo wrote:

Smile it's just that I suddenly realised[sic--silly brit spelling] that his name was a play on words, only taken me twenty years to spot that

I wonder if he knew of the anagram?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I bet his manager Ana Gram

I bet his manager Ana Gram didn't! :blushing:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

gary.turner wrote:Chris..S

gary.turner wrote:
Chris..S wrote:
gary.turner wrote:

@mpoveda: Please consider what it is you're doing. Div, span, and li have no default padding or margin.

Shock

LI has default margins.

In which browser(Drunk? Firefox specifies only the display property for li.

li {
  display: list-item;
}

file:///path to Firefox/res/html.css

cheers,

gary

:bigoops:

I stand corrected.