CSS-Plus
CSS-Plus
Play with web technologies

The Best of CSS-Plus

September 30, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

What is 'The Best of CSS-Plus'? It's the beginning of a possible series about some of my CSS tips and tricks.

I wouldn't say I have many CSS tricks, but I do have a few practical cross-browser-compatible CSS methods I like to make use of.

I find cross-browser compatibility CSS tips, by far, the most useful of all. What use is CSS when it's going to force you to create an extra (IE specific) stylesheet?

The fight against padding

HTML emails have slightly changed the way I develop websites. It's made me very wary of padding, because it's not well supported across all email clients. I try to avoid the 'padding' property when possible... You may be thinking: 'Why? Browser's aren't email clients and padding is well supported'. Well, Because the IE box model is different to the W3C box model. So yes, padding is well supported by basically all popular browsers, but the W3C box model isn't, therefore, padding - As it should work - isn't supported by all browsers. The doctype does solve a lot of cross browser issues, however, I like to make my sites as rock-solid as possible.

This is not to say I don't use padding - I use it all the time. I try to avoid it where I can though. This is generally while I'm styling navigation menus, <h1> tags, <h2> tags, etc. Also, I try to substitute the 'margin' property for 'padding' when possible.

text-indent VS padding

Text indent isn't used very often, but it's extremely well supported. It's even supported by almost every email client!

I tend to think that using 'text-indent' is a no-brainer when it comes to certain situations, such as the examples below.

menu-example

I would, however, use left and right padding for a navigation menu like this:

hotizontal-menu

Not only is it beneficial to use text-indent for padding to solve browser problems, but it can actually simplify your life a whole lot more...

If you have a set width of 200px and then add a 20px left padding, the total element size would be 220px. It's possible to solve this problem by changing the width to 180px, but I find this very annoying as the width has to be changed every time the padding is changed. Text-indent solves this absolutely wonderfully.

line-height VS padding

Line-height is simple way to centre a word or a line of text such as a heading. You can also be sure that it will display perfectly consistent across all browsers.

overflow: hidden

This is one of my favourite properties. How often do you have an image floated to the left or right with text wrapping around it? Here is an example:

overflow-none

There are many cases where this is not the desired effect. How do we fix this? Are extra divs necessary? Are properties such as 'width' required?

No.

All you need to do is to add 'overflow: hidden;' to the <p> element. - p {overflow: hidden;}

overflow-hidden

How ridiculously simple was that?

The Conclusion

It's absolutely OK to use padding and ignore everything I've been ranting on about. I've just found my methods work for me and I've decided to share some of them.