This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > December 2003 > IE positioning bug and its solution.
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
IE positioning bug and its solution.
|
|
| delerious@no.spam.com 2003-12-19, 9:45 pm |
| 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 2003-12-19, 9:45 pm |
| On Fri, 19 Dec 2003 04:41:46 GMT, delerious@no.spam.com declared in
comp.infosystems.www.authoring.stylesheets,alt.html:quote:
>
> 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.
quote:
> However, that is not the case in IE 5.5.
No surprises there. ;-)
quote:
> 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
quote:
> 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.
quote:
> 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).
--
Mark Parnell
http://www.clarkecomputers.com.au
| |
| Richard 2003-12-19, 9:45 pm |
|
"Mark Parnell" <webmaster@clarkecomputers.com.au> wrote in message
news:1ps16rfvkf38a.f5bhtdj2ruzm.dlg@40tude.net...quote:
> On Fri, 19 Dec 2003 04:41:46 GMT, delerious@no.spam.com declared in
> comp.infosystems.www.authoring.stylesheets,alt.html:
The[QUOTE][color=darkred]
mouse[QUOTE][color=darkred]
>
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 2003-12-19, 9:45 pm |
| delerious@no.spam.com wrote:
[snip]quote:
> 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]quote:
> 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.
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
| |
| Leif K-Brooks 2003-12-19, 9:45 pm |
| Richard wrote:quote:
> 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 2003-12-19, 9:45 pm |
| Barry Pearson wrote:quote:
> 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 2003-12-21, 11:49 pm |
| <delerious@no.spam.com> wrote in message
news:3fe277a4.30173045@news.md.comcast.giganews.com...quote:
> 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
inquote:
> that browser?). I don't know if this bug has been reported before, but
herequote:
> 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
mousequote:
> cursor ANYWHERE inside the box to click on a link. However, that is not
thequote:
> case in IE 5.5. In IE 5.5, you can only click on a link when the mouse
cursorquote:
> is on top of the anchor's text. If the mouse cursor moves to the side of
thequote:
> text, the link can no longer be clicked. This bug does not appear in
Mozillaquote:
> 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
ofquote:
> the anchors when the page is loaded. Here is a page that shows the
solution:quote:
>
> http://home.comcast.net/~delerious1/index10b.html
>
> If the bug exists in IE 6, could someone please tell me if this solution
fixesquote:
> 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@no.spam.com 2003-12-23, 7:28 am |
| Oh no, I just discovered my solution doesn't work in IE 5.0. :(
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|