Sunday, July 17, 2005

Internet Explorer

Getting this working on good browsers such as FireFox is good fun and very satisfactory. Internet Explorer is a whole different ball-game but the problems can be resolved.

The most significant issue is with IE’s lack of support for ‘position: fixed’. This can only be resolved by using ‘position: absolute’ instead. Basically we need to add an artificial ‘body’ element to the page and set the normal HTML body element to have its overflowing content to be hidden. In other words Internet Explorer is happy to think of ‘absolute’ as ‘fixed’ but only in respect of the containing block (as long as it is NOT the body). Further information on this can be found on Eric Bednarz’s ‘TagSoup’ site.

furthermore...

The 'fix' for the 'position: fixed' problem can only be resolved if the browser is set in 'quirks' mode. Internet Explorer adopts this backwards looking behavior if anything is placed before the DOCTYPE declaration. A comment would do, but since modern browsers are pleased to recieve an XML encoding method as their first line, I have applied this:

<?xml version="1.0" encoding="utf-8"?>

Delivering specific style rules to Internet Explorer can be achieved more than one way:

• Using a separate external stylesheet
• Internet Explorer does not recognise this syntax: @import url(css/noniewin.css) screen;

• Conditional comments
• Specific HTML can be delivered to Internet Explorer using conditional comments. Here is an example:
• <!--[if lt IE 5.500]>
  <link rel='stylesheet' type='text/css' media='screen' href='/includes/ie50.css}' />
  <![endif]-->
• This stylsheet will only be delivered to Internet Explorer below version 5.5
• child selector hack: IE doesn't understand the 'html>body' selector so ignores this:
• html>body div#something { like this); }
• star html selector bug: IE is the only browser that understands the '* html' selector */
• * html div#something { like this); }

In developing a strategy for using any of these methods I had to consider the following issues:

1. The bugs in Internet Explorer for Windows through version 5 to 6 are different and;
2. Internet Explorer on Mac also has its own bugs
3. Proprietry behaviours and CSS are avialble for Internet Explorer

The solution

1. First create a stylesheet that will be used by good browsers and test for quality
• Netscape 7, Mozilla / FireFox, Safari
2. Add rules to this stylesheet that will resolve the position problems with Internet Explorer Windows versions to version 6.
• Deliver with the star html selector hack. Test on IE version 5.5. and 6
3. Remove these hacks where they are NOT appropriate for IE MAC
• Use the commented backslash (\*/) hack to hide from IE MAC
4. Create a separate stylesheet that solves some problems for IE browser version 5
• Deliver this through a conditional comment in the HTML (proprietry Microsoft)
5. Deliver a special HTC file (see below) for Internet Explorer Windows through another conditional comment.

Vertical Scrollbars

The vertical scrollbar in Internet Explorer appears within the browser window. That is, it will be offset from the right edge of the window. To make this appear more in sympathy with the 'border' colours, I use some proprietry Microsoft CSS. You might frown upon this, however, this seems justified to me.

Notes:

The HTC file is to take advantage of proprietry Microsoft CSS features to resolve the hover problems with the navigation menus. You can read about it at Peter Nederlof's site. I have used this now on 2 sites and I am very impressed. I have tried to get this working on a web site where the server software is NOT Apache and this has not succeeded. I have also tried Dean Edwards IE7 and this does indeed solve all problems with Internet Explorer in one sweep, however, I have found it to be very slow at loading and what is shown to the user while the CSS is interegated is not acceptable to me.