Lor.Dal.Col.blog

CSS TRICK: Code targeted only for IE

5 08 2006

How to write some CSS code that only Internet Explorer can read.

Unfortunately not every browser is W3C standards compliant, so sometimes we have to write some lines that only a specific browser can read.

Let’s see some filters and tricks to write code only for Internet Explorer.

We all know the trick of Tantek Çelik, the box-model-hack: it is based on a hack that allows to write some lines that only IE 4/5.x/Windows can’t read.

/* BOX MODEL HACK
http://www.tantek.com/CSS/Examples/boxmodelhack.html */
div.example
{
width: 400px;
voice-family: “\”}\”";
voice-family: inherit;
width: 300px;
}

Lines before “\”}\”" are read by every browser, also IE 5.x.

But lines after “\”}\”" are read only by standards compliant browsers, not IE 4/5.x/Windows, so we can write specific code. Thanks to this hack we can specify a different width in IE 5.x, that does not support the W3C box model.

We also have a way to write code that only IE (any version) can’t read, we use it to write specific code for Mozilla, Opera, Safari, etc.

html> body .example
{
/* IE doesn’t read those lines…*/
width: 300px;
}

But a hack that allows you to write special code only for IE didn’t exist; everything IE can read, every browser also can.

There is a way, but it is too much inconvenient: using the “Conditional Comments for Internet Explorer”. I don’t like it because I have to separate CSS code in two files (HTML and CSS), and when I have to edit style rules I have to jump on them.

Here there is an example of that:

<!–[if IE]>
<style type=”text/css”>
/*<![CDATA[*/
#example {
color: #00cc00;
}
/*]]>*/
</style>
<![endif]–>

After various attempts I discovered that if I put a score (–) before the property name. only IE (5.x, 6) can read that property. The problem is that it is not standards compliant.

Then I found in a web-site (I can’t remember what) a trick used to combat the “Peekaboo Bug” , it consists of putting a * before the selector.
I tried and I found that it is a trick we can use every time to write something that only IE can read.

You have only to write this:

html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* html { /* only for IE */
overflow: hidden;
}
#headTitle
{
position: fixed;
left: 50%;
top:50%;
margin: -280px00-440px;
}
* html#headTitle { /*only for IE*/
margin: -280px00-450px;
position: absolute;
}