DaveOnCode » internet explorer

Using getAttribute() to retrieve the label’s "for" attribute returns NULL on internet explorer!

Davide Zanotti — Fri, 12 Dec 2008 15:40:47 +0000

Damned Internet Explorer!!! I’ve just faced another browser issue by using the javascript function getAttribute() in order to retrieve the “for” value of a form’s label, ie:

myLabel.getAttribute("for");

(where “myLabel” is a reference to a node)
The function always returns NULL, even if the “for” attribute is manually specified into HTML code, ie:

my label

Fortunately, after a brief search on Google, I’ve found a post on quirksmode.org, which contains a comment by Tino Zijdel, that show an easy and crossbrowser solution to get the “for” attribute (that can be used both to set a value or to get it):

myLabel.htmlFor

Thank you Tino!

In my search I’d even discovered that on Internet Explorer getAttribute() is different from other browsers, because it offers an extra argument called “iFlags” that is a number that can be 0, 1 or 2 (genial!) and means (I’m reporting the official microsoft documentation):

0 -> Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found
1 -> Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in AttributeName must exactly match those in the attribute name. If the iFlags parameter for getAttribute is set to 1 and this option is set to 0 (default), the specified property name might not be found.
2 -> Returns the value exactly as it was set in script or in the source document

It would be a better world without Internet Explorer!

Avoid CSS hacks for internet explorer 6 (ie6) by using selectors

Davide Zanotti — Tue, 02 Dec 2008 15:28:27 +0000

Is a common practice to use CSS hacks in order to assign specif stylesheet to internet explorer 6, like:

However we can avoid extra CSS files (for internet explorer 6) by assign first all the necessary properties for it, an then reassign them for others modern browsers (firefox, safari, opera and ie7) . For example:

div.mydiv {
    padding: 5px;
    position: absolute;
    top: 5px; /* this should be 3px except ie6 */
    right: 10px; /* this should be 7px except ie6 */
}

/*
redefine the properties for all browser that
support CSS selectors (not ie6!)
*/
div[class~="mydiv"] {
    top: 3px;
    right: 7px;
}

It’s important to notice that we should use the “contains” selector (~=), in order to work even if the div into the page as several CSS classes applied (like

View the generated source code in internet explorer with a bookmarklet

Davide Zanotti — Mon, 24 Nov 2008 16:36:42 +0000

As all knows, in browser like Firefox, in order to view the generated source code of a page (that is the final HTML which the browser display into the window, so it includes JS generated nodes and SSI inclusions) we have simply to select all (ctr+A or command+A on a Mac) and choose “View selection source”. Internet Explorer instead doesn’t offers the ability to view the generated source but only the basic HTML code (whic doesn’t include dynamic generated content). To have such feature, I’ve used the innerHTML property to get the final content of tag, and I’ve realized a bookmarklet to call after the loading of the page. The bookmarklet opens an 800×600 resizable popup with a textarea that shows the HTML code.

This is the code of the bookmarklet:

1	javascript:var p=window.open("","p","width=800,height=600,resizable=yes");p.document.open();p.document.write('<html><head></head><textarea style="width:100%;height=100%'">'+document.getElementsByTagName("html")[0].innerHTML+'</textarea><body></body></html>');p.document.close();void(0);

to use it, simply copy and paste into the ie address bar and press enter ;-)