Optimizing a page for all browsers

You could notice that not everyone optimizes his website for all web browsers, as CSS properties are used which don't cause problems in any browser. However, it can happen that a browser has presentational and usage problems. It is recommended to check the representation of a website in various browsers. Today, important web browsers are Firefox, Internet Explorer, Opera, Safari and Google Chrome (You'll probably have the most problems with IE). Usually, Firefox, Safari, Google Chrome and Opera will have a cleanest display of your website. (Today, there is the advantage that most people use one of the latest versions of these browsers, because they warn you clearly if there's an update).

MultipleIE - view the website in all versions of Internet Explorer

Regarding the actuality of the software Internet Explorer makes an exception: some surfers still use the version 6, although most are now switched to at least the 7 version. One will see that the Internet Explorer 7 is compared to its predecessor nevertheless a significant advance. But as the market share of Internet Explorer 6 is not so small, you further have to consider it (unfortunately) in the design of the website. Here we want to say briefly that when version 10 of the Internet Explorer is finally released, you is no longer really have to consider the IE6. Until then, some fine-tuning is not bad.

Unfortunately, Microsoft does not have an official way to install and use many versions of the Internet Explorer at the same time. The newer version will automatically overwrite the older one. But there is a program, MultipleIE that allows us to use older versions of the Internet Explorer with newer ones at the same time.

One finds MultipleIE as a download at http://tredosoft.com/Multiple_IE. There you can download the latest version for free. During the installation you will be asked, among other things also which versions of the Internet Explorer have to be installed. Here the versions 6 + are enough.

CSS hacks - exclude other browsers in the stylesheet

The disadvantage of the Internet Explorer 6 is that it supports CSS not correctly. This is also an advantage because you can make such information in CSS that is not supported by the Internet Explorer 6, and provides a help to optimize for it.

Kind-Selektor-Hack

The child selector > that formats only items that have to occur directly after the parent element is not supported in Internet Explorer 6. So you can for example format a normal element for all browsers, including Internet Explorer 6, and then set with the child selector an other formatting for more modern browsers.

Star-HTML-Hack

It also works the other way: there are selectors that are ignored by all browsers except Internet Explorer 6. One example is the star-html hack. Here, * html is written before the "normal" selector. This hack makes an a peculiarity of the Internet Explorer exploit, thus allowing the universal selector * before HTML.

Tan-Hack

The star-html hack you can now polish by the Tan Hack. So you can format for the Internet Explorer less than or greater than the sixth version. You "escape" just a letter in the property with a \. Thus, color simply will be c\olor. Only the sixth and newer versions of Internet Explorer understand this spelling.

Conditional Comments

A practical version of the browser optimization are conditional comments . With conditional comments parts of a web page only can be displayed in a selected version of the Internet Explorer. This method is therefore well used to to integrate other style sheets that contain specific corrections. The basic structure of conditional comments is similar to HTML comments:

With this function, it is therefore even very easy to link a special Internet Explorer style sheet with the file:

Conditional Comments for different browser versions

At the moment it is so that there is almost no representation error, all versions of Internet Explorer have in common. So one has to to formulate the condition that you determine in the first square brackets more precisely. There are seven standard operators:

• gt (greater than)
• lt (less than)
• gte (greater than or equal to)
• lte (less than or equal to)
• ! (Not)
• & (and)
• | (or)

You can also specify the version of the browser after IE (eg IE 7). So you can select all versions of Internet Explorer, less than or equal to 7 and greater than 4 with if lte IE7 & gt IE4 . Examples: