the 200ok weblog

This is one for the "if you fix a problem, blog it" files.

I've been having a problem with a particular feature on a page I'm building at the moment. Basically I need to position a small div over the top of an image. The image can then change without needing to edit the content in the div.

To do it, I set the size of the container div then used absolute positioning to place the small div where I wanted it within those boundaries. To get it all to work the container is set to position: relative; and the small div is set to position: absolute; - something which is pretty common.

the problem

Screenshot 1: Desired result (and before scrolling in Opera 9).

Screenshot 2: After scrolling down and back in Opera, content disappears. The exact result varies; with other combinations of positioning the example div may also disappear immediately after the page loads (that is, it renders then disappears).

The problem occurs in Opera 9 on both PC and Mac. To see this in action, check out the example page.

the scenario

The large image and the red example div are enclosed in a container div. Initially, the container div was set to position: relative;; the red example div was set to position: absolute; and the large image had no specific setting.

the fix

To fix the problem in Opera, apply position: relative; to the large image as well. Some more testing is required to be sure, but I think the principle is to make sure there aren't any elements without explicitly handled positioning.

Again, see the example page for the real thing.

Update 2008.08.13: This bug does seem to be fixed in Opera 9.5x. Hurrah! :)

Labels: bug, disappearing content, opera, opera 9, problem

Browser School Daze - Yahoo! News sums it up in an amusing way:

So, it's time for teacher to hand out the grades, and some final words.

Opera 9.0: You're doing fantastic work—it's good to see you back in form. Grade: A+.

Firefox 2.0 Beta 1: You're not working up to your usual level. You're still looking good, but I would like to see you try harder. Grade: B+.

IE 7 Beta 3: Great job. It's good to see you applying yourself, finally. I knew you had it in you. Grade: B.

Labels: browsers, firefox 2, ie 7, opera 9

It's likely that you've already caught this one, but just in case you didn't here's a quick rundown:

• Acid2 and Opera 9 Problems? - The Web Standards Project: We’ve received some reports here at WaSP that Opera 9 is not passing Acid2 under certain unique scenarios. We’d like to hear from you in comments if this is the case.
• Then Opera Watch mentioned it: Some questioning whether Opera 9 passes the Acid2 Test | Opera Watch
• Acid 2 in major browsers discusses the fact that some behaviours being called 'errors' are actually valid results for the test.
• Then people turned closer attention to Acid2: The Guided Tour - The Web Standards Project. Under close scrutiny it turns out that some wording is a little vague, eg. Acid2 assumes that the browser uses a default style sheet with common values ..."common values" is open to interpretation.
• Chaals explains the situation neatly: Acid burns - Out of the way - by Chaals (Charles McCathieNevile): Unfortunately, the people who have made these reports are wrong about us not passing the test. One of the limitations of Acid2 is that it relies on a 'normal' rendering setup. Scrolling, zooming, resizing, setting minimum font size, choosing your own styles for things that are important to you, and various other things, will all break the rendering of the test. It is written that way.

During the debate - make that 'comment wars' - things tended to dissolve into Opera vs. Firefox rather than actually discussing whether Opera 9 passes Acid2. For what it's worth, my opinion based on the Acid2 documentation is that Opera 9 does pass the test. The only remaining doubt is whether one or two lines should be left when you scroll the test. If the Acid2 page is scrolled, the scalp will stay fixed in place, becoming unstuck from the rest of the face, which will scroll. The documentation only discusses one line - that's an omission, not a failure condition.

Frankly, I think the intention of the test was to see if the smiling face would render in the first place. It does for me on all systems I've been able to test. My personal suspicion is that most of the failures are resulting from buggy installations (eg. final release installed over the top of a beta) or the page is zoomed or minimum text size is overriding the test - whether the user realises or not (it's easy to forget). Or possibly some other system glitch - there are lots of variables. If Opera 9 itself failed the test, I would have expected a more consistent result across the user base.

Labels: acid test, acid2, opera, opera 9

So, right now browser preview/beta releases are the new black. IE7b2 is doing the rounds, so I won't bother getting back into that circus. Let's have a look at Opera 9 Technology Preview 2 (on PC, since that's what I use).

what's good

There's a lot of polish going into this version, but I won't bore you with every single little detail which I like. The bigger points:

• I will mention that overall, a huge number of preference/options settings now have more flexibility.
• Add any search to the search dropdown, just by right-clicking it. You can define a search keyword while you're at it. I've since discovered Firefox lets you define your own search keywords, but it's not as easy and you still can't add it to the dropdown without writing an extension.
• opera:config ... the ability to deep link a preference setting is going to make life a lot easier when directing users to a particular setting.
• Tab/window nomenclature now matches other browsers. I'm sure a certain standardista will feel vindicated.
• BitTorrent. The cool kids tell me BitTorrent is a good thing. It wasn't included in previous versions since there were some bugs - gasp, I hear you say... a software company that didn't just slap the new feature in, bugs and all? That's right, they waited until it was good and ready for public consumption. That's a company that cares. Redmond this ain't.
• The ability to change a stack of settings for specific sites. So now you can disable flash but have it automatically re-enabled for those three sites where you actually wanted the flash.
• Content blocking - seems to be something similar to the popular "ad block" in Firefox, which is nice. I'm also thinking of blocking the boring photos posted by specific users in some photography groups...
• Tab thumbnails, making it easier to find that particular tab.
• "Insert personal"... it's form field autocomplete, but in a user-controlled manner. I really like this.

what's bad

Actually not a huge amount to complain about.

• Still doesn't have a "home" button on the toolbar, out of the box. Seriously, what the hell? I really don't like the default toolbar and I always change it immediately. It is my opinion that this one single issue causes the most trouble for potential new users.
• Tab selection order still bugs me, I'm sure a certain standardista would agree. It's that reading-through-the-blogroll thing.
• Some settings still don't have quite enough flexibility for my liking, eg. I'd like to be able to allow the tab bar to extend to a second row but no more.

what's... not sure

• Widgets. People who went nuts for Konfabulator (or whatever it was called) should get a kick out of widgets. Plus, they look the same as all the faux-plastic/glass widgets that I see plastered all over the Mac at work. People love those things. So anyway, I'll have to play with the widgets a bit more to see if they're useful for me.

conclusion

I'm looking forward to the final release. Although, actually the beta has been rock solid on my machine so far anyway.

link crazy

• Opera Labs | Opera 9 Technology Preview 2
• Opera 9 Preview 2 - Anne’s Weblog about Markup & Style
• wg:Opera 9 Preview 2 released
• Opera 9.0 Technology Preview 2 - Arve Bersvendsen - a good walkthrough, with screenshots.
• Content blocking in Opera 9 Technology Preview 2 | Innuendo and out the other

Labels: browsers, opera, opera 9