The 7 CSS Hacks that we should use

Nov 13

The 7 CSS Hacks that we should use

99 Comments, Add a Response

If you are trying to do pixel-perfect cross-browser CSS layout, then you have probably ran into problems with IE . I am going to highlight the top 7 CSS hacks that we often use to have pixel perfect design.

1)Box Model Hack

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on

 padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;

2) Conditional Comments

These conditional comments are for IE-only and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.

The typical usage is as follows:

<!--[if IE]>    Some CssCode<![endif]-->

The above code applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but now we want to apply it to versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, so we will apply the following condition:

<!--[if lte IE 6]>    Some Css Code<![endif]-->

After we finish testing, we remove all hacks to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.

<!--[if lte IE 6]>    <link rel="stylesheet" type="text/css" href="ie_hacks.css" /><![endif]-->

Condition is one of the following:

IE (Any version of IE)
lt IE version (Versions less than version)
lte IE version(Versions less than or equal to version)
IE version (Only version)
gte IE version (Versions greater than or equal to version)
gt IE version (Versions greater than version)

Version is the version of Internet Explorer, typically 5, 5.5, 6, or 7, you can read more info about this at Quirksmode.

3) Min-width and Max-width of an element

IE doesn’t understand this command, so we’ll need a new way of making this work in this browser. Let’s take a quick example, we need to apply this to a div with id="wrapper":

<wrapper><div id="nav">

Next we create our CSS commands, so as to create a minimum width of 750px:

 #wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? "750px": "auto" );}

You might also want to combine this minimum width of 750px with a maximum width 1220px:

#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}

Another Alternative for for min-height without javascript is to use Dustin Diaz’ nice hack: :

#id{ min-height: 100px; height:auto !important; height:100px; }

4) Easy Selectors

Most in-CSS hacks deal with selector bugs. Below is a list of different IE versions and the beginnings of selectors that are known to select elements in them. All of these selectors use valid CSS.

IE 6 and below
```
* html {}
```
IE 7 and below
```
*:first-child+html {} * html {}
```
IE 7 only
```
*:first-child+html {}
```
IE 7 and modern browsers only
```
 html>body {}
```
Modern browsers only (not IE 7)
```
 html>/**/body {}
```
Recent Opera versions 9 and below
```
html:first-child {} 
```

5)Whatever: hover

The :hover selector enables you to have cool effect for html elements like and in tables.Most browsers have no problem with this, except IE which look at the stylesheets and each individual rule with javascript.
If :hover rules can be tracked, and .htc can be used to change an elements behavior, then it should be possible to create a behavior that enables :hover for any element.

You can read more about this here

6)Transparent PNGs

IE dosn’t handle transparent PNG too well. You’ll get an ugly grayish type background wherever it’s supposed to be transparent. And we cann’t just use GIFs because aren’t good for higher resolution images. So we need a CSS hack to fix this. Follow the following steps and you will be set:

A HTC script and a transparent GIF will be used to solve this issue. You can download both files here
Now just upload these 2 files to wherever you store your IE.css file.
Add one simple line of CSS code to your ie.css file:
```
 img.pngfix { 	behavior: url(pngHack.htc); }
```

Another solution can be found at Komodomedia

7) Stylegala- No More CSS Hacks

Stylegala’s method is to detect browser version and serve different CSS rules to different user agents, without using hacks or conditional comments. At the same time the end user or validator will never see the CSS rules specified for other browsers than the one they are using. He used some simple PHP code to detect browser type exactly as any CSS hack.

99 Comments, Add Comment or Ping

violinista

November 14th, 2007

Where is content?
Noupe

November 16th, 2007

http://noupe.com/

violinista: We were doing update for the database and there was a problem with some articles. It is fixed now.
Thanks,
Noura Yehia
thankyou

November 17th, 2007

http://bob.com

“Can’t” has only one “n.” Nice post, though.
karim

November 18th, 2007

http://xhtml-css.com

We at http://xhtml-css.com (the bivalidator) use conditional comments and Dustin Diaz’ nice hack for min-height http://www.dustindiaz.com/min-height-fast-hack/
Tammi

November 18th, 2007

These IE css hacks were exactly what I have been looking for! Thanks for posting!
david

