Absolutely positioned text burns hole through image in Opera

Hi all. I’ve been experimenting with absolutely positioning some H1 text over an image. (I’m doing this instead of using a bg image because I want the image to scale.)

Works fine in all browsers except Opera, where the content area of the text seems to ‘cut a hole’ through the image so that the wrapper background is visible instead. I wonder if this is a known behavior and if there is a remedy for it?

I’ve attached an image, but in lieu of approbation, here’s another version:

And here is a link to the example in question:
http://pageaffairs.com/repo/fluid-elastic-fantastic/6.html
(Of course, you have to view it in Opera to see the problem live.)

Thanks for any suggestions.

Hi Ralph,

Interesting, I’ve just had a look in Opera on XP and it looks fine and dandy.
Version 10.10
Build 1893
Platform Win32
System Windows XP

Mac too:
Version 10.10
Build 6795
Platform Mac OS X
System 10.6.1

No problems here either.

Opera 10.10
Build 4742
Platform Linux
System Fedora 12

Thanks for looking Mark and Tommy. Hmm, I forgot to check the Windows version, but yes, this appears to be a Mac issue only. I’m using 10.10 on both Mac and Windows.

I guess that will make it hard for people to debug, but I guess more people use Opera on a PC than on a Mac, so it minimizes the issue somewhat. :rolleyes:

EDIT: O, I didn’t see that you included Mac details too, Mark. Strange. The only difference I can see is that I’m still using OS 10.5.7.

O well, seems this is not a big issue then. :slight_smile:

is it related to the text-shadow property perhaps?

Good question, but no, removing that makes no difference.

normally about now some microsoft fan would chime in with Bloody Macs! :slight_smile:

I guess for once they’d be right!

I’m more inclined to say Bloody Opera, though, as I find it a temperamental browser. To be honest, I’m glad it’s not more popular. IE6, for all its miseries, at least has conditional comments–the browser equivalent of the “naughty corner”.

I tend to think every browser has it’s quirks - Opera too. I’m glad that Webkit, Gecko, Presto and Trident exist at the same time. It leaves room for innovation and healthy competition. And they are now all on the same page with web standards so quirks aside they are working hard on a standardised base for us to build from.

It must be hard work making a browser… I doubt I could make a simple line of text behave the way the standards dictate.

Fair point. It does often occur to me that it might be quite hard to build a browser that meets the specs. All the same, there is some obligation on browser makes not to lure the population into using an unreliable program… at least as I see it.

Comment out one property at a time (or chunks if you will) until you find the culprit. That way is a slow process…but effective :).

Yeah, I removed every style, one by one, except the abs pos, and still the effect remained. Even changed the H1 to a P, but same deal. Very weird, but at least it’s only happening in a limited situation. Next week I’ll upgrade the OS, and then the promblem might magically go away! (Hrmmm :rolleyes: )

Yeah I don’t see it in mine either.

Nice looking

Opera 10.10
Build 1893
OS Win32
Windows XP

But then again… bloody Macs :smiley:

Thanks Simon. I’m all embarrassed now :blush: (Say, I hope I wasn’t outa line with that crack about… ah, never mind). Anyway, I submitted a report for the heck of it.

We have https://bugs.opera.com/wizard/ instead. :slight_smile:

Looks ok on my brand new 27" imac too :slight_smile:

Opera Version 10.10
Build 6795
Platform Mac OS X
System 10.6.2

Thanks Paul. Seems to be an OS 10.5 problem. Even checked on my old OS 10.4 laptop today and it was working OK in Opera 9.

O wow, Paul goes Mac! Welcome to MacPoint, Paul! The 27 inch is an awesome machine.

Thanks!

I am on OS X 10.5.8 and Opera 10.10 and there’s no burn for me.