There’s a song on Sesame Street, which I watch several times a week with my son, that goes something like this:
One of these things is not like the others
One of these things just doesn’t belong
Can you tell with thing is not like the others
By the time I finish this song?
I was reminded of this when I realized that an administrative function I added to Shimmie wasn’t working properly in Opera or Internet Explorer. I still use Firefox as my primary browser both at work and at home, so while this administrative widget was under development I used Firefox for testing and debugging purposes. The HTML involved was simple, with no CSS vagaries or complicated manipulations of the box model, so it shouldn’t have been necessary to rigorously pore through the myriad browser options.
How naive of me.
The purpose of this block of code is to provide an administrator with a means of specifying a “safety” rating for a particular tag. Unfortunately, different browsers render this code differently, resulting in aberrant behavior.
Firefox 2.0.0.1:
<form action="metablock.php?block=admin&action=ratetag&image_id=7521" method="post"> <table border="0"><tbody><tr> <td width="40"> <input style="width: 30px;" size="4" name="rating" value="-1" type="text"> <input name="tag" value="monkey" type="hidden"> <input name="image_id" value="7521" type="hidden"> </td><td width="110">monkey<br> </td><td> <input src="icons/tag_blue_edit.png" title="rate" alt="rate" value="Rate" type="image"> </td></tr></tbody></table></form>
The moving parts here are pretty straightforward. It’s a single text input, two hidden inputs, and an image input (which doubles as a submit input) nested inside a table, nested inside a form. Nothing fancy. In Firefox it works like a charm, allowing an administrator to adjust tag safety scores any which way.
No such luck in Opera, in which the source code looks like this:
Opera 9.0.2:
<form action="metablock.php?block=admin&action=ratetag&image_id=7521" method="POST"> <table border="0"><tr> <td width="40px"> <input style="width:30px" type="text" size="4" name="rating" value="-1" <input type="hidden" name="tag" value="monkey" /> <input type="hidden" name="image_id" value="7521" /> </td><td width="110px"> monkey<br /> </td><td> <input type="image" src="icons/tag_blue_edit.png" title="rate" alt="rate" value="Rate" /> </td></tr></table></form>
Nor in Internet Explorer, in which the source code looks like this:
Internet Explorer 7.0:
<form action="metablock.php?block=admin&action=ratetag&image_id=7521" method="POST"> <table border="0"><tr> <td width="40px"> <input style="width:30px" type="text" size="4" name="rating" value="-1" <input type="hidden" name="tag" value="monkey" /> <input type="hidden" name="image_id" value="7521" /> </td><td width="110px">monkey<br /> </td><td> <input type="image" src="icons/tag_blue_edit.png" title="rate" alt="rate" value="Rate" /> </td></tr></table></form>
Odd, Opera and Internet Explorer have very different ideas about what they’re supposed to be parsing than Firefox does. Has somebody been re-writing my code behind my back? Yes, Firefox has. In the past, attempts by this browser to “fix” my code has resulted in poor behavior in Firefox itself. In this case, it caused me to fail to spot a glaring flaw in my code. Specifically, I had forgotten to close an input tag, silently hobbling my creation.
This would have been easy to spot during development if Firefox had faithfully rendered my broken code. I wouldn’t have been misled into thinking I had any chops as a programmer, which I don’t. Additionally, Firefox’s willingness to do things like change capitalization (e.g. “POST” became “post” in the method attribute), rearrange attribute orders on each of my input tags, and remove my diligent efforts to assure that all tags were closed in keeping with the XHMTL standard all helped obfuscate the key change made to the code: it added a ‘>’ where my PHP had not specified one. This took far more effort to unravel than it should have.
I am, once more, compelled to shake my fist at the heavens.