Introduction to Browser-Specific CSS Hacks http://www.sitepoint.

com/print/browser-specific-css-hacks

Article
Home » Client Side Coding » CSS Tutorials » Page 1

Introduction to Browser-Specific CSS Trenton Moss

Hacks Trenton is crazy

about Web
usability and
By Trenton Moss accessibility –
January 20th 2005 so crazy that he went and
Reader Rating: 9.1 started his own web
accessibility and usability
More and more Web developers are ditching tables and coming consultancy to help make
round to the idea of using CSS [1] to control the layouts of sites. the Internet a better place
And, given the many benefits of using CSS, such as quicker for everyone.

download time, improved accessibility [2] and easier site Trenton Moss has written 13
management, why not? articles for SitePoint with an
average reader rating of 8.8.

The Problem with CSS View all articles by Trenton

Moss...

Historically, the main problem with using CSS has been a lack of browser
support. This is no longer the case, as version 5 browsers, which all provide good support for CSS, now account for
over 99% of the browsers in use.

The problem that remains is that browsers can sometimes interpret CSS commands in different ways, which fact
alone causes many developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear
not, though! As you learn more about CSS, you'll gradually start to understand the different browser
interpretations and realise that there aren't really that many -- and that, where necessary, their idiosyncrasies can
be catered to using various workarounds or hacks.

How CSS Hacks Work

The way CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and a second CSS rule
that overrides the first command to the other browsers. If you have two CSS rules with identical selectors, the
second CSS rule will almost always take precedence.

Say, for example, you want the space between a page's header area and its content to total 25px in Internet
Explorer. This gap might look good in IE, [3] but in Firefox [4], Opera [5] and Safari the gap is huge -- you decide
that a 10px gap looks far better. To achieve this perfect look in all browsers, you could use the following two CSS

1 of 5 10/13/2006 9:43 PM
Introduction to Browser-Specific CSS Hacks http://www.sitepoint.com/print/browser-specific-css-hacks

rules:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the
moment because all browsers can understand both CSS rules. As such, they'll all use the second CSS rule because it
comes after the first.

By inserting a CSS hack, we can perform browser detection by hiding the second CSS rule from IE. This means that
IE won't even know that rule exists, and will therefore use the first CSS rule. How do we do this? Read on to find
out!

Browser Detection for Internet Explorer

To send different CSS rules to IE, we can use the child selector command, which IE can't understand. The child
selector command involves two elements, one of which is the child of the other. So, html [6]>body refers to
the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

IE can't understand the second CSS rule, due to the html>body CSS command, so it will ignore it and use the
first rule. All other browsers will use the second rule.

Browser Detection for Internet Explorer 5

It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it's
very necessary. The problem lies in IE5's misinterpretation of the box model. When we specify the width of an
element in CSS, padding and borders aren't included in this value. IE5, however, incorporates these values into the
width value, which causes element widths to become smaller in this browser.

The following CSS rule would result in a width of 10em for all browsers, except IE5, which would give it a width of
just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the
width):

#header {padding: 2em; border: 0.5em; width: 10em}

The solution to this problem? The box model hack [7], invented by Tantek Çelik, who has become quite famous in
the CSS world as a result of this hack -- and rightly so. To perform browser detection, and send a different CSS rule
to IE5 you would use the following:

2 of 5 10/13/2006 9:43 PM
Introduction to Browser-Specific CSS Hacks http://www.sitepoint.com/print/browser-specific-css-hacks

#header {padding: 2em; border: 0.5em; width: 15em; voice-family: "\"}\"";

voice-family:inherit; width: 10em}

How Mr. Celik worked out how to do this is anyone's guess! The important thing is that it works: IE5 will use the
first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left
and for the right). This would ultimately give the element a width of 10em in IE5.

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which, for
some reason, can't understand the CSS command that comes immediately after all those squiggles. It doesn't look
pretty, but it does work!

