Explorer Update

24th July 2005

I got round to adding a stylesheet that doesn’t fail completely in Internet Explorer. While I was at it I also fixed up the fancy (pointless) Find as you type functionality on my search box so that now should work in IE too. Ooh AJAX how very modern.

Unfortunately due to a lack of support for alpha transparency with PNG’s and a dim-witted CSS parser Internet Explorer didn’t work too well with my original layout. However now instead of plain unstyled markup there is now a new look simple stylesheet. Using this stylesheet, together with some JavaScript to compensate for the lack of support for CSS selectors IE pretty much manages to keep up with the more competent browsers.

Note to self: float is a reserved word in JavaScript. In Internet Explorer to change the CSS float property of an element using JavaScript you need to use something like,

element.style.styleFloat = 'left';

Users with a browser that can display both stylesheets can now choose which style they’d like to use. Please try to contain your excitment.

Fixing the search was pretty much a case of adding the code to create an Internet Explorer flavour XMLHttpRequest object and using the right method to hook up the event handlers — attachEvent for IE, addEventListener for the others. However in the process I did encounter one interesting(ish) oddity. When creating a checkbox dynamically using document.createElement if you want to set the checked property in Internet Explorer this has to be done after the element has been appended to the document. So (assuming someform is a reference to an element in the document) using,

var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
cb.setAttribute('name', 'bleh');
cb.setAttribute('checked', 'checked');
// cb.checked = true would do the same
someform.appendChild(cb);

adds the checkbox to the form but doesn’t correctly set the checked property, whereas if you use,

var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
cb.setAttribute('name', 'bleh');
someform.appendChild(cb);
cb.setAttribute('checked', 'checked');

everything works as expected.

The last thing I attempted to fix was the script I wrote for quotes. Essentially you highlight a section of text in the page and press the C key to insert the text (with appropriate markup) into your comment. The nice part was that based on the target element when the key was pressed it could work out if the quote was from an existing comment and automatically add that information too. Unfortunately so far I can only make IE report the srcElement (it’s equivalent to target) when the key is pressed as being the body. I guess this one still needs some work…

Permalink. Posted on 24th July 2005 in Browsers, JavaScript, Web Standards.

Comments

There are currently no comments for this item.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening