this is will work on all the elements on the page, not ALL documented/unused elements..

so if you have only , , and on your page, only those elements will have margin:0 and padding: 0..

i’ve been using this for many years now and i don’t see any reason why i should change it. besides, all my form elements have styles..

What are the real problems involved?

So just put a class of current on the link when you are in that section and give it the same properties as the hover state.

Let me know if I misunderstood what you are asking.

An example would be Peachpit.com

Nice work, by the way :0)

Thanks
Pablo Esquivel

How would you expect a radio button to act if padding was removed? Form elements get a little tricky and sometimes are best left alone. Also, it takes longer to process the universal selector because it has to access every single element, rather than specifying the elements you want to remove the margin and padding from.

@Russell Heimlich-
Yep, it is easy to clear floats without markup. But the issue is consistency and working in all situations. There are times when using the techniques without markup can cause issues between browsers or depending upon whether or not the elements have a width specified, etc. The easiest way that works 100% of the time is to just add in an empty clearing element.

I am all for semantics and standards, but sometimes you just need to get it done. Jeff Croft wrote a great post about this: On standards, Web Standards, and “standardistas”.

1) Make sure the containing element has an overflow other than visible so overflow:auto or overflow:hidden would work. The container also needs a height set in order for it to work in IE. If you don’t have a specific height just use height:100%. It cannot be height:auto;

2) Float the elements inside the container as needed. Experiment with clear:left, clear:right, or clear:both as needed to prevent stair stepping and other oddities.

E-mail me if you need examples. I absolutely hate empty elements with clear=all in them! Grrrrrrrrr….

at the top of my code.

h1 #logo {
width: x px
height: ypx;
background-image: url(url);
text-indent: -9999px;
}

I also think a cleaner method could be to just set the font size to 0.

Aunque no tiene porque ser exhaustiva, como bien dice su autor, se hace lectura recomendada “The 6 Most Important CSS Techniques You Need To Know“.

En ella se relatan seis técnicas de CSS que si bien no son imprescindibles, son importante…

In regards to the * {margin: 0; padding: 0;}. This is really not an ideal way to zero out the margin and padding. It takes more time to process, and it also effects every single element, including form elements. As Eric Meyer said at An Event Apart, “What would you expect to happen if you added padding to a radio button?” Form elements are a little different than other elements.

I think I’m applying it wrong but it seems unnecessary for the clears at the start, I thought you could just do a * {margin: 0; padding: 0;} or maybe it’s
*html, body — Apologies I ‘m a bit rusty

Thats a fantastic tutorial.

VOTED for this post here

I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:

1. Get a Consistent Base Font Size
2. Get Consistent Margins
3. Set a Float to Clear a Float
4. Image Replacement…

html{
font-size: 125%;
}
body{
font-size: 50%;
}

If you look at http://www.icaaq.com/flexible-assistant-the-old-way.htm and clicks the figure it out button you can see it’s not accurate in IE. But if you look at http://www.icaaq.com/flexible-assistant.htm it’s correct.

http://devorbit.net/english/css-designs-using-float/

To the rest of your list: Looks good. Mine looks pretty much the same! I just never wrote them down like that :)

RE: propertes reset, I believe Eric Meyer has a set of code for setting the properties from scratch to build up your own template.

I used to use the * {margin:0;}, but I don’t think I will this time around… I’ll see how I go, but a lot of the margins and padding that are already there are pretty good.

I always wondered why 62.5%!!! I tried it recently and the text was way too small, I wondered what the heck people were thinking. 10px is what they were thinking. :) I didn’t know that IE didn’t allow you to change the pixel size. :(

Cheers

if you can’t give a width to the container, then you’re right about using the extra div.

Regarding #3, the best way to clear a floated element is to apply the following CSS rules to the containing element, negating the need for additional HTML elements …

For good browsers:
div#content:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

For IE 6/7:
div#content { zoom: 1; }

You should note as well that IE 6/7 uses the zoom proprty to add ‘hasLayout’, so adding ‘zoom: 1;’ in your IE 6/7 stylesheet will solve many of your problems, while adding no positional or dimensional information.

@David-
I’ve seen some notes about this, but nothing definitive that it hurts your rankings. Do you have a source that you have found this information? Think about all of those people using image replacement techniques on their sites. I can’t image Google would penalize that many people. Last I saw, they flag it, and if you are stuffing more text into the markup than you are displaying in the image replacement, then it may hurt your ranking.

What happened was guys like us invented that technique (Fahrner was his name?) and then the spam guys realized they could use it for their nefarious purposes. Google caught wind of the technique, and now it’s considered negative.

Google can read your CSS, and knows things like whether or not an image is covering your text, etc.

Use with caution and only when SEO is not a factor.

Regarding #3 though, can’t you just add a CSS rule of overflow: auto to the container div?

Cheers!

In that case IE6 behavior is different and you don’t have to put “cursor: pointer” rule.

@ Trevor: i’m not saying you don’t work in standard compliance mode, beacause the xml declaration is optional.
If you try to put xml declaration in your example pages you will see that some behaviors in IE are different.

@Mark-
I always style defaults for everything that I remove the margin and padding for. Good tip though!

@Andreas-
Do you mean vertically aligning the buttons? I just recently found out that you can actually use vertical-align: middle; for buttons elements, and the will line up with the other form elements.

@Nemesis Design-
Hmm, I always work in Standards compliance mode.

@Matt-
I wonder if it has to do with so many instances of sIFR on the page?

@Matt Radel-
You can certainly do image replacement using a negative text-indent, but if images are disabled, you don’t still get the text like you do using the empty span method.

Whoops, I forgot to update the time in Wordpress for Daylight Savings Time.

Incidentally, I thought I’d just let you know that this page is crashing my Firefox (damn you for making me resort to IE7). I’m running 2.0.0.13 and it just vanishes when the page has loaded, each time I try.

Anyone else?

I noticed there are a lot of differences working in Quirks Mode or not.

My wish: A good way to set centered text in buttons (for IE6, too)

Otherwise great tips!