So, I’m creating a layout that looks something like this:

It’s a fairly simple three-column layout. The thing is, I’ve used some funky negative margin trickery to swap the first and second columns (so that the HTML is displayed in the correct order for non-CSS user agents).

Unfortunately, IE6 renders this:

…except in some hard-to-reproduce circumstances when it gets it right.

It turned out to be a combination of bugs, which made it ever so slightly difficult to track down. First up was The IE Doubled Float-Margin Bug. Adding display: inline; to the CSS for the floated columns appeared to just make the problem worse, but was in fact needed to correct the issue.

Once that was in place, the page was only correctly rendered once I’d moused over certain links. It took me quite some time to figure out what was going on: IE was incorrectly calculating the funky margins: Instead of basing them on the width of the floated column’s parent element, it was working them out from the body element. I figured that out because the rendering was slightly different dependent on the width of the window.

The solution was to wrap yet another element around the outside, and set the width there too.

I’ve created a simple test-case that explains the solution for the anybody else that runs into the issue.

I’ve been evaluating some content-management systems recently. We’ve got a few requirements that rule out a lot of them straight off: It’s got to be a .net system, be able to run over SSL and be very secure, have decent versioning, document management, audit trails and so on. There aren’t many products out there quite fit our needs.

We’re currently working with one (I’m not going to name names here) which has a document management component that looks something like this:

It’s a simple tree-view that works very similarly to Windows Explorer. Believe it or not, to build that simple box they’ve used twelve nested tables, a div, a span, endless inline styles, javascript: URIs and even a made-up HTML attribute (view the full horror). Even if you don’t know HTML, you can see that it’s overkill. Apart from one on the outer-most element, it’s lacking any useful IDs or class-names for me to hook into with my style-sheet.

I know I’m a mark-up purist, but really that’s just taking the piss. Accessibility? Search-engine friendliness? Page load-time optimisation? Nope, never heard of them. It’s alright though, it does AJAX.

It’s no wonder that so many corporate web-sites have appalling mark-up when this is the state of the default output from the “enterprise level” CMS products that drive them. If web standards and best practise are going to go truly mainstream, we’re going to have to reach out to the developers of these products and nudge them in the right direction.

I’ll leave you with this exerpt from Bruce Lawson & Patrick Lauke’s talk at the multipack’s Geek in the Park event:

Legal & General… made their site accessible because they were worried about the legal risk.

And they found as side effects: 30% increase in natural search engine traffic, a significant improvement in Google rankings for all their target keywords, a 75% reduction in time for pages to load, accessible to mobile devices, their time to manage content reduced from an average of five days to half a day per job, they saved £200,000 a year on site maintenance, they got a 95% increase in visitors getting a life insurance quote (which was the purpose of that site), a 90% increase in sales online, and 100% return on investment in 12 months. And that was the side effects of making the site accessible.

Microsoft aren’t the only ones releasing a new browser this week.

Mozilla have stepped up and released Firefox 2, the latest version of their browser. A built-in spell-checker and protection against fraudulent & malicious web-sites are amongst the new features.

If you already use Firefox, the built-in update system should let you know about the download shortly (if it hasn’t already). If you aren’t you really ought to give it a go — Grab a copy from getfirefox.com.

Say good bye to the summer, autumn’s here with a vengeance.

Myself and Weon had a fairly typical autumnal ride. We encountered everything from blazing sunshine to torrential rains with howling winds chucked in for good measure. The leaves carpeting the ground made navigating some of the unfamiliar trails an interesting exercise in guesswork. They were all still on the trees the last time I was there. Still, we didn’t get lost at all.

We blasted down dry hard-packed single-track and ploughed through axle-deep bogs. We sheltered from the weather in a forest and ate cake, fruit and chocolate. We wheel-span up slick wet grass hillsides and picked our way down rocky technical descents that had us shouting expletives as the bikes misbehaved beneath us. We kept riding until we were both completely and utterly exhausted.

It added up to about 30 mainly off-road miles all in all. I feel a bit broken now, but with that satisifed “I did good stuff today” feeling. Rocking.

I really should have cleaned the bike when I got back.

Just a quickie to note that Microsoft have released Internet Explorer 7 for Windows XP. Get it while it’s hot!

This will be pushed out via Windows Update in the next few weeks, though it’ll be a non-crititcal as a high-priority update for now. IE7 will not install without asking first. More information on the IE Blog.

[Thanks to Andrew Disley for the tip-off]

Matt’s not the only one who’s had their credit card used fraudulently recently.

I had a phone-call from Barclaycard this morning to inform me that my card had been used for some bizarre transactions over the past few days and ask if it was me. I’ve not used it for ages, so it came as something of a surprise.

They started out by buying a bus ticket over the internet. When that went through, they tried for a few big purchases. Big red lights flashed and klaxons sounded at the Barclaycard Fraud Investigation Department bunker (I guess because I rarely use the card) and thankfully, they declined most of it.

They’ve cancelled the card and are sending me some forms to fill in. It’s a good job they phoned me, or I probably wouldn’t have noticed until the next statement came through in about a month’s time.

So keep an eye on your card statements. You never know who else might be buying things on your behalf…

I’m a bit late to the party here, but what the hell.

Inspired by Phu, Anton and Matthew, I’ve turned this site ever so subtly Pink for October (you might need to hit refresh), in support of National Breast Cancer Awareness Month.

Mmm, garish.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

I didn’t understand it at first. I just couldn’t see the point. I wasn’t thinking outside the box. It took a kick up the backside from Jeremy Keith and co to figure it out.

You see, most web-sites contain some form of useful data: Contact information, reviews, events and so on. Sometimes, it’s not even obviously structured data. Take my “About the author” snippet for example:

Olly Hodgson is a Web Designer dude from Cheltenham, England.

It tells you who I am, what I do, where I’m from and includes a link where you can find out more about me. There’s almost enough for a business card.

The thing is, no two coders will mark-up their contact information, reviews and events in quite the same way, so it’s not exactly simple to extract it and use it elsewhere. Microformats aim to change that.

Here comes the science bit

Let’s take a closer look at that snippet:

<p class="vcard">
<a href="https://thinkdrastic.net/about/" class="fn url">Olly Hodgson</a> is a <span class="title">Web Designer</span> dude from <span class="adr"><span class="locality">Cheltenham</span>, <span class="country-name">England</span></span>.
</p>

You see those class-names wrapped around the important bits of data? That’s the hCard microformat in action. Basically, it’s an HTML version of vCard, which is the industry-standard electronic business card format. In there we’ve got a name (class=”fn”), a web address (class=”url”), a job-title (class=”title”) and so on.

Run this page through Technorati’s hCard to vCard converter and hey presto! A vCard you can open in your address book software.

The real beauty is that you don’t have to change the look-and-feel of your web-site in the slightest. Just add the magical class-names to your existing mark-up and you’re done.

So what’s next?

Microformats are obviously still in their infancy, but their potential is endless. Where hCard opens up contact information, hCalendar does the same for events. hReview has the potential to completely shake up the way products are rated in the online shopping world. XOXO could enable a web-browser to offer an outline-view of your site similar to the one offered in Microsoft Word. The list goes on and on.

What’s more, while microformats offer a standardised way of extracting data from HTML, they don’t in any way lock you into writing it in a specific way. Your HTML code can look how you want it to really, as long as it includes those magical class attributes.

Go on, get out there and implement them. You know you want to.