/    Sign up×
Community /Pin to ProfileBookmark

IE positioning bug and its solution

Copy linkTweet thisAlerts:
Dec 19.2003

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:

[url]http://home.comcast.net/~delerious1/index10a.html[/url]

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:

[url]http://home.comcast.net/~delerious1/index10b.html[/url]

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

Thanks.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrDec 19.2003 — 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, [FONT=courier new]width:33em;[/FONT] 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... :rolleyes:
Copy linkTweet thisAlerts:
@deleriousauthorDec 23.2003 — 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. ?
Copy linkTweet thisAlerts:
@Paul_JrDec 23.2003 — Specify a width for your container in em's, then add [FONT=courier new]width: 100%;[/FONT] 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.
Copy linkTweet thisAlerts:
@Paul_JrDec 23.2003 — [i]Originally posted by Paul Jr [/i]

[B][FONT=courier new]width: 100%;[/FONT][/B][/QUOTE]
Scratch that, it's probably going to have to be 97.5% instead of 100%, because of the padding applied.
Copy linkTweet thisAlerts:
@toicontienDec 23.2003 — The bug you discovered exists in IE6 and the fix you applied works too. Very strange indeed.
×

Success!

Help @delerious spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...