Technical Information

• Design/Implementation/Testing
• Test pages
• Workarounds - General Implementation
• IE Box Model Workaround
• IE Inset/Outset Borders
• IE Centering Content Horizontally Workaround
• Known Problems
• Why Firefox?

About Creation Of This Website

The main content of this site is a set of small HTML pages. Each page deals with a specific subject, and each page provides many relevant links to other pages on this site. Most pages are designed to fit on a single A4 sheet when printed.

HTML/XHTML Markup - I've tried to ensure that HTML markup is only used for semantically meaningful purposes, and not for purely presentational issues. If your browser allows you to switch off styles (In Firefox: View > Page Style > No Style) the results should still make perfect sense. All pages are UTF-8 encoded.

CSS Presentational Markup - I've also tried to put all purely presentational aspects of the website in a single CSS 2.1 external stylesheet called default.css. (N.B. the extra nonstandard.css stylesheet is part of the workaround for some browser-specific problems)

Javascript - All javascript is in external files, in accordance with the alternative suggested in section 4.8 of the XHTML specification. Details of the files can be found elsewhere on this page.

Flash - Use of flash on this website is limited to a few automated, unobtrusive slideshows.

Notes On The Implementation

The Rollover Logo

No script here! Just a semi-transparent background image on the link and a CSS a:hover rule to reposition the background.

Semi-Transparent Backgrounds

Eric Meyer's Complex Spiral demo provided the inspiration for a fixed background image with translucent panes sliding over it. A workaround was required for IE6 and earlier.

Drop-Down And Pop-Up Menus

The original idea came form Eric Meyer's pure CSS menus, but I admit that I made a bit of a botch job of my implementation! I've since tidied it up using the rule specificity ideas from Peter Nederlof's Whatever:hover page.

Unobtrusive Automatic Slideshows With Fades

Everybody wants some animation on their website nowadays. I've never been keen on it. I think this is a nice compromise. There is only one flash file used on this website, Cyril Godefroy's "slidesimple.swf". The details of the images that make up each slideshow are contained in separate XML files, one per slideshow. I've used it with the SWFObject2.0 javascript dynamic implementation to keep the basic HTML pages clean.

Script Files Used On This Website

Apparently around 10% of users have scripts disabled (intentionally or unintentionally). We have tried to use javascript for non-essential aspects only, and we have tried to provide a <noscript> alternative wherever possible.

Javascript files:

