I just found a bug that's related to positioning in IE 5.5 (could someone please tell me if this bug exists in IE 6, and if so, if my solution works in that browser?). I don't know if this bug has been reported before, but here it is, and its solution, in case anyone else runs into it.
On the following page there is a box (DIV) that contains six anchors. The anchors have a style of display:block, so you should be able to move the mouse cursor ANYWHERE inside the box to click on a link. However, that is not the case in IE 5.5. In IE 5.5, you can only click on a link when the mouse cursor is on top of the anchor's text. If the mouse cursor moves to the side of the text, the link can no longer be clicked. This bug does not appear in Mozilla or Opera. Here is a page that shows the problem:
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index10a.html">http://home.comcast.net/~delerious1/index10a.html</a><!-- m -->
Could someone with IE 6 and Javascript enabled please tell me if the bug occurs in that browser?
I know that the bug is related to positioning, because the following javascript code is executed when the page is loaded:
divElement.style.left = '100px';
divElement.style.top = '100px';
If I take those two lines out, then the bug does not occur.
The solution to this bug is to call the focus() and blur() methods on one of the anchors when the page is loaded. Here is a page that shows the solution:
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index10b.html">http://home.comcast.net/~delerious1/index10b.html</a><!-- m -->
If the bug exists in IE 6, could someone please tell me if this solution fixes it in that browser?
Thanks.If you specify a width to your container, then width:100%; in your link style, the problem is fixed. If you don't want to specify a width for your containter, just specify an adequate width to your link style.
In this case, width:33em; applied to the link style works fine.
***EDIT***
Although, doing what I suggested causes the border to break in Opera 7, I'm not sure what causes this, and I'm a bit too lazy to figure it out...
Hmm, I don't really want to specify widths, because the user might increase the text size and end up with text larger than the width.
Anyways, I just found out my solution doesn't work in IE 5.0.
Specify a width for your container in em's, then add width: 100%; to your link style, and it should work just fine, no matter if the user increases or decreases the text size. The container will resize accordingly.Originally posted by Paul Jr
width: 100%;
Scratch that, it's probably going to have to be 97.5% instead of 100%, because of the padding applied.The bug you discovered exists in IE6 and the fix you applied works too. Very strange indeed.
On the following page there is a box (DIV) that contains six anchors. The anchors have a style of display:block, so you should be able to move the mouse cursor ANYWHERE inside the box to click on a link. However, that is not the case in IE 5.5. In IE 5.5, you can only click on a link when the mouse cursor is on top of the anchor's text. If the mouse cursor moves to the side of the text, the link can no longer be clicked. This bug does not appear in Mozilla or Opera. Here is a page that shows the problem:
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index10a.html">http://home.comcast.net/~delerious1/index10a.html</a><!-- m -->
Could someone with IE 6 and Javascript enabled please tell me if the bug occurs in that browser?
I know that the bug is related to positioning, because the following javascript code is executed when the page is loaded:
divElement.style.left = '100px';
divElement.style.top = '100px';
If I take those two lines out, then the bug does not occur.
The solution to this bug is to call the focus() and blur() methods on one of the anchors when the page is loaded. Here is a page that shows the solution:
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index10b.html">http://home.comcast.net/~delerious1/index10b.html</a><!-- m -->
If the bug exists in IE 6, could someone please tell me if this solution fixes it in that browser?
Thanks.If you specify a width to your container, then width:100%; in your link style, the problem is fixed. If you don't want to specify a width for your containter, just specify an adequate width to your link style.
In this case, width:33em; applied to the link style works fine.
***EDIT***
Although, doing what I suggested causes the border to break in Opera 7, I'm not sure what causes this, and I'm a bit too lazy to figure it out...
Hmm, I don't really want to specify widths, because the user might increase the text size and end up with text larger than the width.Anyways, I just found out my solution doesn't work in IE 5.0.
Specify a width for your container in em's, then add width: 100%; to your link style, and it should work just fine, no matter if the user increases or decreases the text size. The container will resize accordingly.Originally posted by Paul Jr width: 100%;
Scratch that, it's probably going to have to be 97.5% instead of 100%, because of the padding applied.The bug you discovered exists in IE6 and the fix you applied works too. Very strange indeed.