Preparing your CSS for Internet Explorer 7

Tags

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: