So it has been brought to my attention by both DeathShadow and Stomme poes that using my Global Style Reset isn’t such a great idea.
*{
margin: 0;
padding: 0;
}
I have read up some on this topic, but most of what I’ve seen online are these ginormous Style Resets which confuse me.
Can someone here give my some practical advice on this topic?!
Personally I’m very content with what I have been doing, however, since I am re-writing my entire website, now would be the time to fix things like this!!
You don’t actually need a reset at all, as you can simply set styles on each element as you come to it, so some people despise resets altogether—as you set a lot of styles (like zero margins) only to re-instate them later on. So it’s a bit inefficient.
However, I still find it nice to wipe the slate clean of the main browser defaults from the start (call me lazy), so I often just use something like this:
The problem with using the universal selector on margins and paddings to remove these from all elements is that you can’t add them back to some form elements in Mozilla (some versions of FF, anyway) and Opera, so using a global reset with *(margin:0; padding:0; ) is not a good idea unless you know that you won’t be using forms anywhere on your site.
Therefore it makes for good practice to do what Ralph suggested; reset only those styles you really need and leave the rest be.
Like Kohoutek said, The only serious issue was that it caused some form elements ( checkboxes & radio I believe) to lose padding you can’t get back, so if you’re just building regular content pages and don’t have these elements I don’t think there’s anything wrong with the reset.
I tested with the Global Reset “On” and “Off” and I saw no difference while using Input Boxes in FireFox 8.0.1, Safari 5.1.2, Chrome 15.0, and Opera 11.6
(Stomme poes said that a Global Reset would screw up my Form Inputs and Submit Buttons, but from my testing I didn’t see that…)
On a scale of 1 – 10 the things you always seem to get caught up on are a 1… maybe a 2. deathshadow60 posted a good recent a couple months ago… just use that and stop wasting time on these relatively small things. Man… if you working in the industry you would be making about a dollar an hour in regards to how much you concern yourself with micro issues.
You mean FF and IE – or more specifically that FF and IE have paddings on form elements you have no control over in ADDITION to the properties we use.
There’s ABSOLUTELY NOTHING wrong with how Opera handles form elements because they SHOCK treat them EXACTLY as if they were inline-block. (what a crazy concept!!!)… apart from the fact that nobody else has the common sense to treat them that way; what with IE’s ‘extra’ em padding, ignoring height while obeying line-height, FF’s ‘extra’ px padding ignoring line-height while obeying height… and don’t even get me STARTED about the absolute DISASTER that are form elements in Webkit.
… and when I say ‘extra’ padding, I’m referring to it not having ANYTHING to do with what you set the padding attribute to… though that’s also why you want to leave padding on said elements alone – since every browser accepts that padding differently changing the total size.
As to the question at hand, as already stated there’s problems with the “universal reset” because of what it does to form elements – AND many of the larger resets out there aren’t even resets, they’re layout frameworks; see Meyer’s massively bloated and pointless “reset reloaded”
Which is why I use this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
Resetting just the elements that NEED to be reset, and doing so in less than a quarter of a K… Usually ends up less code than constantly having to say it on every one of those elements when I use them, and failing to use a reset usually just results in a layout that’s broken somewhere on some browser…
Oh and Debs, you said using the reset didn’t change your form element sizes? Did you notice they were different sizes in EVERY browser using the universal reset because, well… they are… massively so. (Opera in particular will give you the smallest of them as so far as they’re concerned inputs are inline-block elements)
Yes, I am a perfectionist. And, yes, I have been known to be a victim of “Analysis Paralysis”, but then again…
I do work in the IT industry, and guess what?!
Currently I’m on a multi-miilion-dollar project that is about to go belly-up. Why? Because no one wanted to take the time to actually plan and think things out. And no one wanted to ask “What are the consequences if we choose A or B?”
The reason I take the time that I do and ask the pain-staking questions that I often do, is because I have spent nearly the last 20 years working in the Business and IT worlds, and for my website and my company I don’t want to put together a heaping pile that never gets off the ground.
In the world of HTML/CSS, seemingly “little” things like coming up with a good CSS Reset, or designing a solid Page Layout or a Templating System go a LONG WAY once you get into a 500 page website with dynamic content.
Fair enough but that hasn’t stopped google, yahoo, facebook, twitter, new york times and countless other businesses regardless of poor code quality. In the end it all comes down marketing and how well you can sell it. It doesn’t matter if your site is deathshadow60 approved or whatever. A great sales and marketing strategy surpasses code quality in terms audience any day. Just look at wordpress. Wordpress is a steaming pile of crap in terms of quality but easily the most popular blogging platform and I throw up a little in my mouth when I say this CMS around. It is hard to argue when thousands if not millions of sites run on wordpress.
Deathshadow, no I mean Opera. At least it was an issue sometime ago. Paul wrote an article about this and Opera did have its woes as well. It may be obsolete now, however. I haven’t tested it.
Ok, the minor issue with SELECT… I use select so infrequently it wouldn’t come up in the first place. (I really consider select annoying in most cases people use it).
Which has nothing to do with INPUT… but yes, that is a form element with cross-browser issues even if you don’t set the padding… IN ALL browsers SELECT sucks.
I think it was Blazer or iCab (don’t quote me on that)… one of those was putting the same margin on it as a paragraph. Been a good six years since Dan and I sat down to figure out what parts of a reset we needed, and what ones were pointless… We knew a reset would be less code the way we were building CSS… we knew the universal reset had too many problems… and what was out there at the time (like reset reloaded) were NOT resets, they were frameworks… we tested like 20 or so browsers back then to come up with just enough of a reset to make the browsers behave, and no more.
Of course, iCab is now webkit based so… Well, unless you need it for MacOS 9/earlier.
Agreed. It’s why as a rule of thumb I leave them alone on padding and height, only setting widths as needed… and being ready for no two browsers to interpret the meaning of width the same way (typically allocating 5-10% room for growth)
Pardon the slow response. Battling the “Cold from Hell”!!
I will agree that I think Meyer’s re-set is pointless. (Anyone who has a re-set on “Applets” should be ignored…)
Which is why I use this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
Resetting just the elements that NEED to be reset, and doing so in less than a quarter of a K… Usually ends up less code than constantly having to say it on every one of those elements when I use them, and failing to use a reset usually just results in a layout that’s broken somewhere on some browser…
I tried your code above and it didn’t break anything.
Think I’ll adopt it, since it is even simplier than my attempt of whittling down Meyer’s re-set.
Oh and Debs, you said using the reset didn’t change your form element sizes? Did you notice they were different sizes in EVERY browser using the universal reset because, well… they are… massively so. (Opera in particular will give you the smallest of them as so far as they’re concerned inputs are inline-block elements)
Not sure I follow you.
I ran my Home Page with the Universal Reset on and then off for FireFox, Safari, Opera, and Chrome.
When I compared how any apparent internal padding looked on the same Input box, I saw no differences within a given browser with the Universal Reset “On” or “Off”. Leading me to believe that the Universal Reset does NOT screw up the padding on Form Controls.
Maybe I missed something, but that is what I saw.
Nonetheless, I like your streamlined Reset, DeathShadow, and since it didn’t break my Home Page, I plan to make it my NEW Reset!
I never said that “crap” didn’t sell to the masses. I did say that it is important for me to code a website that would make the SitePoint Gurus proud!
Do I take longer than I should? Maybe.
But I am learning the right way to do things, and I am laying a foundation that will speed development and ease maintenance down the road. PLUS, I’ll have the satisfaction of actually knowing what in the hell I am doing which is more than the SharePoint Developers that we are paying $125/hour at work…
Radically different sizes in all browsers, but notice how much IE shrinks in size with the reset compared to without – or even compared to Opera which USUALLY has them smallest with padding zero’d. It sucks either way, but it sucks more with the reset nabbing those form elements.
Of course if your layout is designed to handle form elements changing size as much as 28% (19…26 on INPUT?) you might not notice that reset off FF is 28% larger than universal reset + IE.
Good to know, but your numbers basically back up what I was saying earlier…
Visually in the non-IE browsers, there isn’t much of a jump - for a given browser - on Input Boxes that have the Global Reset “on” versus “off”. (Just a few pixels.)
If you include Selects and Internet Explorer, there is obviously a larger difference.
Nonetheless, I have decided to adopt your CSS Reset, so that should take care of things.
