Switch styles: Normal || Basic || Pink || XP
Four Original Examples
Click on the example you wish to view. They will open in the same window.
Example One - Using Microsoft Fronpage - Layout done with Tables
Example Two - Using Macromedia DreamWeaver - Layout done with Layers
Example Three - Using Macromdedia DreamWeaver - Layout done with Tables
Example Four - Handwritten - Layout done with CSS
after a little messing around...
Here are the same three examples from DreamWeaver and Frontpage that I have tidied up a little to try and get them to validate correctly
Example One-B - Using Frontpage and a little cleaning up
Example Two-B - Using DreamWeaver (Layers) and a little cleaning up
Example Three-B - Using DreamWeaver (Tables) and a little cleaning up
View a list of things I noticed, and a couple of recommendations.
Windows Browser Screenshots
Please note: Some of these may now look slightly different due to the fact that in Examples 1-B, 2-B and 3-B I had to remove extra code to make the pages validate.
This unfortunately has affected some of the colours in the layouts. Specifically the table border colours. Not to worry. If it was correct the first time round, I wouldn't have had to remove that extra code.
Example 01:
FireFox | Internet Explorer
Example 02:
FireFox | Internet Explorer
Example 03:
FireFox | Internet Explorer
Example 04:
FireFox | Internet Explorer
Example 04: Hovering:
Link Hovering | Menu link Hovering
Example 1B:
FireFox | Internet Explorer
Example 2B:
FireFox | Internet Explorer
Example 3B:
FireFox | Internet Explorer
Differences between FireFox and IE for the main site design:
FireFox | Internet Explorer
Linux Browser Screenshots
There are other browsers out there. I have tested my pages some of them; there are others that don't work properly as well as IE. Each of them does their own thing.
I haven't included screens for Linux versions of FireFox and Netscape 7.2 as they all appear to display the pages for the main site in the same way.
The only difference I can see being that system fonts in Linux are different to that in Windows, so I have only included screens from the following browsers:
Mozilla standard broswer, Konqueror, Epiphany, Opera and Lynx (A console based text-only browser)
Example 01:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 02:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 03:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 04:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 1B:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 2B:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Example 3B:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Main web standards site screens:
Mozilla | Konqueror |
Epiphany | Opera |
Lynx
Ammendments...
Example 4: Changes needed
The new Example Page: Example 4 with changes applied.
The difference it made: Konqueror
Stylesheet tryouts
i tinkered with several styles here, all of which you can use with the "Switch Styles:"
Please understand that only the main stylesheet was completely tested in as many browsers as I could possibly test it in within the time I had.
The BASIC stylesheet is almost perfected, the pink one works great in FireFox but not IE (Due to IE's lack of PNG support), and XP style is a first attempt at something that complex so forgive the 'All over the shop effect' on some of the pages using this style.