Conditional Comments

This css tutorial will explain about Internet Explorer problems while designing a site. Internet Explorer does not support many of css tags and subject of most css hacks. Designers have to declare conditional comments to build a web and force IE to behave the way they want.

The benefit of the conditional comments is that you can bypass the browser bugs (in this case Internet Explorer) and make your site looks exactly the same on every browser.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don’t match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn’t match). Note that, since versions of IE older than IE 5 don’t support conditional comments, you may get unexpected results in those browsers. I am explaining this positive and negative thing below.

The syntax for conditional comments is as follows:

Positive
<!--[if condition]> HTML <![endif]-->
Negative
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

HTML is the HTML to be included if the condition does or doesn’t match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions, <![IGNORE[--><![IGNORE[]]> can be replaced with --> if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The <![IGNORE[ ... ]]> directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: <!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]--> where XHTML is the same both places. Note that Internet Explorer 7 and below don’t yet recognize XHTML as a form of XML, so this is merely forward-looking.

Text spilling out of its container in non-IE browsers

Internet Explorer, unlike other browsers, will expand borders and background colours so text doesn’t spill out of its containing element. Take a look at the following example:

Example text

If you’re viewing this in Internet Explorer, the box should look fine. In all other browsers the text is spilling out of the right-hand side of the box. The box has been assigned class=”box” and has the following CSS commands assigned to it:

.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

Non-IE browsers will adhere to the width: 40px CSS command, which is why the box doesn’t expand in these browsers. IE instead interprets width as min-width, and therefore expands the box to fit the text (the same applies with height and min-height).

To ensure the text doesn’t spill out of the box in all browsers, you’ll need to use the following CSS rule, in addition to the first one:

html>body .box
{
width: auto;
min-width: 40px
}

IE will ignore this CSS command, as the command has html>body at the front of it. As such, this CSS command is only for non-IE browsers. The first CSS rule, width: auto, cancels out the original width rule. The second command, min-width: 40px then assigns a minimum width to the box, so the box will always expand to fit the text.

Check out the box again (you won’t see any difference in Internet Explorer, so open this up in another browser to see the change):

Example text