[Site map] You are here --- > Newbies Paradise > Tutorials > Unofficial > Website > XHTML / CSS > Reading a tutorial

The CSS methods to "cheat" with Internet Explorer

	Author : Leo Creation : : on 04/17/2008 08:33:58 PM Last modification: : on 04/17/2008 10:15:39 PM Rate and comment this tutorial Print this tutorial

You are about to read a tutorial written by a member of this website. Although the author probably invested every effort to make this tutorial's content correct, we can not guarantee that the information on this page is 100% exact. Please keep this in mind when reading this tutorial. ;o)

Hi everyone ! My name is Leo. This course was originally published on the French version of this website, "Le Site du Zéro". It was written by darkagonik. I got his authorization to translate it. If there's any mistake, you can send me a PM

There's a thing that most of the webmasters want : an identical displaying on as many browsers as possible. And the problems often come from Internet Explorer. Fortunately, there are some methods which can help you to bypass some difficulties

Chapter Contents :

Why do we have so many problems with Internet Explorer ?
!important
* html
Comment : <!--[if IE]>
Which method to choose ?

Why do we have so many problems with Internet Explorer ?

Internet Explorer is Microsoft's browser. Microsoft started the sixth release in 2001, and it doesn't carry most of CSS 2 and CSS 3 properties. It's even worth, as IE6 (Internet Explorer 6) interprets them a different way. That's why it's really difficult to make a 100%-IE compatible design.

And what about IE7 ?

I hope that IE7 is going to solve many CSS problems we have with IE6. But anyway, IE6 will be used by most of the users for a while. That's why we'll have to put up with it !

!important

!important is a CSS method you can apply to any property. You must use it this way :

tags
{
property : value !important;
}

// For example :

body
{
background-color : green !important;
background-color : red;
}

To explain its aim to you, I'm going to explain the example first. We defined background-color twice. If we hadn't written !important, the value would be red, which removes the other value green. But as we have written !important after green, it's this value which is interpreted. That's why the background should be green, and not red.

Internet Explorer doesn't understand this rule. It simply ignores it, whereas all the recent browsers interprete it. Make a try ! Firefox will display a green background, whereas Internet Explorer will display a red background. :wizard:

Specific case

Here is a part of a code I've written when I was making a design :

#header h1
{
float: none !important;
float: left;
}

This is a specific case, as if Internet Explorer didn't matter for me, I would have written it because float: none would be useless as none is the basic value in this case. That why it's !important ( :lol:

) to know the basic values to use fully this CSS method.

* html

Here is how to use this method :

* html tags
{
// Only for Internet Explorer
}

// For example :

* html body

{
background-color: red;
}

This symbol : * means "any tag". Therefore, * html means "any tag before the html tag". Of course, there isn't any. That's why the recent browsers don't perform it.
Once again, Internet Explorer doesn't understand this rule, and performs the whole code that is in. In this example, IE will display a red background.

Short exercise

Instead of using the !important method, use the one we have just seen.

h1
{
float: none !important;
float: left;
}

float: none doesn't make any change for a title (here h1).

The solution :

Spoiler (click to show)

* html h1
{
float: left;
}

It's shorter like this, isn't it ?

Comment : <!--[if IE]>

Although, with the other methods, we derive profit from a lack in Internet Explorer's CSS interpretation, now we're going to learn a method which is more based on xHTML. This is a special comment that IE voluntarily interprets.

This is pure XHTML ! Don't put this in your CSS file.

Therefore, you can put some xHTML code between  and IE will be the only browser to read it.

One more style sheet only for Internet Explorer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Welcome on my website !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
</body>
</html>

In this example, only Internet Explorer will read the ie.css file. Notice that we first write this line :

<link rel="stylesheet" type="text/css" href="style.css" />

This is the system of Cascading Style Sheets

You can give the name you want to your style sheets : here it's style.css and ie.css.

Which method to choose ?

You choose the one you like better, or the one you have understood better.

Anyway, try to make your code as readable as you can

Anyway, if you decided to do a specific style sheet for Internet Explorer, don't use the other methods (!important and * html), as you could get confused. :huh:

Here it is ! Thanks to these methods, you'll be able to manage to have an identical design on many browsers, including Internet Explorer. You also know how to make a different design for IE, but personally, I can't really see the point.

In this course, I've only introduced to you the methods available for Internet Explorer. But there are many other methods. Here is a table with many other things you can use.

To conclude, remember that these CSS methods make your code less readable, so don't use them too much. The most of the time, you can't manage to do what you want without them !

Author : Leo
Rate and comment this tutorial
Print this tutorial

How-to

Community

User Menu

Search

Guestbook

Advertising