How to fix the sup and sub tags to work in Opera and other Opera annoyances

While fixing the CSS to make Popcorn Maker look the same in all browsers, I hit a particularly nasty bug where Opera wasn’t positioning the title of the page properly. For whatever reason, Opera was rendering the superscripted text differently than in Chrome and Firefox.

This is what it looked like:

Opera y u so silly?
Chrome left, Opera right

Although the text was absolutely placed, the <sup> tag in Opera was pushing “Butter” lower than it should have, ignoring the styling I had for it.

With some Google foo and the guidance of Kate Hudson, I managed to fix the problem:


This past  week has been spent trying to fix Opera-specific bugs and it’s been driving me nuts. Sometimes the fixes are fairly simple to do, usually involving some Opera-specific tags. Other times I’ll run into completely unsupported features in the latest stable version of Opera and need to rely on the still buggy beta version. Opera 11 doesn’t support some of the fancier animations we use, so I’ve had to rely on Opera 12 (currently in beta) to test those. Unfortunately, while the animations do work in Opera 12, albeit slowly, other bugs have been introduced that weren’t present in the stable version. Then there are some weird JavaScript quirks that exist only in Opera that are proving to be extremely difficult to track down. Right now there’s an issue with communication between a parent window and an <iframe>. I’ve spent the past couple days with Dave trying to find the cause of this but we’ve been completely stumped. We found a hack to fix it temporarily but that won’t do for final code that will be staged.


Leave a Reply

Your email address will not be published. Required fields are marked *