Browsers

For several years I have struggled to make all the pages on this site display as I would like in different browsers. This has meant coding and maintaining more than one version of several pages, a task which makes updates a nightmare!
I have at last given up the unequal struggle and made the following decisions:

• I would make my site comply as far as possible with the W3C HTML 4.0 standard for HTML and the CSS2 standard for style sheets;
• I would try to make sure that pages display properly on Netscape 4.0 and better, and MSIE 4.0 and better;
• I would try to ensure that legacy browsers, i.e. Netscape 3 etc., at least display text and pictures, although some formatting is lost.
• I would not use deprecated tags such as <font> and <center>.
• I would reluctantly admit the browsers which do not support JavaScript (e.g. Mosaic) cannot access my site.

The problem is that all browsers have bugs when it comes to Cascading Style Sheets (CSS), not least of which is Microsoft's very own Internet Exlorer!
So what do I do? It's easy to build a site which displays perfectly with MSIE, which accounts for 90% of visitors, but users are increasingly turning to browsers such as Firefox and Opera which have far fewer security loop-holes.
So my final decision was to use Firefox as a benchmark. It is widely held to provide the most standard implementation of CSS and is the most popular alternative to MSIE. Then, having a site which adhers as closely as possible to W3C standards, I can tweak it to function satisfactorily with other browsers.
The ones i have available to me at the moment are:

• Mozilla v1.1
  • No problems found with display.
  • The back button is rather unpredictable; if I go to the Picture Map, then to Eskdale, then load a picture, and then press Back, I go back to my Home Page. Not good, and very annoying. I've put a Return button on most pages, which will get you back to where I think you should be.
  • It is very slow at interpreting JavaScript.
• Firefox 1.0.4
  • No problems, except some websites which refuse to let you in because you're not using MSIE. Tough! I shan't be back!
  • Much faster than Mozilla at interpreting JavaScript.
• MSIE v5.5
  • No real problems as long as one steers clear of the features provided by its non-standard implementation.
  • MSIE is the only browser to align the psuedo-element :first-letter as I would like; whether this is a quirk of MSIE or a fault of other browsers, I don't know, but I've stopped using it.
  • MSIE is the only browser to implement Microsoft's Dynamic HTML model, which I have previously used to adjust font-sizes, etc. to suit screen resolutions. I am now using the Document Object Model (DOM) which is a W3C standard and which is supported by all modern browsers including MSIE v5.5, Netscape 7.0 (and I believe 6.1).
• Netscape v4.7 and Netscape v7.0
  • Netscape, along with other standards-compliant browsers, does not display the <span> tag as an in-line container if it has a width attribute; instead <span> is treated as a block container - i.e. a line break is forced after it. Attempting to force in-line positioning with display:inline results in the second <span> being positioned on top the first. This is the correct implementation and MSIE is demonstrating a quirk. CSS2 says an in-line element shouldn't have a width attribute. The recommended way to get round this is to give the <span> tag a style of display:inline-block. This works with Opera but not Mozilla or NS7. I have therefore had to ignore the W3C recommendation that the<table> element is used only for displaying columns of data and not for page layout.
• Opera v7.5
  • Opera pretends to be MSIE, although it isn't, which can cause problems. (Actually it can pretend to be lots of things!);
  • Apart from that, it appears to offer a fairly standard implementation of CSS and DOM.
  • The most difficult thing was to get Opera to centre tables without screwing other browsers. For those of you how are interested the following works with all the browsers I've tested:
    <style>
.center { text-align:center }
.center table {margin-left:auto; margin-right:auto }
</style>
.
.
<body>
<div class="center">
<table>
.
.
</table>
</div>


Screen Resolution

When I first started this site, screen sizes of 640x480 were still common, 800x600 was a luxury, and 1024x768 was unheard of for home users.
Since then, 1024x768 has become the norm for home PCs, and many people use even higher resolutions.
I have therefore ensured that my site is useable with 800x600, but optimised it for 1024x768 and better. To do this, I try to work out the best font size for your screen resolution, and dynamically adjust to it when the top page is loaded. On pages with lots of text, e.g. my diary pages, I give you the opportunity to change the font size yourself.
Most of my pictures are sized at about 600 pixels wide, to ensure no horizontal scrolling with lower screen resolutions, and also to save room on the server. Now that I have changed ISP, I have much more webspace available, and so I've set about re-scanning my pictures and sizing them at 800 pixels, which fits perfectly with a 1024 screen resolution.

I'm sorry if your browser is experiencing problems, but there is really no excuse these days for not using freely available up-to-date software which complies with the above standards - and it doesn't have to come from Microsoft!!
If you're experiencing severe problems, please me and I'll investigate.