Skip to content

A new CSS Opera bug?

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

I don’t know if its a thing to get excited about; or even if this is something that people have know about for years and years and I had just missed. But a recent redesign of the LSBU wesbite brought to my attention a rather bizarre and rather catastrophic CSS rendering bug in the Opera browsers when it encouters the :target pseudo-class.

Now let it not be said that I rush things and do a slap=dash job; I generally test that all my work works in all mainstream browsers dating back to IE5 but on this one occasion as all I was changing were colour definitions I did think I could get away with a quick check in just Firefox and IE6 (slap wrists there!). So the redesign went ahead successfully, quickly (ah the joy of full CSS) and I went to the pub :>

The broken LSBU homepage in OperaA few weeks after the design I received a message from a user who found my email address from the site someplace complaining about not being able to read any of the links or headings in there Beta version of Opera (version 9). I not going to lie here I expected this to be someone getting confused or even someone who had set a user style sheet which of cause would override our styles so I got my version of Opera up to check things out and fell off my chair. Every link and heading background were taking thier initial value and not taking on the style definitions provided to them further down the style sheet using desedant selectors such as #mainNav ul li a { color: #fff; } and I was rather worried; could the way in which I had sorted the style sheet actually have broken things?!?!?!?!

After finding nothing on the message boards I starting feeling that maybe I was rather out of my depth here – how could I have found nothing that hadn’t been found before??!?! I left it a while (maybe longer than I should as I got another complaint from the same guy about a month later….) and had another think about things. The Opera CSS rendering was cleary seeing something it didn’t like in the colour definitions I was using so breaking out of the style and not applying it – as would happen if a hack was in there it didn’t understand. I started deleting lines of the definition (this had three lines of different elements to style) and after removing the last line I noticed that hooray the problem was solved!

This got me looking what was included in the line h2:target, h2.sftarget, h3:target, h3.sftarget { color: #FFF; } to provide some sucker-fish style heading highlighting when using skip links on page. Knowing that it wouldn’t have a problem with the sftarget class I knew I had found my villian so I removed that line into its own style definition so Opera would at least style all the links and headings correctly.

Thank goodness I solved that one – if anyone else has had this problem I certainly haven’t seen them talking about it!

No comments yet

Comments are closed.