I just discovered that I cannot manipualte multiple DIVs using Javascript's document.getElementsByName().
Apparently, there is no legal way of using the name attribute for such tags such as div or span, according to W3C HTML 4.01 specs. You must confine the usage of this attribute to such tags as input, img, frame, iframe, form, map, param, meta, object, A, select, applet, textarea, or button.
Click Here.
So remember to use document.getElementsByTagName() instead and go through all DIVs and check for a user-defined attribute to achieve your goal. Although this seems inefficient if you have a lot of DIVs, it's legal and the DOM model should be efficient enough to not cause too much processing time.
Also bear in mind that replacing document.getElementsByName() with document.getElementsByTagName() may not be backward compatible with some older browsers such as IE4.
Tuesday, March 21, 2006
IE CSS Bugs
Wow! IE Bugs have been so prevalent that there are entire websites dedicated to workarounds. I've found the use for one today.
How To Attack An Internet Explorer (Win) Display Bug
http://www.communitymx.com/content/article.cfm?page=1&cid=C37E0
Table-less div pages are a boon, in the sense that it is very easy to manage / modify. But IE CSS implementation is so buggy that it can become a nightmare.
I had some nested divs that were static, absolute, visible, hidden, floating. Basically a reasonably complicated page for the intended look I wanted. Then certain divs starting behaving erratically when they would disappear along with text inside them. More popularly knows as ...
The Peekaboo bug
http://www.positioniseverything.net/explorer/peekaboo.html
Some basic hacks will help solve the problems.
- Whenever possible, give an explicit dimension to all block elements. This helps IE a lot.
- If you want to keep certain elements liquid, then use the following hacks
{position: relative}
This CSS code solves some IE bugs such as Eric Meyer's Punch Out Demo. Divs contained inside another, get hidden if you try to use them to hide the borders (for example) of the container div (using negative margins for example). By using the above CSS hack, this problem is solved without any side effects on other browsers.
The Holly Hack
{height: 1%}
When you need a liquid div and provide no dimensions to a div, sometimes IE fails to display it properly during resize, etc. This hack helps IE and solves the problem (only when the content actually exceeds the prescribed dimension of the div. Since 1% is small enough for even a little content, it works). Not exactly W3C compliant but it does. But this can have a side effect on other non IE/Win W3C compliant browsers. So we need to apply this and other such IE specific hacks in combination with other hacks.
To hide the holly hack side effect from IE5/Mac, use the IE5-Mac hack
/* Hides from IE5-mac \*/
/* End hide from IE5-mac */
The backslash at the end of first line serves as an escape character in IE5/Mac and any code in between the 2 lines is treated as comments.
Tan Hack
* html .buggybox {height: 1%;}
"* html" is an IE (Win and Mac) only specific CSS element and is ignored by other browsers. So the above code is an implementation of the Holly Hack using the Tan Hack.
How To Attack An Internet Explorer (Win) Display Bug
http://www.communitymx.com/content/article.cfm?page=1&cid=C37E0
Table-less div pages are a boon, in the sense that it is very easy to manage / modify. But IE CSS implementation is so buggy that it can become a nightmare.
I had some nested divs that were static, absolute, visible, hidden, floating. Basically a reasonably complicated page for the intended look I wanted. Then certain divs starting behaving erratically when they would disappear along with text inside them. More popularly knows as ...
The Peekaboo bug
http://www.positioniseverything.net/explorer/peekaboo.html
Some basic hacks will help solve the problems.
- Whenever possible, give an explicit dimension to all block elements. This helps IE a lot.
- If you want to keep certain elements liquid, then use the following hacks
{position: relative}
This CSS code solves some IE bugs such as Eric Meyer's Punch Out Demo. Divs contained inside another, get hidden if you try to use them to hide the borders (for example) of the container div (using negative margins for example). By using the above CSS hack, this problem is solved without any side effects on other browsers.
The Holly Hack
{height: 1%}
When you need a liquid div and provide no dimensions to a div, sometimes IE fails to display it properly during resize, etc. This hack helps IE and solves the problem (only when the content actually exceeds the prescribed dimension of the div. Since 1% is small enough for even a little content, it works). Not exactly W3C compliant but it does. But this can have a side effect on other non IE/Win W3C compliant browsers. So we need to apply this and other such IE specific hacks in combination with other hacks.
To hide the holly hack side effect from IE5/Mac, use the IE5-Mac hack
/* Hides from IE5-mac \*/
/* End hide from IE5-mac */
The backslash at the end of first line serves as an escape character in IE5/Mac and any code in between the 2 lines is treated as comments.
Tan Hack
* html .buggybox {height: 1%;}
"* html" is an IE (Win and Mac) only specific CSS element and is ignored by other browsers. So the above code is an implementation of the Holly Hack using the Tan Hack.
Subscribe to:
Posts (Atom)