Browser Compatibility Changes

Testing in Apple's new Safari 3 Beta for Windows*, I found some issues with the map. They turned out to be caused by some layout hacks I had in the page code to handle the dynamic layout of the page.

The page is composed of resizing (map) and docked (controls, footer) boxes containing other resizing elements (label controls, search results). Ideally, each element should be sized by the content - i.e. the area taken up by the footer is defined by the size of the elements in the footer, and so on. The page did that using old-school HTML <table> elements, but had some issues I'm still not sure of. (Short version: a relatively sized div set to overflow: scroll, inside a relatively sized table cell makes the cell expand if the content overflows, even if the cell and div size correctly with non-overflowing content.) To overcome the issues I had to have some script that would fix the sizes of some elements when the page size changed. These hacks - often browser specific - worked in IE6, IE7, Firefox 1.5 and Firefox 2.0, Opera 9, and Safari 2. But they caused Safari 3 to stop performing layout correctly - everything looked great, but you couldn't drag the map!

So... not wanting to layer on further hacks I redid the page entirely using modern CSS, and the end results were beautiful. Worked like a charm with IE7, Firefox 1.5 and 2.0, Opera 9 and Safari 2 and 3. Unfortunately, they didn't work in IE6. After much teeth gnashing I found a workaround. (Short version: even in standards compliance mode IE6 can't correctly size elements having top and bottom or left and right defined; however, you can use CSS expressions to compute the width or height.)

(Aside: when CSS was young and fresh, Microsoft took the interpretation of "width includes margins, borders and padding" whereas everyone else took the interpretation of "width excludes margins, borders and padding", and it was the latter which eventually became codified in the CSS standards. You can tell that Microsoft was in the "web developer" mindset rather than the "web designer" mindset. When you are designing for the look of content, you want to frame items (text, images, etc) so the exclusive width makes sense. However, when you are developing a UI, you often compose and nest relatively sized boxes. The CSS notion of "width: 100%" when nesting items is absolutely useless when combined with exclusive margins, padding or border, since the element will end up offset and overlapping its parent's right edge!)

Anyway, the map it all appears to work now... but it's probably broken in some obscure browser. If the map suddenly broke for you (boxes everywhere! oh the huge manatee!) I have the retro version available here: http://www.travellermap.com/index_classic.htm - I'll try to keep it working, but I might break it by accident with future changes to underlying shared components such as styles or code. And please let me know what platform and browser you're using - I might be able to bludgeon the page into shape.

* Safari for Windows is a subtle but effective ploy by Apple to encourage Windows-using web developers who haven't shelled out for a Macintosh to do more testing on their platform. Worked for me!

[Update: January 2008]
Given that the old version works in browsers as old as IE5 and no-one has screamed and complained, the "classic" version of the page is no longer available.
Ω