Saturday 20 March 2010

Website Updates: Latest

During the past month it feels like the updating of my website has taken control of my life! The important bits, like the navbars, are working correctly, although they have yet to be tested in browsers other than Firefox and IE.

I am happy with the Index page, my Pedigree pages work, the Tutorials have been completed, as have the Books and Links pages. Yesterday I commenced work on the Photo Albums. During the past year I have taken a number of photos in England and Europe which need to be added to the collections, so I have have decided to split them, on a fairly arbitrary basis to Northern & Southern England, and Central & Southern Europe.

My existing albums were created in flash using SWF Quicker and one of their templates. I considered writing Dynamic CSS based albums, but after consideration, I decided that I couldn't really improve on the Album which I am using. So apart from changing the contents and the background colour I am sticking with what I have.

After this is completed, the next major task will be to transfer my Ferguson One-Name Site to my main site. On the one-name site are over 2000 names, about two thirds of which are Fergusons from northern England, and the format of the pages is that of Family Groups. It also has quite a different background style, so there is much work to be done here.

At present, the remaining eleven days for completion and testing appears to be a remarkably short space of time, so I can imagine a number of sleepless nights between now and the end of the month!

Thursday 11 March 2010

Genealogy Website: The Nav Bars

 A web page can be considered as being built on layers, the first being the base, or blank page, usually white but it can be given a colour. For my new site I have put another, slightly smaller, background layer on top, followed by the data and images. In my case I consider the nav bars as being a new layer since the drop-downs must sit on top of any data and images. One point about images, IE6, and earlier, do not recognise the ".png" transparency. Google will find many scripts to cure this, one of which is to be found here.

To date, I have used javascript for my drop-down menus, however it is now possible to write these in CSS. Unfortunately, because to do this the latest CSS standard is used there are problems with older browsers, in particular with IE6. The image on the right is a sneak preview of a section of my new index page, and as can be seen the drop-down sits on top.

To make them display on top of images is easy, simply use the "z-index" CSS style. However for other image forms it can be quite tricky. For Flash, within the "Object" tag the line < param name="wmode" value="transparent" > needs to be included. IFrames present a different problem, and to date, despite having tested varying "solutions", I have yet to find a way of stopping the nav bars from going behind the image for IE7 and earlier. Still, I've three weeks left!

Now, the above are the easy problems, again it is IE6 which causes the real head ache, because CSS drop-down menus simply do not work! To the rescue comes Suckerfish and the Sons of Suckerfish, which for my purposes I had to modify even further.

In my first Blog in this series I mentioned that I wished to eliminate/minimise the use of javascript, and for the navigation this has largely been achieved. As you will see to get them to work in the early versions of IE, and I no longer bother writing for IE5.5 and earlier, javascript has been a necessity, this I feel is a fair compromise. If those using IE6 do not have javascript enabled the navigation will not work, but it is still possible for visitors to get round the site albeit with more difficulty. (If you are viewing this using IE6, please upgrade, especially as you can now see our headaches!)

My final point concerns testing, I use Firefox for most of my development work and test in IE8, Opera, Safari, Chrome, Sea Monkey and Bing, these I have on my PC. As I do not have a Mac. I rather hope that if it works with Safari it will be OK (not really satisfactory, but there we go!). So how do I test in earlier versions of IE? A nice free piece of kit called IE Tester enables this to be acheived.; although still in Alpha version, and not every bit works fully, it does do the job, and for me is a life saver.

© Ron Ferguson 2010

Thursday 4 March 2010

Genealogy Website, New, Improved, & How 2

Everything had been going swimmingly with my new site, until I received from Dennis of Ltools a sneak preview of his forthcoming program update. He has made a couple of alterations to this program which changes the Legacy Pedigree web page output into validating CSS.

One of the functions of this program enables your own custom HTML, which Legacy allows you to incorporate into their code, to be exempted from processing by Ltools. I use this twice on a Pedigree page, for the header and footer. The changes which Dennis has made improve the logic behind the program, but in so doing tighten the way way in which we must write our code. I have detailed the couple of restrictions involved in my tutorial.

Naturally, my coding didn't comply, and since I work on the principle of "only as a last resort read the instructions", it took me a while to sort out what was going on! Basically they are that the start and end tags of an HTML section eg. a <DIV> must both be either inside or outside the custom section, and nesting of comments when using Javascript should be avoided.

The race to get my site update completed by the end of March is now definitely on!