Someone checking out my last entry about CDN performance helpfully let me know that my site was displaying horribly in Opera. I’d checked in Firefox, Safari, and Chrome and hadn’t noticed a problem and just assumed I was pretty safe in other browsers since I wasn’t doing anything especially amazing.
A few minutes with Browser Shots later and I found out that it was broken in at least Opera 10 (8 and 9 seemed to work fine, oddly) and IE – all versions, including 8. I confirmed the IE8 problems in a virtual machine (compatibility view didn’t help) and dug in with the Opera developer tool Dragonfly.
Curiously, Dragonfly’s DOM view only showed the first div in the HTML that contained the header. It took a few minutes of head scratching before I started toggling options and idly hit the button to expand the HTML tree… Suddenly everything was there. I ran the W3C Validator again, just to be sure it wasn’t my imagination, and it checked out fine.
It didn’t take long backtracking up the tree to find out where I’d gone “wrong”:
<button />
Apparently Opera 10 and IE wanted the full closing tag:
<button></button>
I’m not surprised IE choked on the short tag, but I’m really disappointed in Opera… I’ve never been happy using it, but I always respected their rendering engine.
I’ve only ever seen tr, hr, and br closed like that anyway.
It does remind me of a gradient image problem I’m having in Opera with one of my sites though.
To be honest I’ve never closed a button that way before either. This button had no contents (the image was inserted as a background using CSS), so there didn’t seem any point in putting in the full tag… It validated fine, so I was perplexed.
Of course now I’m curious why you would ever want to close a tr tag like that… seems like that would really defeat the point.
Of course now I’m curious why you would ever want to close a tr tag like that… seems like that would really defeat the point.
+1