Re: [WSG] Zeroing default padding/margin
Nothing new for list members, but I've added another post to discuss some of the issues that this thread has bought to my attention. http://leftjustified.net/journal/2004/10/19/global-ws-reset/ Andrew. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Zeroing default padding/margin
Nick writes: I was just reading the article excerpted below and was curious as to how many on the list have used this technique of initially setting all padding and margins to 0 and if so how successful was it? I'm surprised nobody has mentioned: http://tantek.com/log/2004/09.html#d06t2354 http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/ http://www.meyerweb.com/eric/thoughts/2004/10/17/stripped-down-style/ Any preference? All the best, -- Ian Fenn Chopstix Media Ltd http://www.chopstixmedia.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
Hi all, I guess I should add my 2 cents as well :) re: Russ' comments -- 1. Once you have removed all margin and padding, this method relies on you specifically styling the margins and padding of each HTML element that you intend to use. On smaller sites where you may only need to style specific containers and elements this method is very verbose and wasteful. Perhaps listing troublesome elements instead of the wildcard selector would be a more favourable option for some, I prefer the clean slate approach. RE: Verbosity; probably, but not necessarily. I've most recently used this technique with a 5 page brochure-ware site to accompany my band's upcoming ep and I honestly don't think it added a noticable amount of weight. The benefits were immedietly noticable -- this site's design (url not avail. yet) took a 3 lazy hours to code and wasn't checked once in IE during the coding. Guess what? IE6 was identical in every way to Moz/FF+Op the very first time! My jaw dropped and I danced around the house like an idiot while the singer and bass player just stared at me as though I had lost the plot. I'm not going to pretend to be some kind of css-jedi that doesn't need to test in IE -- I was as surprised as anyone else would be. That declaration and a solid knowledge of when to throw in a 'position:relative;' were entirely responsible for slashing potentially up to an hour of debugging (depending on how many early evening beverages were consumed during ;) 2. If you were to pass your site on to others who were less aware of CSS, this method could cause great confusion. The method relies on an understanding that any used HTML elements will have to be specifically styled. If you were to pass your site to others who are less aware off css AND told them that they didn't have to worry about cancelling 'empty space' because everything was up to them, this method could cause great liberation. Well, I doubt it; but you get the idea. In the cases I've seen - mostly on codingforums.com - beginners develop bad cases of 'class-itis' due to a fear of using tag name selectors. This encourages/forces them to address the elements immedietly and individually; hopefully causing a greater focus on semantics in the process. ie What content does this page have? What tags will I use? instead of Hmm... better use another div for this sentance. High hopes, I know :\ We can't on the one hand say Don't rely on browser defaults and on the other say don't screw with the defaults -- future code monkeys will be confused. Each to their own; but you knew I wasn't going to agree from the get go. Lachlan wrote: I found out later that a significant portion of the class has now adopted it for their own stylesheets. That's fantastic :D I didn't think anyone would even care about such a simple tactic. Many thanks for sharing! ...and to finally get to Nick's question: Personally, I don't think I'll ever stop using it; but there's no prize for guessing I was going to say that. All the client sites I've done since using this trick (none of which have been added to my folio...Damn I'm slack!) have had the CSS split up into: - default.css [page layout only] - type.css [all global typography, starting with declarations like p, pre, blockquote, etc...] - any other site specific stuff (eg. menu.css) Splitting the css into positioning and typography can be very helpful in conjunction to the global reset, but you have to have your wits about you to keep things neat and well ordered. -- Andrew http://leftjustified.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
I think this is a strong argument for introducing this technique to others. The most oft-cited reason for not using semantic HTML is the perceived control that can be achieved by using tables/a lot of divs. By removing this mystery dimension from the size of elements, it could help people to become accustomed to styling semantic HTML. Personally, I remove margin-bottom from everything, because I like to use top margin/padding, as it prevents extra space at the end of sections. (And also various overflow problems in Opera) -- Cameron W: www.themaninblue.com --- Andrew Krespanis [EMAIL PROTECTED] wrote: In the cases I've seen - mostly on codingforums.com - beginners develop bad cases of 'class-itis' due to a fear of using tag name selectors. This encourages/forces them to address the elements immedietly and individually; hopefully causing a greater focus on semantics in the process. ie What content does this page have? What tags will I use? instead of Hmm... better use another div for this sentance. High hopes, I know :\ ___ Do you Yahoo!? Declare Yourself - Register online to vote today! http://vote.yahoo.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
Hi Andrew, Thanks for posting the article in the first place, I should've known the writer would've been on this list! Anyway, I like the idea and I have a suspicion it'll work pretty well for my needs. I just tried it in a site I'm working on and it actually didn't break much and in fact I can immediately think of several places I can go to clear margin:0;padding:0; settings, so in that respect it may actually reduce verbosity. I can also think of a particular debugging issue (IE of course) that it would have helped with. Anyway, as Russ said Like anything, I guess it comes down the the needs of the site and the developer. I'm just keen to see how it goes for my needs now! Nick RE: Verbosity; probably, but not necessarily. I've most recently used this technique with a 5 page brochure-ware site to accompany my band's upcoming ep and I honestly don't think it added a noticable amount of weight. The benefits were immedietly noticable -- this site's design (url not avail. yet) took a 3 lazy hours to code and wasn't checked once in IE during the coding. Guess what? IE6 was identical in every way to Moz/FF+Op the very first time! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
Nick Lo wrote:
I was just reading the article excerpted below and was curious as to
how many on the list have used this technique of initially setting all
padding and margins to 0 and if so how successful was it?
I remember reading a similar suggestion a while back (I don't remember
where) which included {border : 0; font-site 100.1%; line-height : 1.6;}
(actually, other than being there, I don't remember what the line height
was, but I suppose it doesn't matter for this thread).
IIRC, the 100.1% was to correct for a rounding error in either Opera of
Safari where 100% was treated as 99%.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Zeroing default padding/margin
I've been thinking on and off all day and I'd like to do an ignominious
about-face on the zeroing margin and padding technique.
My initial concerns were that:
1. could be more verbose
2. could confuse less-savy future developers.
The verbose issue is easy to overcome. You can zero margins and padding in
one rule set and then set all block level items with margins in a second
rule set. For example:
h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset,
address { margin-bottom: 1em; } or whatever margin setting you prefer.
This also overcomes concerns about passing on the css to future developers.
If all block level elements are specified in this second rule set then there
will be no major issues.
So, apologies to Andrew for overly critical comments earlier. Worth
exploring further.
Russ
We can't on the one hand say Don't rely on browser defaults and on
the other say don't screw with the defaults -- future code monkeys
will be confused.
Each to their own; but you knew I wasn't going to agree from the get go.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Zeroing default padding/margin
I remember reading a similar suggestion a while back (I don't remember
where) which included {border : 0; font-site 100.1%; line-height : 1.6;}
(actually, other than being there, I don't remember what the line height
was, but I suppose it doesn't matter for this thread).
You may have been thinking about CSS-Discuss where it came up recently:
http://archivist.incutio.com/viewlist/css-discuss/39721
http://archivist.incutio.com/viewlist/css-discuss/39729
And Webmasterworld:
http://www.webmasterworld.com/forum83/4105-2-10.htm
Russ
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Zeroing default padding/margin
russ - maxdesign wrote: You may have been thinking about CSS-Discuss where it came up recently: And Webmasterworld: Thanks Russ. It must have been the css-d thread since looking back I see that I read it and since the Webmasterworld reference was my postI guess I got the line height addition from elsewhere. That still leaves the question of whether or not to include font sizes there or just in the body? Also, the issue of 100.1% vs. 100.01% wasn't resolved. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Zeroing default padding/margin
I was just reading the article excerpted below and was curious as to
how many on the list have used this technique of initially setting all
padding and margins to 0 and if so how successful was it?
A big part of dealing with cross-browser differences is accounting for
the default property values of elements in each browser; namely padding
and margin. I use the following declaration in every new site I design;
it has saved me many hours of nitpicking.
* {
padding:0;
margin:0;
}
It doesnt seem like much at first, but wait till you look at your
mildly styled form in 11 browsers to find the positioning identical in
all of them; or your button-style lists are perfect the first time,
every time.
http://leftjustified.net/journal/2004/10/07/css-negotiation/
Thanks,
Nick
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Zeroing default padding/margin
Hi Nick,
I think this is very interesting but I have two problems with it:
1. Once you have removed all margin and padding, this method relies on you
specifically styling the margins and padding of each HTML element that you
intend to use. On smaller sites where you may only need to style specific
containers and elements this method is very verbose and wasteful.
This means you are almost replicating aspects of the supposed default
browser style sheet:
http://www.w3.org/TR/REC-CSS2/sample.html
2. If you were to pass your site on to others who were less aware of CSS,
this method could cause great confusion. The method relies on an
understanding that any used HTML elements will have to be specifically
styled.
You may have styled all elements you needed at the time, but what if a new
element was added by someone else at a later date? They may have no idea why
the element does not operate like it should.
For example, what if you never needed a blockquote (and therefore never
specifically styled this element) but someone needed in the future? They may
be very confused why the blockquote had no margins - which it normally
would in default behaviour.
A softer option may be to do this on specific troublesome elements (by
troublesome I mean ones that may vary greatly across browsers). For example;
forms, fieldsets, submit buttons etc.
Like anything, I guess it comes down the the needs of the site and the
developer.
2c
Russ
I was just reading the article excerpted below and was curious as to
how many on the list have used this technique of initially setting all
padding and margins to 0 and if so how successful was it?
* {
padding:0;
margin:0;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Zeroing default padding/margin
Nick Lo wrote: I was just reading the article excerpted below and was curious as to how many on the list have used this technique of initially setting all padding and margins to 0 and if so how successful was it? Well, I've used it a few times since I read that article and it rocks In the relatively short time since then I've included in two of my own projects and suggested its use to a student. In the former case, I've found the added control makes everything so much easier. In the latter case it allowed her to centre her inline unordered list (she was seriously struggling with her navigation), and a few other things on her page all fell into place. I found out later that a significant portion of the class has now adopted it for their own stylesheets I haven't encountered any problems with its use yet. I can't really envisage any. Obviously you need to add padding and margins specifically to most elements now, but I find that a benefit. After all, I rarely rely on default values for lists, paragraphs or headings So thanks to Andrew (who I believe is a member?). I don't know why I never thought of it before, especially after Eric Meyer's article on removing default CSS; but I didn't, so kudos to you In other words, Nick, I say use it all the time. I am ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
Not sure about the * declaration but the 11 browsers intrigues me? What joe bloggs user out there looks at a website in 11 browsers? Broken to us in Netscape 4 might mean works fine to the Netscape 4 user. If one browser gives me 2px padding and another gives me 1px then I'm not fussed as long as the content is readable and understandable. Cheers James Nick Lo wrote: It doesnt seem like much at first, but wait till you look at your mildly styled form in 11 browsers to find the positioning identical in all of them; or your button-style lists are perfect the first time, every time. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Zeroing default padding/margin
Thanks for the reply Russ, I agree that it's really down to the situation. Some further thoughts from your points: Smaller sites would presumably have less people working on them and therefore the issue of confusion is possibly less relevant, though the problem of verbosity may be. On the other hand presumably in most cases you'd be starting from a base stylesheet anyway so verbosity with regards to maintenance may not be an issue either. That really leaves potentially heavy stylesheets and hence file sizes. On larger sites I wonder if the verbosity issue balances out ...e.g. you don't specifically need to set margins:0; padding: 0; on numerous elements just as you do need to set them otherwise on other elements. However, the introduction of new, and therefore zero'd elements (e.g. an address in an article added by a CMS) is a good point. So to narrow down my original question: How do those who use it find the balance between file size/verbosity and the debugging benefits/time saving? Thanks, Nick 1. Once you have removed all margin and padding, this method relies on you specifically styling the margins and padding of each HTML element that you intend to use. On smaller sites where you may only need to style specific containers and elements this method is very verbose and wasteful. 2. If you were to pass your site on to others who were less aware of CSS, this method could cause great confusion. The method relies on an understanding that any used HTML elements will have to be specifically styled. You may have styled all elements you needed at the time, but what if a new element was added by someone else at a later date? They may have no idea why the element does not operate like it should. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
