Here are some random tips that I think can be useful to anyone who starts playing with CSS or already is doing that.
1. Reset HTML elements for all browsers.
The first thing I do is reset the default styles that the browsers set on elements. I consider this the most important thing to do before starting writing the actual CSS styles for the layout. For example Internet Explorer sets bigger margin values for elements like “input”, “textarea” and so on, than Firefox or Chrome.
To reset the styles I prefer to use Yahoo Reset or you could try writing your own.
2. Centering elements with CSS
To center elements with CSS first you need to set the elements “width” and then setting their margins.
So.. we want to center the design/layout of our site in the browser.
We have this HTML
1 2 3 | <body> <div id="layoutWrapper">site content</div> </body> |
and the CSS to center the layoutWrapper div is:
1 2 3 4 5 | #layoutWrapper { width: 960px; margin: 0px auto; } |
Now the layoutWrapper div is centered with a top margin of 0 and the other margins are set to auto.
3. Quick fix for the double margin bug in Internet Explorer 6
The problem is that if you set margin or padding on a floated element those values are doubled in IE6 and get a f*ucked up layout.
To solve this problem there are a lot of tricks but the most easiest and straight forward is to set also “display:inline” on the floated elements.
This code will get you a margin left of 40px in Internet Explorer 6.
1 2 3 4 5 6 | .element { float:left; width: 200px margin-left: 20px; } |
By adding display:inline now margin-left is also 20px in IE6
1 2 3 4 5 6 7 | .element { display:inline; float:left; width: 200px; margin-left: 20px; } |
4. Font size in EM or PX?
For a period of time I used em’s to size the fonts because in IE6 you can’t re-size the font if it’s in pixels.
So if a title was 21px in font size.. in IE6 it will remain in 21px if you select text size to be larger. If it was in em’s for example
that title will get larger.
A trick that I used to easier set sizes in em’s is I was setting the body font size to 62.5%.
1 | body { font-size: 62.5%; } |
So now if you set a font size of 2.1em it will be the same as 21px.
1 2 | h1{font-size: 2.1em;} h2{font-size: 21px;} |
The sizes of the H1 and H2 will be the same 21px.
For some time now I don’t care so much for IE6 users because there are 9 years since it was released and there are 4 years since version 7 was released.
So if it’s not plain stupidity I really believe it’s plain ignorance.
5. ID’s or Classes? When to use?
Simple. Use id’s to target single elements or classes to target elements that are repeating in the page.
More complex would be that elements with and id should be unique or else you cannot validate your HTML document.
By using classes on elements you can use the same class to target multiple elements or also you can use multiple classes to target the same element.
6. The equal columns trick
This is a trick that I use rarely because it’s kind of an hack and hacks are never a good idea 
.
More info for this trick you can find here.
There are also a lot of variations but I find this one the easiest to implement.
7. Containers and children widths
I usually set width only to container elements and for the children I set margins and padding or width of 100%.
So if I need to change the width of the container the children automatically change their size also.
8. IE6 PNG transparency problem (isn’t really a CSS related but like.. who cares)
Everybody loves PNG’s. And how can you not? Full quality, transparency support, smaller size files on graphics (jpeg’s are still better for big images).
But IE6 doesn’t like them at all. So we must use some tricks.. and there are a lot.
From that “a lot” I prefer one: DD_belatedPNG by Drew Diller
This one is the best I could find out there. And I tested a lot of them bad scripts
Popularity: 3% [?]
