A couple of years back, when working for a small design firm, I put together a little website for a new restaurant in Leicester, called Mobius.

I was quite proud of it at the time, except for the glaring bug. It makes use of the Suckerfish menu system. Due to a (still unfixed) bug in Gecko-based browsers (including Firefox), if the menu intersects with an element which has a style of overflow:auto;, it’ll disappear as soon as you mouse-over that element.

At the time this really annoyed me. I posted on various web-forums asking if anybody had come across the same problem and if so, how they went about fixing it. It soon became clear that it was a bug in the browser, and there wasn’t a lot I could do about it. In the end, I gave up and left it. At the time, Firefox was very much a niche browser, not one who had been downloaded by 80 million users and was coasting comfortably past the 10% market share point. Alas, the site still suffers from the problem, just as it always did.

Out of the blue

Now, I was quite surprised when out of the blue, two years later, someone calling themselves “Event Horizon” emailed me out of the blue with a potential fix for the problem. “Perhaps you could apply this fix on the Mobius site you worked on.” they said. “Not likely” I replied, “I don’t work there anymore, but thanks nonetheless”.

The very next day, I was ever so slightly taken aback once more, when I took a phonecall from Mark Sanders at Chorlton Web & Design. “Two years ago” he said, “you had some problems with overflow in Firefox”. “Indeed I did” said I, “and in a very odd turn of events, I got an email about the fix last night”. “Bloody Hell!” exclaimed he. Very bizarre.

Anyway, I figured that if two people were going to contact me about the problem in the same week, there’s quite a demand for this knowledge. So I thought I’d share the story and the link to the solution. I hope it’s useful to someone.

A friend of mine wants to get into this whole web-building thang — but doesn’t really know where to start. He asked me for some help, and I replied with something along these lines…

What do you think the best way to do things is? I’m guessing HTML as the basic groundwork — then onto XHTML and CSS, with Flash & JavaScript for the movey bits. then maybe onto XML and PHP?

I could write a whole book on this, but I’ll try to keep it relatviely brief for now. I’d do it like this:

First things first: Download and install Mozilla Firefox. Its generally a much better web-browser than Internet Explorer, and follows the standards much more closely, which makes it a much better browser to work with during development.

Now that you’ve got a decent browser, you should start by learning your basic XHTML. Don’t worry at all about how the thing looks at this point – its all about document structure, and using the right tag for the job. A few examples would be:

Use <div> tags to divide a document up into logical divisions, such as <div id="header">, <div id="navigation">, <div id="content"> and <div id="footer">.

Use <hx> tags for all of your headings, e.g. <h1>Level 1 Heading</h1>, <h2>Sub Heading</h2>, <h3>Sub-sub heading</h3>, all the way down to <h6>.

Pick up a magazine, or a diary. Look how they are set out and try to match up the XHTML tag with the content. <h1-6> for headings, <p> for paragraphs, <strong> and/or <em> to strengthen or emphasise text, <table> and its siblings for tabular data (and not for page layout).

Make sure that your code validates – upload it to http://validator.w3.org/ to check it out. Only then can you blame the browser if it gets things wrong.

I know that this bit isn’t in the least bit exciting, but its very important that you get this bit right. Do it properly and you’ve gone a long way towards getting accessibility issues and search engine friendliness sorted right from the word go. In this day and age, those are very important features in any website.

Once you’ve got a grounding with XHTML, you can start on your CSS. Start basic and get more complex as you get the hang of it. Make sure your code is correct over at the CSS Validator: http://jigsaw.w3.org/css-validator/

One of the best places to start out with CSS is Mako4CSS. Some of the information is out of date and refers to Netscape Navigator 4 – you can safely ignore that these days. Once you’ve got the hang of the basics, take a look at places like CSS-Discuss and the Sitepoint forums. If you want to see just what’s possible with CSS, take a look at the CSS Zen Garden.

Try not to curse Internet Explorer for getting it horribly wrong. Its really not a very good browser anymore, but millions of people still use it. A good place for finding ways of working around its flaws is Position is Everything.

Once you’ve got this groundwork down, you might like to start experimenting with a bit of ECMAScript (its what they call JavaScript these days), Flash or PHP.

The important thing here is that you shouldn’t rely on client-side techniques (i.e. browser scripting and plug-ins) for critical site functionality. If the user has it switched off, or the plug-in isn’t installed, or they’re simply using an older browser, your site should degrade gracefully.

For instance, if you display some critical information using Flash, you should fall back to an alternative method (plain text is probably fine) for users who don’t have it installed.

Another example would be form validation – its helpful to have a ECMAScript alert telling you that the email field is compulsory for instance, but this should be backed up on the server side (for isntance with a PHP script), in case the user has disabled ECMAScript.

As for books, I’ve never used any, but I’m told the following ones are good:

• Elizabeth Castro: Creating Web Pages with HTML: Visual QuickProject Guide
• Zeldman: Designing with Web Standards
• Dan Cederholm: Web Standards Solutions
• Eric Meyer on CSS

