CSS Breaking Forms in Opera?

Update: This bug appears to have been fixed in Opera 9.

A number of Mint’s Opera users have reported being unable to login to haveamint.com or successfully send an email using the site’s contact form. Both forms work as intended in all other modern browsers. Opera is usually included in that collection so what’s going on?

Identifying the Problem

I tried logging in with Opera. No luck—but there didn’t appear to be anything out of the ordinary happening. No submission errors. No JavaScript errors. But the submitted values were showing up in the query string of the form’s action url as if I was using the GET method. That’s not right. The login and contact forms both use the POST method to transmit their values. I double-checked the contact form and found the same symptoms.

I downloaded the HTML source of those pages with Opera to confirm that my server was sending the expected HTML. It was. (On OS X Opera’s view source command opens the current page as RichText in TextEdit—not exactly the “source” I was looking for.)

Time to Build a Reduction

I duplicated the contact form and began stripping away JavaScript and CSS includes. Unstyled, the form worked. Alright, so that’s how you’re gonna be. I duplicated base.css, linked it up and deleted half of the rules. The form was unstyled but it worked. I restored the deleted rules and deleted half of that restored code. The form didn’t work any more. I repeated this process of halving my CSS until I narrowed the problem down to a single selector:

    background: transparent url(/images/bg-body-cap-top-right.gif) right top no-repeat;
    margin-bottom: -4px;
    height: 4px;
    display: block;
    content: url(/images/bg-body-cap-top-left.gif);

(This code adds rounded corners to the form without requiring a fixed width or a superfluous containing element.)

I was then able to narrow it down to a single attribute:

form:before { content: url(/images/bg-body-cap-top-left.gif); }

And also found that the form breaks when using a string for a content value:

form:before { content: 'This CSS rule breaks POST forms in Opera'; }

In English

It would appear that using the :before pseudo-selector on a form to apply a content attribute forces the form to use the default GET method in Opera.

I’ve compiled the reduction into a single page and added some PHP and JavaScript to illuminate the issue. The JavaScript reveals the DOM’s take on which method should be used to send the form values. The PHP reveals which method is actually used. In Opera, expectation and reality diverge.

This issue has been confirmed in Opera:

  • 8.5 and 8.52 on OS X
  • 8.51 and 8.53 on Win XP

Curiously, the CSS is applied correctly and the form still works as expected in Opera 6.03 on OS X.

PHP Function Index 2.0
Thank You For Smoking
Shaun Inman
March 25th, 2006 at 9:58 am
008 (Now closed)



Did they say it would be fixed for Opera 9?

Comrade Ghorkov
Mar 25th, 2006 7:46 am

That bug only applies to Opera 8.51 and below. As one of those Opera users, I can’t believe you went through all this for our sake. I’m glad that haveamint.com now works perfectly in Opera. Thank you.

Oliver Zheng
Mar 25th, 2006 8:04 am

I haven’t been able to download Opera 9 to test, Comrade. I just submitted the bug today.

Oliver, as mentioned in the post this bug applies to at least 8.5-8.53 (the latest version I was able to download from opera.com) but does not appear in Opera 6. As for haveamint.com working perfectly in Opera, I haven’t changed anything yet. I’ve only been able to reproduce the bug, not correct it yet.

If the site is working for you could you post your Opera version and OS?

Shaun Inman
Mar 25th, 2006 8:24 am

Ah, I see, Opera 9 is still just a technology preview. Downloading now.

Shaun Inman
Mar 25th, 2006 8:25 am

The bug is fixed in Opera 9.

I wish there had been some mention of 9 being available (if only as a technology preview) somewhere on Opera’s site. I had to search on Google to find the download link as Opera’s own search returned nothing useful.

Anyone know what Opera’s up-to-date to installed user ratio is? This is a pretty crappy bug, Style sheets should not have any impact on form behavior.

Shaun Inman
Mar 25th, 2006 8:36 am

I duplicated base.css, linked it up and deleted half of the rules.

You know, that’s the first thing I do when I hit a browser bug I can’t pin down - start cutting the styles in half. Doesn’t matter which half, just start narrowing down the potential culprits by halves until I’ve got it down to one or two lines.

Glad I’m a web designer and not a surgeon. “Does it hurt now? how about now?”

Wilson Miner
Mar 25th, 2006 11:24 am

Good question on the installed base… I’d wager ~1% (I guess it depends on the site). At least in the more progressive browsers, such as Opera, the users are quicker to adopt new versions since they’re more dedicated to their browser of choice than the “average IE user.”

Mar 27th, 2006 7:50 am

I’ve used the technology preview for a few days but had to revert to version 8.51 because Gmail didn’t work correctly - quite annoying. As a result, I have to fire up Firefox to login into Mint.

Mar 27th, 2006 10:51 pm