CSS Hacks and Commands

CSS is used to control the layout of the page and styling of page elements, text and images - different browsers interpret CSS differently so CSS hacks and browser specific CSS commands are used to try to ensure websites appear similar acorss browsers.

Below are a list of hacks for individual browsers including IE 7:

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE7 only
*+html

All except IE6 and IE7
*|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 {}

Safari
html[xmlns*=""] body:last-child {}

To use these selectors, place the code in front of the style. E.g.:

#content-box {
   width: 300px;
   height: 150px;
}

/* overrides the above style and changes the width to 250px in IE 6 and below */

* html #content-box {
   width: 250px;
}

Other useful CSS tips

CSS Hacks & Issues

8 helpful solutions which we find essential when designing with CSS.

New CSS commands for Internet Explorer 7

There are a small handful of new CSS commands that you can now use for Internet Explorer 7.

CSS Vertical Centering

Centering content vertically within a fixed height container.