When I first encountered Cascaded Style Sheets during the previous design of the DOS Amigos Homepage, I considered them quite useful for the definition of text- and table layout. It turned out, however, that CSS could help a lot more, specifically with the centralized definition of the web page layout.
The previous version of the DOS Amigos Homepage was based on nested tables. A major drawback of this setup is, that all content is wrapped in (and more or less hidden by) table cells. This makes upgrade and maintenance a tedious and error-prone job. Additionally I was dissatisfied with the website navigation. I wanted faster access to the main sections of the site, preferably with a top menu. Further I wanted to improve the navigation inside large documents, using a side menu rather than an in-document table of contents with links.
So I had a perfect reason for a major web site upgrade!
I started to play for some time with database controlled websites with a content management system like Joomla and Drupal. Well, that turned out to be a bridge too far for me. I am a guy who wants to understand the things I make and all these virtual database things were hard to follow. I could not see where my content was going to and all the metadata to be entered drove me nuts. For small documents, the amount of metadata exceeds the actual content size.
Some of the system requirements of a content management system are the webserver (Apache-like) and the MySQL and PHP support. Unfortunately my humble @home webspace did not offer these facilities. If I wanted to use this technology, I would have to move to another hosting provider, with dire consequences for anyone in the world who made a bookmark to the DOS Amigos Homepage.
Designing your own layout in Joomla or Drupal is quite tricky. There are lots of ready-made templates around, but an extensive search did not yield a layout which I liked for the web site. Designing on your own, however, requires an extensive knowledge of the content management system mechanisms, quite interesting, but it would take too long before I would know enough about it: I was aiming for a short-term remake of the site.
Databases appeared delicate things: After a few corrupted MySQL databases (I have not the faintest idea why that happenend, but one thing is certain, you have to pick up the pieces and start all over again) I decided to stop this development.
CSS looked better to me: a table-less layout with DIVs would make it more simple to trace the content in the progress of upgrade and maintenance. The work involved to convert my old web site to content managemenent or CSS based technology was comparable, but the less stringent system requirements and the fact that I could better keep track of things shifted the balance in favour of CSS.
That is why I studied the possibilities of CSS for some time and designed my first layout in small steps. The Firefox browser with built-in web developer extensions appeared to be a reliable companion. A bit too reliable perhaps... The result was a nice layout and some insight in the operation of the parameters of the CSS commands.
A golden tip from many a webguru is: Test your website with every browser (version) you are expecting your audience to use. This appeared an absolute must for evaluation of the CSS support. Specifically Internet Explorer versions have quirks which completely destroy your beautiful layout. That is why I downloaded Internet Explorer versions 5.5 and up, installed them and used them for a layout check.
Fortunately Internet Explorer supports a simple browser version detection, using a detection command in a comment line. You can use these detection commands to call a so called "conditional CSS rule set" for every relevant Internet Explorer version.
I made the CSS adaptations using the ill-famous "trial and error method", adjusting the parameters of the CSS commands until the web page looked more or less the same for all browser versions and reacted the same way on mouse clicks. Most of the changes were successful, although some quirks are left.
- On behalf of Internet Explorer 6 I had to define a small footer in order to prevent display of the last characters of the content under the bottom of the page. This is the small blue bar at the bottom.
- Internet Explorer 5.5 displays a small empty column at the right side of the content. Further increasing the content width messes up the layout completely. So this bug will remain as is..
- For Internet Explorer 6 and below, the mouse-over effect does not work on table cells. That is a pity, the visual tellback "where am I?" is quite practical for the selection of an item from a table. Maybe I will find a workaround later. Well, I did not, I switched it off all together.
Again it is apparent: "If a (CSS) standard can be overruled by reality, it surely will be". There is hope for the future nevertheless, the CSS support of Internet Explorer 7 for this site is perfect. Until the next technology leap I guess.
I found out about another quirk: the ill-famous character set trouble. Apostrophes, characters with accents and quotes sometimes convert into a set of rubbish characters. There was no straight way to prevent this but to try to avoid them. Maybe later something nice will show up! Ehh... Hope so.
Well, just a last thing to make things worse, I almost forgot the Biggest Browser Quirk: the pop-up blocker, built-in or in friendly cooperation with a firewall program.
If you use a plugin to play the MP3 music, in many cases the web browser will block the MP3 player because it considers it a suspicious pop-up. I cannot change this, I guess. The only solution is enabling the pop-up in order to play the music. In many cases once will be sufficient, provided you choose the option to permit the "suspect" content for the DOS Amigos Homepage.
Lately I discovered another browser quirk, particularly for the Chrome browser. This browser appears to ignore the autostart=false attribute of the embed command that is used to play the mp3 files on the page. Consequence is, that Chrome starts playing anyway. Particularly on pages with multiple mp3s, like the ones of my Microphone adventures this leads to an unpleasant cacophony of all pieces playing together. I am sorry, there appears no solution for this. So if you want to view the pages with multiple media players on them, pleses use Firefox!