• modifieddate.js - adds the "Modified" date at the bottom of each page. If scripting is disabled it will just say "Modified [javascript required]".
• layermap.js - allows the interactive map to work. If scripting is disabled the interactive map doesn't work.
• layermapiefix.js - IE PNG transparency fix for the interactive map (I can't remember where this one came from) If scripting is disabled the interactive map doesn't work.
• swfobject.js - allows SWF files to be dynamically inserted into the page if the appropriate player is available (from Google Code's "SWFObject2.0" page). If scripting is disabled (or the flash player is no available) a JPG image is displayed. This JPG image is also used if the page is printed.

Microsoft "behaviour" scripts:

• iepngfix.htc - gets transparent PNGs to work in IE6 (from the PNG in Windows IE site).
• csshover.htc - lets the standard CSS rules :hover rules for the drop-down and pop-up menus work in IE6 (from Peter Nederlof's Whatever:hover page)

How Has This Website Been Tested

Firstly, all XHTML/HTML pages have been validated with the W3C Markup Validation Service, and the stylesheet has been validated using the W3C CSS Validation Service. The validation dates are shown at the bottom of each webpage, and in the header of the stylesheet.

With validated files, any problems with the display are now likely to be browser-related.

Secondly the website has been checked using several different browsers. During the initial site development prior to August 2006 the site was checked with several PC-based browsers - Firefox 1.5, Internet Explorer 6.0, Opera 8.51, Mozilla 1.7.12 and Netscape 8.0. A few browser-specific problems were found, mostly with Internet Explorer. Most of these were well-known problems with a variety of solutions available. (See elsewhere on this page for the workarounds I used)

Opera's facilities for disabling images and emulating text browsers were used to check that the site looks reasonable under those conditions.

And if the stylesheets are disabled the site still functions well, although it's appearance is not as intended (e.g. the drop-down menus appear as a long list, followed by the remainder of the page.

It has not been tested with earlier versions of the PC browsers, with an IE/Mac combination, with any other Mac browser (e.g. Safari), or with any other user agent (e.g. WAP phone).

Browser Checks

I've added some test pages for my own use. Don't expect these pages to make any sense at all!

Workarounds - General Implementation

Internet Explorer 6 and earlier cause the biggest cross-browser compatibility problems. Hppily IE7 seems to have resolved most of them.

Since most of the problems are related to IE5, IE5.5 and IE6, the general solution is now to use IE Conditional Comments to provide extra HTML to IE browsers only. Firstly, we give a second stylesheet to any IE browser. This stylesheet contains any non-standard CSS that is required for workarounds.

  <link rel="stylesheet" type="text/css" href="./styles/default.css" />
  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="./styles/nonstandard.css" />
  <![endif]-->

Secondly, an extra <div id="IEn"> is inserted immediately inside the <body>, where the 'n' is the version of IE the page is being viewed with:

<body>
<!-- IE-wrapper start -->
<!--[if gte IE 7]><div id="IE7"><![endif]-->
<!--[if IE 6]><div id="IE6"><![endif]-->
<!--[if IE 5.5000]><div id="IE55"><![endif]-->
<!--[if lt IE 5.5000]><div id="IE5"><![endif]-->
...webpage content goes here...
<!--[if IE]></div><![endif]-->
<!-- IE-wrapper end -->
</body>

This allows IE version-specific rules to be added to our default external stylesheet by simply preceding the rule with #IE5, #IE55 or #IE6 as required. I use this method where a workaround involves presenting alternative, but valid, CSS to IE browsers. Most of the workarounds below use this method. I usually place the rule directly below the corresponding standard rule, although it should work even if placed before the standard rule because of the higher specificity.

IE Centering Content Horizontally Workaround

Setting the left and right margins of a block-level element to auto is the standard way to centre a block-level element horizontally within it's container. It works in everything except IE6 and earlier. Setting "text-align:center;" on the container (in this case the body tag) is the standard workaround, and is used here.

IE Box Model Workaround

Probably the best-known IE problem. Now resolved simply by setting different values for width for the relevant IE versions.

IE Inset/Outset Borders Workaround

In IE the "inset" and "outset" border-style look different from other browsers, so I explicitly coloured each border to look as it was intended

IE Workaround - Drop-Down And Pop-Up Menus

Extra pages (Districts, Islands, Beaches, Caves, Temples, Activities and Others) were added to the site during the initial development because IE couldn't display the drop-down menus properly.

The drop-down menus (based on Eric Meyer's ideas) work cor in all other browsers this website was tested with: When you hover your mouse over a link in the main menu bar, a drop-down menu appears, and if you mouse-over the drop down, further menus may appear. You can click on any link in the menu or any sub-menu.

IE Workaround - Transparent Background Image

Lloyd Dalton's Cross-browser semi-transparent backgrounds provided the necessary workaround to get Internet Explorer displaying it correctly. The whole thing is contained in the background rules for the body, div.pagewrapper, and h1.pagetitle elements in the external stylesheet. The stylesheet even validates if you comment out the two '* html' hacks at the end.

Known Problems

I've tried to make this website suitable for any browsers (see the workarounds above), but inevitably there are some browser-specific problems. These are the ones I'm aware of - if you notice any other problems please let us know (and if you have a solution, even better!).

Opera - No Border On Link Thumbnails

In many places on this site thumbnail pictures are used as links. Most browsers display a border that changes color when you hover your mouse over the picture, making it easy to spot these links. Opera does not appear to do this, making it difficult to distinguish link thumbnails from non-link ones.

IE - No Drop-Down Menus

I've had to add extra pages because Internet Explorer cannot handle the CSS drop-down menus. These extra pages (Districts, Islands, Beaches, Caves, Temples, Activities and Others) simply contain the same links as the first level of sub-menus.

The drop-down menus (based on Eric Meyer's ideas) work like this in all other browsers this website was tested with: When you hover your mouse over a link in the main menu bar, a drop-down menu appears, and if you mouse-over the drop down, further menus may appear. You can click on any link in the menu or any sub-menu.

Background Image Problems

Eric Meyer's Complex Spiral demo provided the inspiration for a fixed background image with translucent panes sliding over it. Lloyd Dalton's Cross-browser semi-transparent backgrounds provided the necessary workaround to get Internet Explorer displaying it correctly. The whole thing is contained in the background rules for the body, div.pagewrapper, and h1.pagetitle elements in the external stylesheet. The stylesheet even validates if you comment out the two '* html' hacks at the end.

Horizontal Stretching Of Containers

Only in IE - this is only noticeable as a thin vertical line of pale green at the right-hand edge of the header, and only appears on some pages. I've tracked this down to 'something' stretching the width of the "mainbody" div in IE - it seems that IE isn't wrapping text correctly, since there always appears to be some text very close to the right hand edge of the stretched "mainbody" div when this fault occurs.

On many pages IE ignores the width I've specified for the "pagewrapper" (IE doesn't support max-width at all so I haven't used that). This seems to occur when the content of the "mainbody" div (contained within the "pagewrapper" div), which itself has "width:100%;" for some reason causes the the "mainbody" to stretch to over 100% of the available width

Trying to simulate this effect in other browsers by putting a very wide fixed-width div within the "mainbody" div simply causes the inner div to 'poke out' the right hand edge. In IE it pushes the right-hand edge of both the "mainbody" and "pagewrapper" divs to the right.

I haven't resolved this one, but IE's lack of support for "max-width", and IE's "haslayout" seem to indicate the direction to investigate...

Why's It Best At 1024x768 With Firefox?

Well, most obviously, that's the setup I've been using as I built the site.

First, the screen resolution. Because this site was originally hosted on Yahoo! Geocities, there used to be a panel down the right-hand side with Yahoo ads. This panel appeared to be about 200 pixels wide. The website content was restricted to an 800 pixel wide <div> tag so that, taking into account the window borders, scroll bar, and bevelled edges of the <div>, it fitted just about perfectly onto a 1024 pixel wide screen without having to collapse the ads each time a new page loads.

Secondly, why Firefox. Well, that's personal preference - try it! But Netscape, Opera, Mozilla work fine as well. In fact there's only one browser that seems to be unable to understand the W3C compliant XHTML 1.0 and CSS, but even Internet Explorer can display the site reasonbly close to the way it's supposed to look and behave.