This browser is not Internet Explorer

Go to see Boxes


<BROWN> (brown against background)
<FIREBRICK> (firebrick over background)
spring green
spring green (second option)

Now is the time for all men of goodwill to come to the aid of their country. Buy Google, Netflix, Apple, Intel and Microsoft.

Margin: 49, Border: 1, Padding: 30, Width: 384,
Color: White.

This is an example of two column format (left). The left column has a left margin (approx. 5%) to the edge of the page. The width (44%) has to be adjusted till it fills the space. Regardless of the window size the two columns should be made to touch. If it looks good under IE the boxes will overlap or spill under Mazillo Firefoz!

This is an example of two column format (right). The right column has a right margin (approx. 5%) to the edge of the page. The width (44%) has to be adjusted till it fills the page. However, while it may look good under IE, it is too wide under Mazillo Firefox! Margin: 49, Border: 1, Padding: 30, Width: 384, Color: White. At less than full screen, causes boxes to overlap!

The following document provides a way to adjust the width of the boxes (above) so that they touch each other in multiple browsers. This is essential if one wants to put a verticle rule between two columns of print. Previously, this was done using the Star-HTML hack with IE. Note that a break <br clear=all> (which prevents subsequent text from being mixed with the boxes) creates a blank line in Mozilla Firefox but does not in Internet Explorer! A CSS statement specifying "visibility:hidden;" and "margin:-1.5EM" eliminates the "not IE" statement. Defining an alternate "div width" to wrap the document in a non-IE browser keeps the boxes together in a narrow window, and truncates the right side of the document instead of wrapping the boxes. However, strange things happen when the page is made narrow in Mozilla Firefox! Also, setting widths in per cent seems to work better than pells!

Go to Top

Guest Article by Hiroki Chalfant

The Star-HTML hack was a very elegant way to easily target style rules at IE and apply fixes. Internet Explorer 7 has fixed the Star-HTML hack, taking away the elegance. This article introduces a simple method for targeting CSS rules at IE that uses only one stylesheet and works for all versions of IE. It will require some minimal markup using Internet Explorer's conditional comments and CSS descendant selectors. Here is a quick example. The css-controlled boxes below have detected whether your browser is IE/Win or not, using only conditional comments and a single CSS file. That file uses only clean rules with no strange complications in the selectors: This browser is "IE/Win". This browser is "not IE/Win"...

#IEroot: The New Star

A wrapper may be made to enclose the content of a page, and then you can write descendant CSS rules that mention that wrapper's ID or class name in the selector. But what if only IE thought that wrapper existed? Then those rules would only work for IE, while other browsers would ignore the rules completely. This is more or less how it was with the Star-HTML hack, where a mysterious wrapper seemed to be surrounding the HTML element in IE browsers. This made possible a very clean and easy selector construction: * html #myelement {}. Now this trick is different because IE7 has lost the mystery wrapper and will not read that selector as IE6 does. What we need is a way to make a new wrapper to use that only IE can see. But how can this be done? It so happens that you can use Conditional Comments to make IE think there is a wrapper between the body and the entire page contents. IE's view of the page element hierarchy will become different from all non-IE browsers, letting us write CSS to take advantage of the difference. The code is not very difficult, but the syntax is a bit different and must be correct for the method to work. Conditional Comments behave just like simple HTML comments, but they have a specific syntax that IE/Win browsers can recognize. When that syntax is exactly correct, IE/Win browsers will look inside the comment and parse whatever is inside. The starting tag for the new div wrapper will go directly after the body start tag, and the wrapper's end tag is placed directly preceding the body's end tag. Each of these div tags will be wrapped in a conditional comment, allowing only IE/Win browsers to parse those div tags, for example: <!DOCTYPE your favorite doc type> <html> <head> ... <style type="text/css"> ... The following CSS statement suspresses the "Not Internet Express" output and removes it's space if the browser is not Internet Explorer: #IEroot #notIE {visibility:hidden;margin-top:-1.5EM} Following the end style, end head and start body tags (</style>, </head> <body>), add: <!--[if IE]> <div id="IEroot"> <p>This browser is Internet Explorer</p> <![endif]--> <p id="notIE">This browser is not Internet Explorer</p> The last statement, using descendant selector "IEroot notID" above tells the client they are not using Internet Explorer. At the end of the web page, the following code completes the IE wrapper and web page: <!--[if IE]> </div> <![endif]--> </body> </html> The first block of code after the body tag has a starting div tag with an ID of #IEroot inside a conditional comment; remember, only IE sees this div. The last block of code before the closing body tag is a closing div tag inside another conditional comment; this closing div tag will match the starting div tag in the first block of code. Again, only IE will see this closing tag. Between the opening and closing of the #IEroot div is where all of the normal page markup will go. In this example it was just a box with some content, but the idea is for the #IEroot div to be the ancestor of all page content. Using CSS, style the page as usual for non-IE browsers. Then in the same stylesheet, use #IEroot as a prefix in descendant selectors to target specific rules at IE. The example below styles the div called #anyelement to have a red border in non-IE browsers, and a blue border in IE. /* all browsers make border red */ #anyelement { border : 2px solid red; } /* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */ #IEroot #anyelement { border-color : blue; } The first rule is a simple rule to apply a red border to #anyelement; this rule is seen by all browsers, even IE. The second rule changes the color of #anyelement's border to blue, but the selector is a little different than the first rule. The second rule's selector is a descendant selector; it's interpreted as: the element with the ID of "anyelement" that is a descendant of the element with the ID of "IEroot" should have the following rules applied. Since #IEroot was created using conditional comments and only IE can see the contents of conditional comments, then in IE, #anyelement is a descendant of #IEroot and the descendant selector matches. Therefore, this rule will apply to IE, making the border of #anyelement blue for all IE browsers, versions 5 through 7. And because #IEroot is the first div and wraps the entire page, it can be used throughout the stylesheet to target rules at IE. This is used just like the star-HTML hack was used, except that you cannot target the body tag with this method because the body element is not and cannot be a descendant of #IEroot. Here is a live demo page. Be sure to view in both IE and non-IE browsers. Using this technique you can target part of a stylesheet at IE with confidence that this method won't be affected by future browser releases.