There is a slight problem with the box model hack, as it can often 'kill' the next CSS rule in IE5.0. However, there
are plenty of other box model hacks [8] that you could implement instead.

Browser Detection for Internet Explorer on the Mac

Quite simply, IE on the Mac does strange things with CSS. The browser's become somewhat obsolete since
Microsoft announced it's not going to release an updated version. As such, many Web developers code their
CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced
functionality or design that's offered to users of other platform and browser combinations. Provided IE/Mac users
can access all areas of the site, this is seen as a suitable way to do things.

To hide a command using the IE/Mac CSS hack [9] is simple. It involves wrapping a set of dashes and stars around
as many CSS rules as you like:

/* Hide from IE-Mac \*/

#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there's a certain area
of the site that doesn't work properly in IE/Mac. If that section isn't fundamental to visitors' use of the site, you can
simply hide it from IE/Mac like so:

#noiemac {display: none}

/* Hide from IE-Mac \*/

#noiemac {display: block}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e. <div id="noiemac">). The second
CSS rule, which IE/Mac can't see, displays this section.

3 of 5 10/13/2006 9:43 PM
Introduction to Browser-Specific CSS Hacks http://www.sitepoint.com/print/browser-specific-css-hacks

Browser Detection for Netscape 4

Netscape 4 has limited and somewhat erratic support for CSS. Making a CSS layout for this browser, whose market
share has now slipped well below 1%, can be extremely challenging. It's become common practice nowadays to
completely hide the CSS file from this browser. This can be achieved using the @import directive to call up the
CSS document:

<style type="text/css">@import url(cssfile.css);</style>

Netscape 4 will display a non-styled version of the site, as it can't understand this @import directive.

Checking your Site in the Different Browsers

At the time of writing, the major Internet browsers include IE5, IE6, Firefox, Opera and Safari. (Check out
TheCounter.com [10] for up-to-date browser statistics.) You can download all these browsers, and a number of
more obscure ones, at the Evolt browser archive [11]. If you're not sure how, find out how to install multiple
versions of IE on your PC [12].

Ideally, you should check your site in all these browsers, on both PC and Mac (except IE6 and Safari, which are
only available on PC and Mac respectively). If you don't have access to a Mac you can get a screenshot of your site
on Safari by running it through Dan Vine's iCapture [13], or you can pay to use Browsercam [14], which offers a
more extensive screen capturing service.

Conclusion

On the whole, modern browsers have very good support for CSS -- it's certainly good enough for you to use CSS to
control layout and presentation. Sometimes however, certain page elements will appear differently in different
browsers.

Don't worry too much if you don't know the reason why: play around with the CSS rules and make some
trial-and-error changes, such as perhaps changing a padding value to a margin. If that doesn't work, you can fix it
up with these CSS hacks and your Web pages should look great across all browsers!

Back to SitePoint.com

[1] /glossary.php?q=C#term_8
[2] /glossary.php?q=A#term_61
[3] /glossary.php?q=I#term_30
[4] /glossary.php?q=F#term_45
[5] /glossary.php?q=O#term_27
[6] /glossary.php?q=H#term_75
[7] http://tantek.com/CSS/Examples/boxmodelhack.html
[8] http://css-discuss.incutio.com/?page=BoxModelHack
[9] http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html

4 of 5 10/13/2006 9:43 PM
Introduction to Browser-Specific CSS Hacks http://www.sitepoint.com/print/browser-specific-css-hacks

[10] http://www.thecounter.com/stats/
[11] http://browsers.evolt.org/
[12] http://labs.insert-title.com/labs/article.aspx?ID=795
[13] http://www.danvine.com/icapture/
[14] http://www.browsercam.com/

Easy-to-understand books for web professionals

The CSS Anthology: 101 Essential Tips, Tricks & Hacks

The Search Engine Marketing Kit
Build Your Own Web Site The Right Way Using HTML & CSS

» Page 1

5 of 5 10/13/2006 9:43 PM