With the advent of CSS,  the power of presentation in web pages was highly increased. Transition from old style writing of HTML pages to new wave of full life UIs has brought with it many concerns for the web designers. The major concern for web designers nowadays is to create cross browser complaint websites with as little variation across browsers as possible. Internet Explorer 6 being the major problem creator among the lot. Since IE6 still holds 10.2% of the browser market share, according to w3schools browser statistics for January 2010, it needs to be tackled. Most of these problems are mainly caused due to variation in the implementation of specifications by browser vendors.

Global CSS Reset

Different web browsers having their own defaults defined for most of the CSS properties and thus pose a problem in cross browser compliancy of front-ends. In order to address this, you should use CSS resets which brings the browser defaults to a same value across browsers. Various CSS resets are available in the web world, among which, Eric Meyer’s Reset Reloaded, YUI Reset CSS, Siolon’s global reset, Shaun Inman’s Global Reset & Tantek’s CSS reset  are notable. Personally I use Eric’s Reset Reloaded because it neutralizes virtually every default CSS rule of browser.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}

del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Easy Selectors

These are the valid CSS selectors to address a particular browser or browser version. Most of the time, this technique is used for Internet Explorer only, although we can use it with every other browser. Below is the usage of selectors for addressing different browsers.

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 {}

Opera versions 9 and below

html:first-child {}

Google Chrome

body:nth-of-type(1) p {
   color: #333333;
}

Apple Safari

html:lang(en)>body  .classname {}

IE Conditional Comments

This technique is used to address some CSS for Internet Explorer only and make other browsers to simply avoid it or report it as comment. It works by putting up your code in comment style IE Conditional tags.

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

Again we can use different sytax to address a particular browser versions like

<!--[if IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if lt IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

You can read more about version targeting IE at quirksmode.org

Transparent PNGs

Although all the modern browsers support transparency for PNGs, yet again Internet Explorer 6 has a problem with it. IE6 displays a white patch beneath the PNG image. There are lot of scripts / techniques / solutions available to tackle this problem. One of the solution is to use HTC script with your page. Many other plugins and scripts are available to tackle this problem. jQuery pngFix, jQuery iepngfix are used alongwith jQuery. I personally use DD_belatedPNG.

According to its author

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss

It has support for PNGs in background or in SRC of an <img/> element. It also fixes background-position and background-repeat properties of CSS, which creates a problem with other scripts used. It uses Microsoft’s buddy, VML to fix the issues.

Here is its usage

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');

/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->

Fixing IE Box Model Bug

This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.

This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:

Box-in-a-Box

According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

In this case our markup will be

.box { width:100px;}
.box-inner {padding:10px;}
Simplified Box Model Hack (SBMH)

It uses the CSS parsing  bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover

The structure for this hack is

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

The first line “width: 100px;” is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property “\width: 140px;” is for IE 5 and 6/quirks mode. The final line “w\idth: 100px;” will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

box-sizing

The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called `content-box` and the Internet Explorer box model is called `border-box`.

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.

Hover State

All the modern browsers support :hover pseudo-class for about any element, but IE 6 has the support for hover pseudo class on <a> element only (you need to set the href attribute for <a> element to get this working in IE6). To fix this issue with IE6, you need a proprietary fix for this.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

Download the script file and add this line in your CSS file, and you are done.

body { behavior: url("csshover3.htc"); }

Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

Double Margin Bug

Most of the people working with Web will be familiar with IE’s double margin bug. The bugs arises when you float an element to one side and apply some margin on that side. Without any reason, it simply doubles that margin.

For example, if we do this,

.box {
   float: right;
   margin-right: 10px;
}

IE6 will double the margin (most of the times) to 20px without any reason. But this bug can be easily overruled by changing the display property of the floated element from block to inline. So the CSS will be

.box {
   float: right;
   margin-right: 10px;
   display: inline;
}

Stepdown problem in IE6

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. This can be fixed by applying display: inline; property to floated elements.

6 Responses to Ultimate guide to techniques for cross browser CSS

  • Gaurav M Says:
    February 5th, 2010

    Very nice article
    most of common headaches solved
    nice!
    keep sharing

  • Suhasini Says:
    February 27th, 2010

    Our one of developers was looking for the same code and I believe this will help him for sure. Thanks for sharing.

  • Irfan Ahmad Says:
    October 7th, 2010

    Dear Author,
    I like ur post, as i m not a designer but beging .net Programmer sometimes needs to implement some techniques.

    I also belongs to Paradise of the World (KASHMIR)
    Keep it Up.

    May God bless U.

    Allah Hafiz

  • Ravi Says:
    October 15th, 2010

    Hey nice post.

    thanks

  • anon Says:
    December 30th, 2010

    Good article

  • laxyam Says:
    January 31st, 2011

    This article is helpful to all beginers like me. Thanks for Shareing.

Leave a Reply

Your Name*

Your Email*

Your Website

Your Comment*