November 18th, 2007

http://mcreynolds.isa-geek.net

Unfortunately, Stylegala’s PHP destroys the browser’s capability to cache the CSS regardless of any meta settings and the styles will be downloaded with _every_ request. Not good.

So, from a professional e-commerce developer’s point of view, you’ve got a list of 6 good hacks.

Still, its a good effort. Thanks. I’ll probably use a few of these.
Online Television

November 19th, 2007

http://www.freetube.us.tc

I just use gifs instead of pngs, Gifs may be lower res but using something like IrafanView or Paintshop (not photoshop) you can control the level of quality to a degree. So sure you may not get photorealistic, but you can get a pretty good resolution and no need to mess with css hacks.
pacotole

November 19th, 2007

Hack #3 alternative without javascript:

#id {
min-height: 100px;
height:auto !important;
height:100px;
}
Narga

November 19th, 2007

http://www.narga.net

I created a vietnamese translation page on http://www.narga.net/348 and linkback here!
Thanks for your post
Noupe

November 19th, 2007

http://noupe.com/

Many thanks to Karim, pacotole for pointing out Dustin Diaz’s hack for min-height, i added it to hack#3 today and credits were given to them.
Narga: Thanks for translating this post to vietnamese, credits is given to you too.

Noupe

November 19th, 2007

http://noupe.com/

David: To allow browser caching insert this code at the top of the php file.


< ?php

$headers = apache_request_headers();

// If there is a 'If-Modified-Since' in the request header and this file has NOT been modified since the 'If-Modified-Since'

