Preparing your CSS for Internet Explorer 7

by Trenton Moss on 1 September 2006

Later on this year Microsoft will officially release Internet Explorer 7. If you can't wait until then, you can download a beta version and see how it works. Microsoft has hinted that when IE7 is officially released they'll be looking to quickly upgrade users from IE6, so it's essential that your website is prepared for this new browser.

You can also grab a screenshot of your website on Internet Explorer 7 using a service such as Browsercam. Although this will only provide you with static screenshots, it'll save you having to download IE7 and will mean you can keep using IE6 on your computer.

When looking at your website in Internet Explorer 7, you may notice a few things look different or even that the layout is totally broken. This will almost certainly be due to a number of changes that have been made in IE7 from its predecessor, IE6.

Internet Explorer 7 will understand the child selector

Historically, one of the easiest ways of hiding CSS rules from Internet Explorer is to use the child selector. To date, Internet Explorer hasn't understood the child selector so will totally ignore any CSS rule that uses it. Internet Explorer 7 will however understand the child selector.

The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

If you wanted to send a different width value to IE than to other browsers, you could have used the following:

#foo {width: 400px;}
html>body #foo {width: 300px;}

Historically, the first CSS rule would have been just for IE and the second for every other browser. Now, the first CSS rule is for IE6 and previous versions and the second for IE7 and non-IE browsers.

Internet Explorer 7 won't understand the star html hack

The star html hack worked in the opposite way to the child selector, in that any CSS commands that use this hack are only seen by Internet Explorer. So, to send commands only to Internet Explorer (including IE on the Mac), you can use:

* html #foo {width: 400px;}

The * essentially means a wildcard (i.e. it refers to any and every element). The above rule will apply to any element assigned id="foo" that's nested within the <html> tag (which of course it will be), which is itself nested inside any other HTML element.

Huh? Surely the <html> tag can't be nested inside another tag!? Well, no of course not... but Internet Explorer 6 and before disagree and will actually obey the above command. Internet Explorer 7 will however (correctly) ignore the above command, along with all other non-IE browsers.

XML prolog won't force quirks mode

There are currently two ways of declaring the ISO value in HTML files. One of them is to place the XML prolog on to the very top line of each HTML file, directly before the doctype declaration. Declaring it this way means that the first three lines of each HTML file might look like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

(The first line is the XML prolog; the second and third lines are the doctype declaration.)

By not having the doctype declaration on line 1, Internet Explorer 6 reverts to quirks mode (despite the fact that the above HTML code is perfectly valid).

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x


Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)