Useful CSS "hacks" - Post any you have!

[rpgfan3233]

The idea of this topic is to just post however many hacks you have found useful. Links or sample code (with explanations) are helpful.

Here are a couple to get you started:

• The Holly Hack - For fixing dimensions in IE/Win while ignoring IE5/Mac
• The IE5/Mac Band Pass Filter - For including declarations only to be parsed by IE5/Mac

Though the following isn't really a CSS hack, it is often used for CSS more than anything (at least in my experience).
Internet Explorer Conditional Comments (IE5+/Win only):

Code: Select all

<!-- [if gte IE 5]>
This text should be hidden.
<![endif] -->

Note the space between the opening "<!--" and the "[if". Microsoft's official page regarding the use of conditional comments does not show this space. If you do not include the space in the above code, the contents will be displayed on the page. With this in mind, I highly recommend reading the page.

[Rob]

Personally, I hate hacks.

There are in most cases a way to get around the need for hacks.

As a resource for web developers and designers, I feel I would be doing everyone an injustice if I didn't point out my loathing for them.

My 2 cents.

[D3mon]

Not really a hack, just a good starting point...
First line of your style sheet;

* ( margin:0;padding:0 }

Pros - Simplicity (ie. not a complictated hack), Forces most-all browsers to render your styles in exactly the same way.

Cons - You need to re-define your paddings and margins for all your elements. May not be supported in some older browsers.

more on this subject here: http://www.meyerweb.com/eric/thought...doing-htmlcss/

[Rob]

Hey D3m0n....

You really should write us a CSS article you know.... you are full of these tips

[D3mon]

But where to find the time these days?

[herkalees]

I've been designing sites for a while now, using tons of CSS, no tables, bla bla, and I've never used a CSS hack.

They've never been necessary for the 100+ sites I've made.

[RaptorRex]

I've never (knowingly) had a problem with the margin element. What problem does it cause between browsers? I find the border and padding elements to be the big pariahs since IE incorrectly includes them in the width/height calculations.

oh, wait, maybe to do with the collapsing (!not) of vertical margins in IE? I think I had that problem once.