Crazy Opera and IE Display Quirks

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.

Tags:

Post Meta

10-23-2009
Date
11:06 pm
Time
2024
Views
218
Words
2 Comments
Comments
RSS
Atom
Comment Feeds

Meta Name = Color?

I was looking at the source code of the Twitter Status blog, mainly out of curiosity to see how Tumblr was put together, and the first thing I noticed was this odd block of meta tags at the very top of the header:

        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#fff"/>
        <meta name="color:Title" content="#444"/>
        <meta name="color:Description" content="#777"/>
        <meta name="color:Post Title" content="#6498cc"/>    
        <meta name="color:Text" content="#444"/>
        <meta name="color:Inline Link" content="#6498cc"/>
 
        <meta name="color:Quote" content="#888"/>
        <meta name="color:Quote Border" content="#6498cc"/>
        <meta name="color:Quote Source" content="#555"/>
        <meta name="color:Link Post" content="#c00"/>
        <meta name="color:Conversation Background 1" content="#f4f4f4"/>
        <meta name="color:Conversation Background 2" content="#e8e8e8"/>
        <meta name="color:Conversation Border" content="#bbb"/>
        <meta name="color:Conversation Text" content="#444"/>
        <meta name="color:Date" content="#ccc"/>
 
        <meta name="color:Date Block" content="#6498cc"/>
        <meta name="color:Date Block Text" content="#bbd5f1"/>        
        <!-- END DEFAULT COLORS -->

Can someone tell me what the hell that accomplishes?

Tags:

Post Meta

6-3-2008
Date
1:04 pm
Time
548
Views
52
Words
6 Comments
Comments
RSS
Atom
Comment Feeds

IETester and Javascript Errors

I was playing with IETester, which lets you open Internet Explorer tabs using rendering engines from IE 5.5 up to IE 8 beta 1 for testing compatibility, and noticed for the first time that my blog was throwing a Javascript error only in IE.

Being the pain in the ass IE is, of course the line number it gives isn’t really valid. I looked and looked and couldn’t find the problem. As a last ditch effort, using the IE Developer Toolbar, I hit the menu option to validate the page. Thanks to the W3C Validator, I found that there were some duplicate ID attributes on elements.

After checking out the lines the validator referenced, I found that the Google Analytics plugin for WordPress was improperly tearing apart href attributes for links created by the Footnotes plugin I use, causing it to include long strings of HTML in the onclick attribute for tracking outgoing links1.

Thankfully, the Analytics plugin has an option to turn off outbound link tracking. I’ll miss those stats, but it’s not like I pay all that much attention to them (or care) anyway.

In the end, I don’t really have anything to test with IETester, it was just a fun toy for a few minutes. It also helped me notice a problem I probably wouldn’t have found otherwise, so in the end it was time well spent.

  1. Rather than just the link the user was headed for, as it should – and does for regular links. [↩]

Tags:

Post Meta

Date
9:21 am
Time
412
Views
247
Words
No Comments
Comments
RSS
Atom
Comment Feeds