The Anti-IEroot Rule

Normally the CSS code will be clean, and the #IEroot rules will simply override key rules in the main styles to make IE behave correctly. Some coders will want the option to write a rule that all non-IE browsers will read, but that IE will not. A Child combinator can be used in a certain way: body>#wrapper #anyelement { styles for non-IE only... } Just add a prefix to any selector for a page element (#anyelement) with body>#wrapper. Of course, you will need to have a #wrapper element in the page, or some other major element that is a direct child of the body. The clean HTML should have #wrapper directly inside the body element so that the selector above will work. The Child combinator (>) selects the element on the right only if it is a direct child of the element on the left.

Hiding From IE

IE6 and below won't read the rule, for the simple reason that those browsers don't support the child selector itself. IE7 does support it, but IE7 also happens to think there is an element called #IEroot! For IE7, a selector like body>#IEroot>#wrapper would work, but the selector we described above does not include #IEroot. IE7 thinks #IEroot is in the HTML, so IE7 ignores the rule. Thus all IE/Win versions are blocked from seeing this type of selector.

More on Conditional Comments

Conditional comments allow special syntax constructions for checking the IE version and are proprietary to Internet Explorer for Windows. A conditional comment is an HTML element that, in IE may conditionally be read, but, to all other browsers looks like an HTML comment and is ignored. Here is an example of some markup with conditional comments: <!--[if IE]> <p>Only IE shows this paragraph.</p> <p>A paragraph that all browsers display</p> In the above example, the first block of code has a paragraph of text inside a conditional comment. Internet Explorer has been designed to examine all HTML comments for certain syntaxes, and when it finds such syntax IE will simply read and parse whatever is inside the conditional comment. Because conditional comments are hidden inside syntactically correct HTML comments, all other browsers just see a comment and do not display the paragraph contained within it. The next paragraph is outside the conditional comment and displays normally. If you want to test your conditional comments in different versions of IE, one simple method is to have multiple versions of IE installed as standalones. But there is a problem with standalones: they don't support conditional comments correctly. This article will help you fix conditional comments and many other things in your standalone IE's. If you haven't installed multiple IE's yet, go here to download a fast, easy, and complete multiple IE installer with all the tweaks done for you.

Deeper with Version Numbers

Conditional comments support targeting of specific browser versions, which means divs can be created that will be used in CSS selectors to target not just IE in general, but specific versions of IE. Here is an example of how this might be done: <!--[if gte IE 7]> <div id="ie7andup"> <![endif]--> <!--[if IE 6]> <div id="ie6only"> <![endif]--> <!--[if IE 5.5000]> <div id="ie5-5only"> <![endif]--> <!--[if lt IE 5.5000]> <div id="ie5-01only"> <![endif]--> <div id="anyelement">a box with some content</div> [... more page content ...] <!--[if IE]> </div> <![endif]--> Only one of the four conditional divs will be created in IE, depending on the version of the viewing browser, and none of them will be created in other browsers. Note that only one generic all-IE div end tag is required, so no need to have multiple CC's for this task. The first div, #ie7andup, will be created in IE version 7 and up. The "gte" means "Greater Than or Equal to." The second div, #ie6only, will be created in IE version 6 alone. The third div, #ie5-5only, will be created in IE version 5.5. The fourth div, #ie5-01only, will be created in IE version 5.01. The "lt" means "Less Than." IE4 is not included, since conditional comments were not introduced into IE until version 5. When targeting IE5.5 you must add the zeros to the 5.5 or the browser may ignore the conditional comment. <!--[if lt IE 5.5]> is not good enough, it must be <!--[if lt IE 5.5000]>. There is no good reason for this, that's just how it works. gte IE 7 stands for "greater than or equal to IE7," while lt IE 5.5000 stands for "less than IE5.5." When writing these CC's, exact conformance to the syntax is required. Any error will cause the CC to become a normal HTML comment. The corresponding CSS looks like this: /*** All browsers ***/ #anyelement { border : 2px solid black; } /*** For IE 7 and up ***/ #ie7andup #anyelement { border-color : blue; } /*** For IE 6 ***/ #ie6only #anyelement { border-color : green; } /*** For IE 5.5 ***/ #ie5-5only #anyelement { border-color : purple; } /*** For IE 5.01 ***/ #ie5-01only #anyelement { border-color : red; } See a live demo of the method. You will need multiple versions of IE to view all the variants. Not only is IE styled differently, but different versions of IE are styled differently. For example, this method makes it easy to fix the box model problem in IE 5.x while not affecting IE 6 or 7. Each new #IEroot ID is customized to indicate what IE versions are targeted, in effect "labeling" each special IE rule by version number. This helps when later doing site maintenance, and team environments benefit as well from the reduced potiential for confusion. This Guest Article is authored by Hiroki Chalfant Big John Design Contact Us Š