IE positioning bug and its solution.

[delerious]

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:

http://home.comcast.net/~delerious1/index10a.html

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:

http://home.comcast.net/~delerious1/index10b.html

If the bug exists in IE 6, could someone please tell me if this solution fixes
it in that browser?

Thanks.

 

[Mark Parnell]

[/url]

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.

No surprises there. ;-)

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.

No surprises there either. :-D

Here is a page that shows the problem:

http://home.comcast.net/~delerious1/index10a.html

Here is a page that shows the solution:

http://home.comcast.net/~delerious1/index10b.html

If the bug exists in IE 6,
Yes.

could someone please tell me if this solution fixes
it in that browser?

Yes. If Javascript is enabled, of course.

Yes, it's a known bug. It is nothing to do with Javascript, of course. It
is the fact that the div is positioned. I can't remember the solution
offhand (other than not positioning it, of course).

 

[Richard]

[/url]

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.

The hand only activates when the cursor is over the text.
Which is what the anchor is referring to, not the division itself.
Perhaps padding with trailing spaces might cure that problem.
IE6 BTW.

 

[Barry Pearson]

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: [snip]
If the bug exists in IE 6, could someone please tell me if this
solution fixes it in that browser?

I have just copied your code and added a "width: 400px;" after the "display:
block;". This makes it fairly consistent in IE 5, IE 6, and others.

In fact, I have been using the combination of display: block and width on all
my web sites for some time to make my buttons look OK. Normally I use a
percentage - someone said that you shouldn't use 100% because of an IE bug, so
I use 99.9%, but I don't know if that is true. Have a look at them, below. You
may need to experiment. My sites don't use Javascript.

 

[Leif K-Brooks]

The hand only activates when the cursor is over the text.
Which is what the anchor is referring to, not the division itself.
Perhaps padding with trailing spaces might cure that problem.
IE6 BTW.

If it's display:block, that's incorrect.

 

[Leif K-Brooks]

In fact, I have been using the combination of display: block and width on all
my web sites for some time to make my buttons look OK. Normally I use a
percentage - someone said that you shouldn't use 100% because of an IE bug, so
I use 99.9%, but I don't know if that is true. Have a look at them, below. You
may need to experiment. My sites don't use Javascript.

Older versions of IE think that 100% means 100% of the page, rather than
100% of the containing element.

 

[SwissCheese]

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:

http://home.comcast.net/~delerious1/index10a.html

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:

http://home.comcast.net/~delerious1/index10b.html

If the bug exists in IE 6, could someone please tell me if this solution fixes
it in that browser?

Thanks.

I believe the error occurs because a soon as you dynamically (style/css)
position an element it is removed from the normal 'flow' of the document and
placed on it's own layer. This somehow affects how the block element is
rendered by the browser.

Your example - somewhat simplified:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>test</TITLE>
<STYLE type="text/css">
A {
background-color: blue;
color: white;
display: block;
font-family: Verdana;
font-size: x-small;
font-weight: normal;
padding-left: 0.3em;
padding-right: 0.4em;
text-decoration: none;
width: 100%;
}

A:hover {
background-color: rgb(0,192,255);
}

#submenu {
border-color: rgb(0,192,255);
border-style: solid;
border-width: 2px;
left: 200px;
position: absolute;
top: 100px;
visibility: visible;
width: 200px;
}

</STYLE>
</HEAD>
<BODY>
<DIV id="submenu">
<A id="a1" href="fakepage.html">link 1</a>
<A id="a2" href="fakepage.html">Link number 2.00</a>
<A id="a3" href="fakepage.html">Link trey</a>
<A id="a4" href="fakepage.html">Link fourvages</a>
<A id="a5" href="fakepage.html">Link 5</a>
<A id="a6" href="fakepage.html">Link #6</a>
</DIV>
</BODY>
</HTML>

Without Javascript you need to add the WIDTH attribute for your DIV
submenu. Use whatever form you want (px or % probably).

 

[delerious]

Oh no, I just discovered my solution doesn't work in IE 5.0.