if (isset($headers['If-Modified-Since']) &#038;&#038; strtotime($headers['If-Modified-Since']) >= filemtime(__FILE__))

{

header(&#8217;HTTP/1.1 304 Not Modified&#8217;);

die();

}

// Set the cache to expire in a week

$nextWeek = gmdate(&#8217;D, d M Y H:i:s&#8217;, mktime(date(&#8217;H'), date(&#8217;i'), date(&#8217;s&#8217;), date(&#8217;m'), date(&#8217;d')   7, date(&#8217;Y')));

header(&#8217;Expires: &#8216; . $nextWeek . &#8216; GMT&#8217;);

// Set when the file was last modified

header(&#8217;Last-Modified: &#8216; . gmdate(&#8217;D, d M Y H:i:s&#8217;, filemtime(__FILE__)) . &#8216; GMT&#8217;);

// Do browser tests and output here or if you want to save cpu too you can do this,

// but make sure to check the modified time of &#8216;actual_css.php&#8217;

include(&#8217;actual_css.php&#8217;);

?>

There’s also this method, it uses javascript:

http://rafael.adm.br/css_browser_selector/

Noupe

November 19th, 2007

http://noupe.com/

Online Television:
GIF files are only capable of displaying a pixel as either completely transparent or completely opaque. When an image contains alpha layers, however, parts of an image can be partially transparent. PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows.
It realy depend on quality of image that you want and if you want to show some effects like drop shadows, transparency, gradient effects, etc…
Scott H

November 19th, 2007

http://www.textfixer.com

Great article, nice summary of approaches that save you from pulling out your hair.

BTW small typos in point 6 “teh folloing” should be “the following” and in point 7, “methos” should be “method”.
Noupe

November 20th, 2007

http://noupe.com/

Thanks Scott, i fixed the typos.
Alex

November 20th, 2007

“And we cann’t just use GIFs because aren’t good for higher resolution images.”

This isn’t true, the compression options are better on GIF’s, the superior element in PNG’s is that they support Alpha Transparency.
collin

November 21st, 2007

http://dev.collin.cn

nice stuff!
freese

November 22nd, 2007

About “5) Whatever: hover”. It worked for me but, if what you´re doing, e.g. changing the background-position of a background image (css-sprites) this solution does not work, at least it didn´t for me.

Does anyone know how to achive a css-sprites hover-effekt on an element in IE?

Thank you
Noupe

November 23rd, 2007

http://noupe.com/

Alex: PNG makes GIF look pretty pathetic: it supports gamma correction, (sometimes) smaller file sizes, loss-less compression, up to 48-bit color, and, best of all, true alpha transparency.
GIF image can either use no transparent colors at all or have one color that’s completely transparent – there are no degrees of transparency.
A PNG can be transparent in varying degrees – in other words, it can be of variable opacity. And a transparent PNG is background-independent: it can live on any background color or image.
Carlsbad Home Insurance Quotes

November 26th, 2007

http://www.dothomeinsurance.com/Carlsbad-Home-Insurance-Quotes.html

nnial 2007 - salvatore iaconesi - del.icio.us poetry seems quite interesting - J.Sanders
Tayzar44

December 7th, 2007

http://www.tayzar44.blogspot.com

Great Hacks!! I was looking for PNG transparency code And now I got it.
Rob Knight

February 7th, 2008

http://robknight.net

On #3: IE6 will often crash when your expression sets the width to the same as the width it is looking for, if that makes sense. I’ve run into this a couple of times.

Cameron Moll discusses the problem here:
http://www.cameronmoll.com/archives/000892.html

Excellent list. Thanks for compiling this. It is nice and sane. I’ve seen people do VERY strange things to keep IE in line and I’m glad to see more reasonable things here. Clients - although they are not usually aware - don’t wish to pay $$$ for a stylesheet full of hacks.

Cheers,
Rob
Allan Haggett

February 7th, 2008

http:/iteratemedia.com

Using CSS expressions for min-width can *seriously* impact the performance of the page as each expression is re-evaluated every time the user does *anything* in the UI (i.e. every move of the mouse).

Check out Steve Souders (formerly of Yahoo!, now of Goooogle) rule that states this with authority:

http://developer.yahoo.com/performance/rules.html#css_expressions
karim

February 7th, 2008

http://xhtml-css.com

Hi,

You can always avoid the first hack
and the img.pngfix { behavior: url(pngHack.htc); } rule will make your css invalid, so include them in your conditional style for IE.
Since it’s a javascript hack actually, i think it’s better to use a javascript that will add or load from a separate sheet this rule.
Jermayn Parker

February 7th, 2008

http://germworks.net/blog/

Good article!!
Oh how I cannot wait for IE6 to fall off the side of the earth!!
Barney

February 8th, 2008

http://barneycarroll.com

Great resource. Ordered list, simplistic, useful! Very rare occurrence
Keith

February 8th, 2008

http://greataffirmations.com

Outstanding article…thanks for sharing.
Best Regards, Keith Johnson, Author,
“365 Great Affirmations”
Felipe

February 8th, 2008

http://forum.alsacreations.com

Hacks … in 2008, ouch!
“4) Easy selectors” should be avoided and conditional comments (3) used as much as possible.

For transparent PNGs (6), Sitepoint has a nice tutorial ( http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ ) if you have Adobe Fireworks (PNGnq also works but not in every cases - but this one is open source - see http://eriestuff.blogspot.com/2007/11/cross-browser-png8-alpha-transparency.html ). You have alpha transparency everywhere except IE6 where it degrades gracefully to index transparency without the need of any hack (everything is embedded in the PNG-8)
Dennison Uy - Graphic Designer

February 9th, 2008

http://blog.codesignstudios.com

Title of the article should be “6 CSS hacks …” Item #7 “Stylegala - No More CSS Hacks” is a real, programmatic solution and not exactly a “hack”
Matthew James Taylor

February 9th, 2008

http://matthewjamestaylor.com

With the exception of IE conditional comments we should NEVER use CSS hacks. A hack is just that, a hack - it’s not clean scalable code that is guaranteed to continue working in the future with new browsers.
Thierry

February 12th, 2008

http://www.tjkdesign.com

I believe the math is wrong here (hack #1):

padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;

it should be:
width/**/:/**/ 20em;
Jonah Dempcy

February 12th, 2008

http://www.revolutionvoid.com

I can’t say that I agree with these hacks. They seem, well, hacky, fragile, prone-to-break and definitely shouldn’t be considered best practices.

Instead of targeting IE specifically with hacks (which may be fixed in future versions), consider this:

Conditional comments could be used to add an extra wrapping around all page content which has classes we can use to write CSS.

The code looks like this, inserted just after the opening tag:

And more code added before the closing tag:

Once this code is added, an extra wrapping will be present, only for Internet Explorer. Then, you can write CSS styles like this, to target specific versions of Internet Explorer:

#foo { /* default for all browsers */
color: red;
font-size: 11px;
}

.ie #foo { /* all versions of IE will have blue text */
color: blue;
}

.ie6 #foo {
font-size: 12px; /* IE6 will have font-size 12px */
}

.ie7 #foo {
font-size: 13px; /* IE7 will have font-size 13px */
}
Jonah Dempcy

February 12th, 2008

http://www.revolutionvoid.com

OK, my last comment didn’t go thru. It was HTML so the HTML must have been deleted or something. Trying again, this time adding an extra space before tags, e.g. for a paragraph tag:

The conditional comments can be used to add an extra wrapping around all page content which has classes we can use to write CSS.

The code looks like this, inserted just after the opening tag:

And more code added before the closing tag:

Once this code is added, an extra wrapping will be present, only for Internet Explorer. Then, you can write CSS styles like this, to target specific versions of Internet Explorer:

#foo { /* default for all browsers */
color: red;
font-size: 11px;
}

.ie #foo { /* all versions of IE will have blue text */
color: blue;
}

