I haven't looked at Opera for a while, I got sick of its bugs, but I decided to take a look at Opera 8, the fresh new release:

The test
I didn't write this because I knew Opera would fail it, I wrote it because it is a potential new layout I'm working on, by the way.
Here's the code:

needless to say, this works exactly as intended in Firefox/Mozilla. Notice that this is a very simple layout, nothing complex, no deep nested elements. So what you see is the bugs, and, true to form, Opera didn't let me down.

In case you aren't using Firefox, and are curious what it's supposed to look like, there should be a yellow container div, with a green div fixed with margin of -50px, 100px wide.

In Firefox, what you think you'll get is what you get, the green div stays in place, it's 50px to the left of the edge of its container.

Opera I can't get any idea of what it's trying to do. It has an extra margin on the fixed div, so while the div is fixed within a margin:auto container, it's sitting in the middle of it.

I tried this workaround:

Same issues, any margin to the left of the container div is added to the position:fixed div left margin, then the other margin data is added to that.

Conclusion
Once again, Opera sucks. Will it always suck? It's hard to say. I had some hopes here, but of course the only browser that will display this the way it's written is a Gecko engine based one, Firefox 1.0.4 in this case.

Notice I don't bother mentioning MSIE. One day they may have an advanced browser, but I'm not holding my breath.

The thing here that really annoys me is that this kind of layout has immense practical applications, it's a centered page of fixed content area width with a fixed nav bar. Exactly what you want to happen, that is in many cases. This isn't some weird voice thing that Opera trumpets as their next new 'advance', this is plain old CSS, the stuff that Hakon Lie always is so proud about being a founding father of [he drafted much of the current CSS specs, and also is a founding Opera software person].

This round's CSS scores
Points Opera: 5 for getting the position fixed to work with margin:auto container.
0 for messed up position:fixed margins.
Total: 5
Sorry, you lose.

Points Firefox: 10, perfect, it all works.

Extra credit points, for effort, MSIE 5.5: 4. Layout works, it correctly ignores the position fixed that it doesn't support, it has the negative margin, the layout would work in MSIE 5.5 with no major hacks, but of course has no margin:auto support or or position:fixed support, but a good try, more useable than Opera's half baked attempt, either make the stuff work the way it's supposed to, or let it degrade gracefully, which IE 5.5 does. In terms of functionality I'd actually give IE 5.5 higher marks than Opera 8 here, since the layout would work for users just fine, minus the fixed option..

Added re Opera Bug
I figured it out, Opera is taking the width of margin-left:auto and making that the margin of the fixed div, relative to its container, then it applies any margins given the fixed div after that. Very weak, once again, why do people like this browser? Answer, they don't use real css.
Back to top