Browser Compatibility Issues

Last week, we ran into a problem with a form not working.  The problem was that it wasn’t completely not working. If that was the case we would have noticed it right away and found a solution. The problem was the form would work on Firefox, Chrome and Opera, but not work on IE (Internet Explorer).  We tested it in several versions of IE six, seven and eight – all with the same problem.  The problem is when a submit button is an image in IE, it doesn’t pass the variable as a single scalar like those other browsers. Instead it passes the variable as a structure with X and Y coordinate values underneath it where the user clicked within the button image.  For example, the submit button below would send one value in FireFox form.submit and in IE it would send form.submit.x and form.submit.y in a Coldfusion page  The form wasn’t working in this particular instance because the way the page was checking to see if the page was submitted.  What it was doing was checking if form.submit was defined to do the proper error checking and email generation.  So instead I modified the form to check to see if form.submit was defined or form.submit.x was defined.  There are many other techniques to get around this problem like putting a hidden value within the form and then checking to see if that exists or testing within the server-side scripting if the request method is equal to POST.  The problem shows the importance of cross browser/platform testing,  something we should all do.  I can’t remember how many times something works perfectly in Firefox and then someone tells me it’s doing something weird in IE.  Sometimes it works the other way around, but I would say the breakdown is 90/10.

<input src=”submit.png” mce_src=”submit.png” id=”Img1″ onmouseover=”MM_swapImage(‘Img1′,”,’submit-O.png’,1)” onmouseout=”MM_swapImgRestore()” name=”submit” value=”Submit” type=”image”>

<cfif isdefined(“form.submit”) or isdefined(“form.submit.x”)>