Blog

I like to be spoiled, but not too much

Written by Metal Toad Staff | Sep 25, 2009 12:00:00 AM
Filed under:
First of all, let me preface this post by saying: I love web standards, I love browsers that support web standards, I love most internet browsers except for Internet Explorer (maybe I'll make an exception for IE8). Now that I have gotten those out of the way, I have to say that to a certain extent, I can see how Internet Explorer helps me in becoming a better standard compliant HTML coder.

Here are a couple case studies:

  1. A client wanted to have a paypal donate button to live on the sidebar. I requested for the paypal's cut-n-paste code from the client and was promptly responded to. I plugged in the code into the paypal donate box and voila!, works like a charm, but only in Firefox and Safari.

    During my IE (6, 7, 8) QA phase, the paypal icon did not show up anywhere. I used the IE Web Developer toolbar, messed around with the CSS, and spent quite a lot of time trying to debug it. I mean, seriously, everything looks great on Firefox and Safari. It's gotta be something wrong with IE, right? Right? Wrong. I decided to take a look at the paypal's cut-n-paste code and here's what it looked like: 

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_donations" /><inputtype="hidden" name="business" value="test@test.org" /><input type="hidden" name="lc" value="US" /><input type="hidden" name="item_name" value="test" /><input type="hidden" name="currency_code" value="USD" /><input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest"<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form>


    Thanks to Firefox and Safari, that looks rather harmless, but au contraire, it's harmful. If you look closely, you will see a missing closing <input /> tag that most people would've missed. I, for one, did. 

    &lt;input type="hidden" name="bn" <strong>value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest"&lt;input type="image"</strong> src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /&gt;&lt;img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /&gt;


    Add the closing tag and the donate button showed up on IE.


  2. This came from the QA department when going through a client's site on IE 7 in particular, although I can almost guarantee that this behavior also existed on IE 6 and 8. Take a look at these screenshots:

    On Firefox:

    On IE 7:

    You can probably take a guess as to why the font looks a lot bigger on IE 7 than it does on Firefox. Yup, whoever did the content entry forgot to close the <h2> tag that wraps "Current Issue".

    Close the tag and smooth sailing.


From the examples above, you can argue that Firefox and Safari are better and you are so grateful that they "forgive" you for the mistakes made with HTML tags. In my case, they closed the input and h2 tags for me, but I beg to differ.

I prefer to be told when something is wrong or missing. I want to fix mistakes myself and learn from them and not count on the browsers for a fix.

So yea, thank you Internet Explorer for not spoiling me too much.
View full post