Internet Explorer - wasting production time worldwide
Posted in : Techno Babble
Internet Explorer - wasting production time worldwide
Most people who know me will know my view of any/every version of Internet Explorer, hell most of them hold the same views. In fact, I'd imagine that pretty much every serious web developer out there would probably hold the same views. Internet Explorer is crap, and reminds us daily. Not only can it not understand the most basic HTML or CSS, but it usually can't even understand itself.
Today it hit a new level. I've been coding up a plugin for use on a clients site and, to improve the workflow, we decided to do some fancy shit with javascript seeing as the environment already required javascript to function. After a fair amount of thinking and tinkering I dived in and started coding away in a busy looking manner. After a fair amount of coding, quite a bit of which was spent beating my head against the wall with explorer and coding round it's *quirks* ... but that was expected .... I finally got the code behind the scenes done and started working on the GUI .... I wish I hadn't!
After finding some annoying little quirks ... like don't try leading/trailing whitespace in element title attributes ... ohhh and don't try and make it think to much whilst it's still trying to work out what HTML is .... I hit a deal killer. Internet Explorer couldn't add a radio button ( that worked ) via the DOM ...... a simple bloody radio button! .... if you want to try it yourself, copy paste the following code into notepad, save it as ie_is_crap.html and call it up in IE
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-UK"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
<title>Screen demo</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
// create an element | |
function amCreateElement( elementType, elementAttributes ) | |
{ | |
// create an element of the required type | |
var theElement = document.createElement( elementType ); | |
| |
if( elementAttributes ) | |
{ // we have attributes for this element | |
var allAttributes = elementAttributes.split( '" ' ); | |
var numAttributes = allAttributes.length; | |
for( i = 0; i < numAttributes; i++ ) | |
{ // step though all elements | |
attributeName = allAttributes[i].slice( 0,allAttributes[i].indexOf( '=' ) ); | |
attributeValue = allAttributes[i].slice( attributeName.length + 2 ); | |
// the last attibute will still have trailing " | |
if( attributeValue.charAt( attributeValue.length - 1) == '"' ) attributeValue = attributeValue.slice( 0, -1 ); | |
// check for onclick et al | |
if( attributeName.slice( 0, 2 ) == 'on' ) | |
{// bugger now we need to play with explorer | |
if ( window.attachEvent ) | |
eval('theElement.attachEvent( attributeName, function(x){ '+attributeValue+' } );' )// IE | |
else | |
theElement.setAttribute( attributeName, attributeValue ); | |
} | |
else | |
{ // rest of attributes | |
if( attributeName == 'class' ) | |
{ // yet another piece of explorer crap | |
theElement.className = attributeValue; | |
} | |
else | |
{ // note : in iE everything else but style will work | |
theElement.setAttribute( attributeName, attributeValue, 0 ); | |
} | |
} | |
} | |
} | |
// return the element we just built | |
return theElement; | |
} | |
| |
theInput = amCreateElement( 'input', 'name="test" type="radio"' ); | |
document.body.appendChild( theInput ); | |
| |
| |
theInput = amCreateElement( 'input', 'name="test" type="radio"' ); | |
document.body.appendChild( theInput ); | |
| |
| |
</script> | |
</body> | |
</html> |
Inferior Experience brought to you by Microsoft
Great huh? I won't begin to tell you how many hours I spent narrowing it down to just that. So, this problem leaves us royally screwed, if I can't solve it then we have to revert back to a crap work flow and undo 3 days worth of my time ..... I am not a happy bunny ....... as a last resort I hit google, and for once I was impressed, it's first result leads to this post ( Problem with RADIO (created by DOM) in Internet Explorer ) on a forum, and more importantly, the answer 
.......... notice the date of the post, July 2005.
Basically it comes down to the fact that IE wouldn't allow you to add a name attribute to an element created through the DOM, because nobody would ever want to create a form object huh? The bit that really pisses me off is that their new *flagship* and *compatible* browser IE7 is just as fucked up, so web developers world wide will still have to waste hours overcoming IE's various quirks and failures ......... I dread to think of the number of hours a day that amounts to.
Thanks to the answer given by Martin Honnen, and the microdoft page that he linked to, I managed to get radio buttons working ..... hooray only 4 bloody hours wasted huh Mr Grates 
for any of you that are interested, just add the snippet below into the code you saved from above and rerun the page
Code:
if( window.attachEvent && elementAttributes && elementAttributes.indexOf( 'type="radio"' ) > -1 ) | |
{ // you REALLY have to hate IE :| | |
return document.createElement('<input '+elementAttributes+'></input>' ); | |
} |
A problem shared and all that
As you can imagine, with not being a happy bunny, I had to share my problem with Scott ...... the conversation went a tad like this :
tuxnus: it's ie6 ... it's high time to start penalizing them
yabba_hh: how the fuck do you penalise someone who's using IE6 ? they're ALREADY fucked
tuxnus: make it obvious to them
tuxnus: most haven't a clue
yabba_hh: if they haven't noticed just from using ie then even a big red banner with flashing gif saying "Yer browsers fucked" wouldn't work
tuxnus: trouble is, most have nothing to compare it to
tuxnus: they think what they see, is what everyone sees
yabba_hh: there's probably a fair amount of truth in that
So ...... for all you IE users out that there that haven't a clue what we're on about, go install an alternative browser like Firefox or Opera ( google them huh ), and then go wander around the web and see what it *really* looks like. Not only will you have a better experience, and be safer because you're not using a browser that has more security flaws than MI5's headquarters, you'll also be helping web developers world wide save production time by not having to code out IE's ineptitudes.
Anyway, it's time I went and finished the GUI
¥
Trackback URL (right click and copy shortcut/link location)
Trackback url for this post
Note : This trackback url is time limited so use it within 30 minutes or the SpamHound will snarl at you.
http://waffleson.co.uk/z/?k=368421726331032386e42bf6e95a39a0ca01cf43edf623663
Reply to comment 14458 by Lurker