Opera 10 Gets a Win for Not Giving In

Bookmark This

Chris Missal, December 12, 2008

I'll get frowns, looks of surprise or ruffled brows when I tell people that my site, DumpsterDoggy.com is my own hand-rolled PHP and MySQL blog engine. It's not because it's hard to do, I think the reason I get those types of responses is that because there are so many free, and really excellent tools out there to do this. Tools that would have saved me a lot of time. Well when I started, I wasn't as smart as I am now. :)

I would say that the biggest drawback to this site is the fact that since it is all written by myself, there aren't people out there using, and reporting bugs. I found a bug, and I found it in a really weird way. I finally decided to download Google Chrome as well as Opera 10, which is in preview. The reason for this is that I wanted to do some comparison tests using jQuery and QUnit. What I found was an easily fixable XHTML error. I didn't close a tag when generating <h3> tags on my articles page. Normally, when I make changes, I ensure that they validate against The W3C Markup Validation Service, but this one must have gotten by me. I didn't find this out until I viewed my site in Opera 10. Here are the results:

Firefox 3.0.4 - Looks normal in Firefox. This is around 70% of my traffic, plus my favorite, plus I use the Web Developer toolbar. That's why I design for Firefox.
Chrome 1.0.154.36 - Chrome also looked good. I couldn't see anything visibly wrong with the page.
Internet Explorer 7.0.5730.13 - I should have noticed that this page was a lot more bold than in Firefox. I'll take the blame here since I usually check in Internet Explorer before committing and pushing code changes.
Opera 10.00 alpha - Something is obviously wrong with either the browser or the markup of this page. Notice how the font keeps getting bigger? Well, it was the markup.

My first thoughts after viewing the page in Opera 10 was:

Oh boy! I get to report a bug in the alpha version!!

I opened the source and was quickly put in my place. Here is the markup I saw:

<h3 class="stub">
    <a href="?start-small-jquery-uses-method-chaining">
        Start Small, jQuery uses Method Chaining
    </a>
    
<h4 class="stub">December 11, 2008</h4>
    
<p class="stub">Increase code quality with a decent understanding 
    of jQuery's method chaining. A small step towards fluent interfaces.</p>

<h3 class="stub">
    <a href="?holy-ruby-on-rails-batman">
        Holy Ruby on Rails Batman!
    </a>
    
<h4 class="stub">December 09, 2008</h4>
<p class="stub">I posed a simple question on Twitter about learning 
    Ruby and boy did I get some immediate, awesome help!</p>

<h3 class="stub">
    <a href="?wpf-and-my-new-get-stuff-done-schedule">
        WPF and My New "Get Stuff Done" Schedule
    </a>

<h4 class="stub">December 08, 2008</h4>

As long as you know enough about XHTML to know the usage of the <h3 /> tag, you know well enough that this isn't proper XHTML markup. I found my error, I fixed it:

Screenshot of the file differences

... and here we are.

This isn't a comment on how clumsy I am, this is me giving a big high five to the Opera team on not allow bad markup to go unnoticed. Over the years, browsers have been making so many assumptions about the markup the developers and designers have been feeding them. If it were up to me, pages that don't validate, wouldn't even show up. The browsers could limit the amount of rendering rules to which they need to conform as well as force developers and designers to conform to the rules.

When I started teaching myself HTML when I was in middle school, I remember being so excited when I found out the page looked the same whether or not you closed certain tags. I also remember that I could use attributes without quotes. To me, this was time saving and reduced my file sizes; I was pumped. I now know, and I'm embarrassed by the fact, that this was invalid markup, even though it looked the same in that browser at the time.

I'm assuming when Opera version 10 is finally in release, this saved source page will render as the other browsers do. If I'm right, this will just be yet another crutch to support poor markup. I don't like that.

Filed Under: Browsers PHP Tech Community XHTML