Web Site "Optimisation"

Seen today on a web site that shall remain nameless:

This web site has been optimized for use with Microsoft® Internet Explorer 4.7 and above. Get your free browser update today.

I had to double-check my calendar to make sure I hadn't accidentally walked into a Tardis and been sent back to the last millennium.

SVG and HTML5 Support in IE9

The Register has an article today about the next version of Microsoft Internet Explorer, IE9. You can already download a preview and apparently it looks nice and has support for SVG and HTML5. At last! I hear you say, only 2 years after the rest of the pack. The reason why I find this very exciting is because of SVG rather than HTML5. This is the type of technology that could be very useful in all sorts of areas where Flash is used today, as demonstrated by Microsoft's business charts and map examples.

So what can you do with SVG that you can't do with Flash? In a nutshell, here is my short list:

• You can style SVG using CSS, the same as HTML so if you want to change the look and feel of your site, you can do text and graphics in one go;
• It is a W3C standard so anybody can provide an implementation and you are not tied to a particular company;
• It is a dialect of XML so anybody with a text editor can create SVG data;
• As a dialect of XML, every tool that manipulates XML and HTML, including web based languages like PHP can manipulate SVG so it is extremely easy to generate on the fly and integrate into a web page;
• You can use AJAX technologies with it the same way you do with HTML.

I'm sure there are others but that's all I can think of at 1:30am. Generally speaking, the huge advantage of SVG is that it can re-use the complete HTML tool chain, which offers a huge variety of tools both open source and commercial.

Peekaboo Nightmare, PIE to the Rescue

I've been working on the web site of a charity during my spare time for the past few months. Last night, I finally got round to uploading a prototype of a few of the revamped pages. Today I got an email from them saying in essence that they liked the prototype but there were a few quirks. The penny dropped immediately: I had been developing the prototype on my Mac and testing with Firefox, they were looking at it with IE on Windows. So I fired up IE on my work laptop and, lo and behold: my prototype was complete rubbish!

Having assessed the extent of the damage, I wrote back saying I'd work on it but if they downloaded Firefox they could see what it was meant to look like.

So when I got home, I started work on making it presentable in IE. It all took quite a lot of effort and swearing but I got there eventually. So here is what it took:

• The first problem was with clearing floats: IE doesn't like it when the clearing element is empty. Luckily, Position is Everything came to the rescue with this handy article on clearing.
• Then it appears that, IE on Windows has another spec violation that causes all boxes to expand and enclose all content, regardless of any stated dimensions that may be smaller, which is incidentally one of the features the above article on clearing relies on. So, if I wanted to hide my clearing elements, not only did I need to set their height to zero but their font-size too. Maybe the best way will be to properly implement the self-clearing method explained in that same article.
• And of course, with all those floats all over the place, I had to come across the peekaboo bug! Luckily, a few strategically placed width properties sorted it but only after a healthy bit of swearing.

Moral of the story: if you ever come across IE bugs and want to keep sane while resolving them, head for PIE before attempting any modification of your code. I used to know this, I just got reminded tonight.