Noupe Editorial Team November 13th, 2007

The 7 CSS Hacks that we should use

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.

Further Readings
Credits

Thanks to our friends "Karim" and "pacotole" for pointing out Dustin Diaz’ nice hack for min-height.

Thanks to our friend "Narga" for creating a vietnamese translation page on http://www.narga.net/348

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

37 comments

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

  3. 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)

  4. 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”

  5. 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.

  6. 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 */
    }

  7. 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 */
    }

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

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

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

  9. 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.

  10. 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!

Sorry, Comments are closed...