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 5 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: 2em; border: 1em solid blue; width: 30em; w\idth: 10.2em;

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 ordinary comments and therefore, they are safe to use.

The typical usage is as follows:

The below code applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0 except IE 7 and 8

IE (Any version of IE)

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

lt IE version (Versions less than version)

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

lte IE version(Versions less than or equal to version)

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

IE version (Only version)

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

gte IE version (Versions greater than or equal to version)

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

gt IE version (Versions greater than version)

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

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 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)Transparent PNGs

Now a days most of the website preferring png transparent IMG . Transparent PNG image was support by Mozilla firefox and IE 7. So we are here to hack the lower version than IE 7 which doesnot support transparent PNG image.

Although we can replace the png file with gif image format but it willnot be good idea to replace with gif image format because they aren’t good for higher resolution images. So, better way is to hack with CSS.

we need 2 files

1. iefix.htc

2. transparent.gif

Download files

Add one simple line of CSS code to your ie.css file

img.iefix { behavior: url(iefix.htc); }

Advertisements