.ie6 #foo {
font-size: 12px; /* IE6 will have font-size 12px */
}

.ie7 #foo {
font-size: 13px; /* IE7 will have font-size 13px */
}
lib

February 12th, 2008

erm, you don’t *need* to use the box model hack. if you set a width, don’t set margin or padding. and of course if setting a margin or padding, don’t set a width. set the width on the containers and then set margin and padding on the elements within them.
that’s insanely simple, and much easier than dealing with an ugly hack.
Fred Boulton

February 12th, 2008

Why not design allowing for the differences? That way you don’t need any hacks. The pages may not be PP(pixel perfect)across all browsers and situations, but you never have to worry about the hacks not working in certain situations.

Keep you pages and CSS simple and you shouldn’t need hacks.

Great article, anyway!
Dejan Cancarevic

February 16th, 2008

http://www.stylizedweb.com

you can see the different list here http://stylizedweb.com/2008/02/14/10-best-css-hacks/
Richard Morton

February 18th, 2008

http://www.qm-consulting.co.uk

Great list. Although I am sceptical about the use of hacks I recognise that they are a necessary evil at the moment. No doubt IE 23.01 will avoid the need for most of these.
Ralph

March 6th, 2008

http://www.webpixelkonsum.de

Thank you for this summary about ie-hacks, because i have only a mac and no windows anythin to test my layout for pc-user

Ralph
posicionarsitio

March 13th, 2008

http://www.posicionarsitio.es

Well, we started again… All the time I think I know ALL about css … somebody destroy my idea. Anyways, thanks, is good to know that I didn’t know some clinches.

posicionarsitio
efectivaweb

March 13th, 2008

http://www.efectivaweb.com

Well, as a matter of fact css is a brand new tool for me and I really love it

Thanks

efectivaweb
php-web-developer

May 24th, 2008

http://www.php-web-developer.net

Great Hacks!! I got it.
adtech

June 13th, 2008

http://www.reklam-20.com/

Nice list. I’ve bookmarked it.
iyinet webmaster forumu 2008 seo yar??mas?

June 17th, 2008

http://www.srro.net

Great Hacks!! I got it.
adtech ile reklam

June 19th, 2008

http://www.adtechilereklam.net/

very beautiful
anilcan

June 22nd, 2008

http://www.anilcan.net

thanks
Travel Directory

July 2nd, 2008

http://www.traveltourismdirectory.com

an essential hack collections must definitely not miss, help you get things done nicely
health

July 12th, 2008

http://www.articless.info/

Nice indeed thanks
Marco

July 26th, 2008

http://ealtamira.com

7 really useful tips, thanks
Filipino Freelance Web Designer

July 28th, 2008

http://www.aldrinponce.com

This is a good tip in dealing most specially for cross compatibility and the css problem most on IE browser problem, although no matter how we hate this browser but it’s part of our job to deal with it, so i thank you for this, very helpful for web development projects.
www.adtechreklamr10netseo.com

August 3rd, 2008

http://www.adtechreklamr10netseo.com

Very nice hack, tnx