I hope thats helpful, and let me know if you’ve got any further questions on any of it.

Cheers,
 
 
 
Olly.

Just a quickie to tell you that I’ve upgraded the gallery to SPG Version 1.1.

I’ve made it work in all of the browsers I’ve got here (Firefox1.0, Opera7.5, IE5.0, IE5.5, IE6.0, all on Windows XP SP2). If you’ve got something different, could you have a look and let me know if its OK please?

Its not perfect in Internet Explorer 5.x but it’ll have to do for now. It was bloody hard work making IE5.0 work at all! I had to jump through all manner of hoops to work around the bugs in that one, but I think we got there in the end.

Cameron Moll wants to see what everybody’s working on again, so he’s asking them to post a portion of a screengrab of it. Here’s mine:

If you’re suffering from a creative block, or even if you’re not, this (along with its predecessor) is a great source of inspiration. There’s such a huge array of colours, typefaces, layouts and so on that you’re bound to come up with some fantastic ideas.

Either that or your brain will overload, you’ll go blank, your eyes will turn to mush and you’ll fall even further behind shedule. Sorry about that. Go and have a game of Lemmings to see if that sorts you out.

After a fair bit of faffing about, I’ve implemented Clagnut‘s Onload image fades without Flash script over in The Gallery. You’ll know it when you see it.

Please feel free to look at it in all of your fancy-pants browsers and let me know if it works properly — I’ve only got IE/Windows and Firefox here. Oh, and I’m well aware of the issues the site has in IE5/Windows at the moment. One of these days I’ll get around to fixing it…

And now I may have mended it!

The fadey stuff that is. Its no longer broken for Opera users! Hoorah! Of course, the site still looks horrendous in IE5.x. Maybe tomorrow…

And now I may have mended it even better!

In an unprecendented sequence of site testing and bug fixing, I seem to have made just about all of thinkdrastic.net work in IE5.5 and 6 for Windows, Mozilla Firefox 1.0 and Opera 7.54!

Of course, IE5.0 is doing some crazy wierdo stuff with the gallery, but it does seem to actually work for the most part, which is the main thing. I’ve had a quick look and can’t see whats wrong. I figure that its your fault if you’re still using IE5.0. Not only does it mess up perfectly good CSS, its a secutiry risk to your PC. Go and get something better!

It took me a while, but I found one. A simple PHP based gallery system, that uses XHMTL and CSS for the layout.

If only I’d googled “Simple PHP Gallery” in the first place I might well have found it at my first attempt. Because its called just that – and it comes from relativelyabsolute.

The only pictures in there at the moment are some from a trip to Bringewood in July of last year, that I was using to test it all out. I guess I’d better get a new digital camera to fill it out a bit then. Canon Powershot A85 anybody? Update: Its entirely possible that I’ve just ordered that very camera…

Right, non geeky readers can stop reading right about now and go look at the pictures…

The Geeky Bit: Implementing SPG

Still with me? Good.

Installing SPG is dead simple. Download the .zip file, extract it, and then upload that to a folder on your website. As the system is so very very simple, its dead easy to customise it to fit in with your site aswell. Just alter sp_index.php and sp_styles.css to suit.

The hardest part came about because I’m using a fixed width template on this site. Left to do as they pleased, images that were wider than the site quite simply broke it. So I decided to set a max-width on the images, then let the user click on them if they wanted to see them full size. Easy enough, or so you’d think. Just set the max-width in the CSS file and alter sp_index.php to put a link around the image. No problem.

That is to say, no problem until we come to test it in Internet Explorer. IE doesn’t actually support max-width does it? JavaScript to the rescue then.

With a bit of help from the peeps on the SitePoint forums, I knocked up a simple little script especially for IE, that figures out if the image is too big and scales it appropriately. You can find it in the head portion of the gallery pages.

This site appears to use a fairly simple layout doesn’t it? Thats because it does. Its basically one column, and its got a little grey sidebar floated over there.

So why is it proving to be such a [string of expletives] to get it to work properly in Internet Explorer 6? Huh? Its because there’s a little grey sidebar floated over there.

Incredibly, it works better in the veritable old IE5.5 than it does in its big brother.

Apart from the fact that Internet Explorer is incredibly insecure and prone to being hacked, its layout engine (the bit that draws stuff on the screen) is fundamentally flawed. Start floating things around the screen and it gets all confused and things begin to go horribly horribly wrong.

Why is it still like this? Mainly because it laid stagnant for several years (when it had no real competition), and then when Microsoft did get around to working on it again, they’ve been too busy patching up all of the enourmous security holes to worry about how it carries out its primary function: drawing pages on the screen. I’m not bitter.

Ever so sorry. I need to have one of these rants about it every once in a while. You know, my life would be a lot easier if you lot would use Firefox or another decent browser. Get to it right away or I’ll set the h@xx0r5 on your system.

Update: I made it work!!!

It meant completely rethinking the site layout, but I made it work in IE. I had to use absolute positioning and lose the spangly footer in the end. Bah humbug.