Per Cent Compared to EMs, Good Cross-Browser Baseline

HTML & CSS
1

Sitepoint Members,

Some webmasters will use h1{font-size:180%} and others use h1{font-size:1.8em}. Is it true that the first will work better in more browsers and likely future browser upgrades ? What are the advantages and disadvantages?

Also

Can somone tell me about this given to me
/* 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;
}
What does this actually do? What is it doing that gives good cross-browser baseline?

Thanks,

Chris

2

Functionally these days % or EM for font size are identical – don’t sweat that. Use whichever one you’re more comfortable with, nobody gives a **** about netscape 4 anymore.

As to the latter (gee that looks familiar) not all browsers start out with the same margins and/or padding on those elements… setting them to zero in all browsers means you don’t even have to think about that being a problem. It’s called a “reset”.

There are larger resets – like Eric Meyer’s fat bloated “reset reloaded” that is damned near a CSS framework and generally causes more issues than it solves – and smaller resets like the so called “universal reset” of:

  • { margin:0; padding:0 }

But that tends to completely shtup form elements cross-browser… the one you listed (which is what I use) nabs the elements I use often enough for it to matter without wasting time on any extra elements or setting things that I’m probably just going to change anyways.

3

DS60,

Yeah “someone” is you. I started saying I found it somewhere, then I thought, just my luck, DS60 will read this and reply, “you didn’t find it anywhere, I gave it you.”, so I wrote “given”.

I thought it was some sort of start at zero coding. Why is there a need for setting to zero, aren’t the margin and padding settings determine by the code of the website? The need for setting to zero seems to be a need for a default - in case a certain setting was needed and not given.

Thanks DS60,

Chris

4

2nd
DS60,
Remember when I wrote
“So when would it be wise to use p.classname instead of .classname ?”
and you wrote. “Never.” That cleaned up a lot in my css.

Is the processing of #whatever in a css file also a two step process, or just one, like .classname?

Thanks,

Chris