coder and technology lover
Posts tagged browser incopatibility
Using getAttribute() to retrieve the label’s "for" attribute returns NULL on internet explorer!
Dec 12th
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 <label> node)
The function always returns NULL, even if the “for” attribute is manually specified into HTML code, ie:
<label for="my_field_id">my label</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!
CSS tip: if you can’t remove the evil, you can imprison it!
Nov 21st
Yesterday a colleague asked me to help her in debugging a crazy behavior of internet explorer 6 (all the others browsers worked fine!), which caused the wrong display of the boxes inside the page. The bug was caused by the rendering of a jQuery powered div, ie one of those things like:
$("#myDivID").doMagic({...});
In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:
<div style="position: relative; width: Npx; height: Npx;">
<div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>
</div>
With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.
Recent comments