Absolutely positioned div links unclickable in Netscape

[Jonas Smithson]

Hello all,

I have an absolute positioned parent div, and nested inside it is an
absolute positioned child div -- I mean the div *code* is nested
inside, but the child is physically positioned so that it's completely
outside the parent div (to the left of its parent, in a left-side
margin area). The child div contains hyperlinks.

Explorer 6 (on Windows) has no problem with this. However, in Netscape
6, the links are unclickable. I experimented with shifting the child
div so that it's only partially outside the parent div, and discovered
that the part of the links that "overlaps" the parent div work, but
mousing over the part that's completely outside the parent div does
nothing.

I tried playing with transitional doctype vs. no doctype, z-index, and
several other things, but nothing helped. I can't show you the actual
page because it's only on my hard drive, not online yet, but here's an
abbreviated version of the code:

<!-- Parent div: -->
<div style="width: 400px; position: absolute; top: 0; left: 180px;
background-color: white; padding: 30px 50px 12px 75px;">

<!-- Lots of text inside h1, h2, and p tags here -->

<!-- Nested child div at bottom of parent div's code: -->
<div style="width: 125px; margin: 0; position: absolute; right: 500px;
bottom: 0; background-color: yellow;">
<p>Go to <a name="toppage" href="#logo" class="inpage">top of this
page</a></p>
</div> <!-- End parent div -->
</div> <!-- End child div -->

I purposely put the child position here so that it partially overlaps
the parent on the left, so that you could see (if you ran this code)
that the part of the link that "overlaps" the parent is the only
clickable part in Win NS6. By the way, I originally positioned the
child using a negative amount relative to its left, but replaced that
with a positive amount relative to its right, thinking the negative
number might be the problem; but that made no difference.

Is this just a bug in Netscape 6? (As I said, Explorer 6 had no problem
with this -- the links were fine no matter how I wrote the code.) Is
there a workaround for this?

Thank you for any help.

[Jonas Smithson]

Oops... when I showed:

</div> <!-- End parent div -->
</div> <!-- End child div -->

Of course I really meant:

</div> <!-- End child div -->
</div> <!-- End parent div -->

Sorry.

[DU]

Jonas Smithson wrote:

Hello all,

I have an absolute positioned parent div, and nested inside it is an
absolute positioned child div -- I mean the div *code* is nested
inside, but the child is physically positioned so that it's completely
outside the parent div (to the left of its parent, in a left-side
margin area). The child div contains hyperlinks.

Explorer 6 (on Windows) has no problem with this. However, in Netscape
6, the links are unclickable. I experimented with shifting the child
div so that it's only partially outside the parent div, and discovered
that the part of the links that "overlaps" the parent div work, but
mousing over the part that's completely outside the parent div does
nothing.

I tried playing with transitional doctype vs. no doctype, z-index, and
several other things, but nothing helped. I can't show you the actual
page because it's only on my hard drive, not online yet, but here's an
abbreviated version of the code:

<!-- Parent div: -->
<div style="width: 400px; position: absolute; top: 0; left: 180px;
background-color: white; padding: 30px 50px 12px 75px;">

<!-- Lots of text inside h1, h2, and p tags here -->

<!-- Nested child div at bottom of parent div's code: -->
<div style="width: 125px; margin: 0; position: absolute; right: 500px;
bottom: 0; background-color: yellow;">
<p>Go to <a name="toppage" href="#logo" class="inpage">top of this
page</a></p>
</div> <!-- End parent div -->
</div> <!-- End child div -->

I purposely put the child position here so that it partially overlaps
the parent on the left, so that you could see (if you ran this code)
that the part of the link that "overlaps" the parent is the only
clickable part in Win NS6. By the way, I originally positioned the
child using a negative amount relative to its left, but replaced that
with a positive amount relative to its right, thinking the negative
number might be the problem; but that made no difference.

Is this just a bug in Netscape 6? (As I said, Explorer 6 had no problem
with this -- the links were fine no matter how I wrote the code.) Is
there a workaround for this?

Thank you for any help.

Can you clarify 3 points for us?

1- Can you upload the whole document on a http server and post an url here.

2- Which version of NS 6? 6.1? 6.2? Did you try with NS 7.1? Btw, NS 7.2
should be out within 7-10 days.

3- Does your markup code validate? Do you use a full doctype declaration?

Problems with layout rendering needs more info than what you've provided.

Thanks

DU

[Jonas Smithson]

DU wrote:

Can you clarify 3 points for us?

1- Can you upload the whole document on a http server and post an url here.
Unfortunately that's not practical, but I'm pasting below the entire
code of a simple test page that shows this problem clearly. You can
just copy it into a text file and drag it into Windows Netscape 6.2.
2- Which version of NS 6? 6.1? 6.2? Did you try with NS 7.1? Btw, NS 7.2
should be out within 7-10 days.
The only version of Netscape for Windows that I have is: NS 6.2.0.0,
running on Windows 2000 Pro.

Thanks for the heads-up on NS7.2. Don't lots of users out there still
use NS6.2? (That's meant as a real question, not a rhetorical
question/argument.) The reason I ask is (in case it isn't already
obvious) that I'm not concerned with the page working correctly for
*me*, I'm concerned with its working correctly for other people.

I did try the page in Macintosh (OS9.2.2) Netscape 7.01, and the links
worked correctly. So as far as I know it's a Win NS6 issue.
3- Does your markup code validate? Do you use a full doctype declaration?

Yes, I uploaded the page to the W3C validator, plus the WDG validator,
and it validates on both. And you can see the doctype declaration; I
tried removing it to throw NS6 into "quirks" mode and it made no
difference in the outcome.

Thanks for any help!
*** HERE'S THE ENTIRE TEST PAGE CODE: ***

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>
<head><title>Test for unclickable links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Language" content="optional - en-US">
<style type="text/css">
<!--
a:hover{color: red}
-->
</style>
</head>

<body>
<!-- Left-side column: -->
<div style="width: 125px; margin: 12px 24px; border: thin solid cyan">
<a name="logo">The logo image goes here.</a>
<p>
Various stuff goes in left column, in various divs that don't even need
to be positioned. Some of them are links; there's no problem here.
</p>
</div> <!-- End left-side column -->

<!-- Center column with main content -->
<!-- Parent div: -->
<div style="width: 400px; position: absolute; top: 0; left: 180px;
border: thin solid blue; padding: 30px 50px 12px 75px;">

<h3>The links (below-left) work fine in Win IE6, but screw up in Win
NS6.2.</h3>
<p>
I "overlapped" the yellow box here as a test. NS6 makes the part that
overlaps the parent div clickable, and the part that doesn't overlap
isn't clickable. My real intention is to place the yellow box entirely
in the left margin area (completely outside its parent div), in which
case the link is <i>completely unclickable</i> by Win NS6.2. I added a
red "hover" style to make this slightly easier to see.</p>
<p>
In Mac IE5.1.7, a link in the yellow box is fine <i>unless</i> there
are italic tags inside the anchor tags, in which case the <i>entire</i>
link becomes unclickable. I know it's not advisable to put italic tags
inside anchor tags, but I don't believe it's technically an error, and
it doesn't cause problems in Mac IE5 under other circumstances. Since
Win NS6 and Mac IE5 presumably don't share any code, I'm guessing that
links in child divs positioned outside their parent divs may be
generally unreliable (can this be true?). A search online does show
lots of people complaining about "unclickable links".
</p>
<p>
From W3C:<br>
The uploaded file was checked and found to be valid HTML 4.01
Transitional. This means that the resource in question identified
itself as "HTML 4.01 Transitional" and that we successfully performed a
formal validation using an SGML or XML Parser (depending on the markup
language used).</p>
<p>
<img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid
HTML 4.01!" height="31" width="88">
</p>
<p>
This page also got a "Congratulations, no errors!" from the <a
href="http://www.htmlhelp.com/tools/validator/upload.html">WDG HTML
validator</a>. Both validations were done by uploading the file, not
from a "live" file on the Web.
</p>

<!-- Nested child div partially overlaps of parent div: -->
<div style="width: 125px; margin: 0; position: absolute; right: 475px;
bottom: 30px; background-color: yellow;">
<p>Try clicking the part of the links that overlap the parent div, and
the parts that don't:</p>
<p align="center"><a href="#logo">Go to top of this page</a></p>
<p align="center"><a href="http://www.cnn.com/">Here's another link
that goes somewhere.</a></p>
</div> <!-- End child div -->
</div> <!-- End parent div -->

</body>
</html>

[DU]

Jonas Smithson wrote:

DU wrote:

Can you clarify 3 points for us?

1- Can you upload the whole document on a http server and post an url here.

Unfortunately that's not practical, but I'm pasting below the entire
code of a simple test page that shows this problem clearly. You can
just copy it into a text file and drag it into Windows Netscape 6.2.

2- Which version of NS 6? 6.1? 6.2? Did you try with NS 7.1? Btw, NS 7.2
should be out within 7-10 days.

The only version of Netscape for Windows that I have is: NS 6.2.0.0,
running on Windows 2000 Pro.

Thanks for the heads-up on NS7.2. Don't lots of users out there still
use NS6.2? (That's meant as a real question, not a rhetorical
question/argument.) The reason I ask is (in case it isn't already
obvious) that I'm not concerned with the page working correctly for
*me*, I'm concerned with its working correctly for other people.

I did try the page in Macintosh (OS9.2.2) Netscape 7.01, and the links
worked correctly. So as far as I know it's a Win NS6 issue.

3- Does your markup code validate? Do you use a full doctype declaration?

Yes, I uploaded the page to the W3C validator, plus the WDG validator,
and it validates on both. And you can see the doctype declaration; I
tried removing it to throw NS6 into "quirks" mode and it made no
difference in the outcome.

Thanks for any help!
*** HERE'S THE ENTIRE TEST PAGE CODE: ***

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>
<head><title>Test for unclickable links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Language" content="optional - en-US">

lang attribute on the html element is much better supported by browsers.
<style type="text/css">
<!--
a:hover{color: red}
-->
</style>
</head>

<body>
<!-- Left-side column: -->
<div style="width: 125px; margin: 12px 24px; border: thin solid cyan">
<a name="logo">The logo image goes here.</a>
<p>
Various stuff goes in left column, in various divs that don't even need
to be positioned. Some of them are links; there's no problem here.
</p>
</div> <!-- End left-side column -->

<!-- Center column with main content -->
<!-- Parent div: -->
<div style="width: 400px; position: absolute; top: 0; left: 180px;
border: thin solid blue; padding: 30px 50px 12px 75px;">

<h3>The links (below-left) work fine in Win IE6, but screw up in Win
NS6.2.</h3>
<p>
I "overlapped" the yellow box here as a test. NS6 makes the part that
overlaps the parent div clickable, and the part that doesn't overlap
isn't clickable.
Yes, I confirm your problem under NS 6.2

My real intention is to place the yellow box entirely in the left margin area (completely outside its parent div), in which
case the link is <i>completely unclickable</i> by Win NS6.2.

Then
1) why do you need to make it a nested child element of the parent?
2) why can't you just use normal flow (position: static) instead?

The more you nest elements, the more it takes cpu, RAM, parsing, complex
functions to a browser. The more complex, nested elements are, the more
you'll get browser discrepancies, differences in rendering, in
performance. Some heavily nested pages will even crash browsers or will
prevent some features to work accordingly. A "Keep it simple" policy is
also appreciated from various point of view: site maintainability,
features working better (i.e. view selection in Mozilla can crash when
selecting nested elements; printing selection involving nested elements
can crash certain browser with modest system resources).

I am able to meet your requirements in NS 6.2 and all other browsers by
removing the abs. pos. and nested element.

I added a red "hover" style to make this slightly easier to see.</p>
<p>
In Mac IE5.1.7, a link in the yellow box is fine <i>unless</i> there
are italic tags inside the anchor tags, in which case the <i>entire</i>
link becomes unclickable. I know it's not advisable to put italic tags
inside anchor tags, but I don't believe it's technically an error, and
it doesn't cause problems in Mac IE5 under other circumstances. Since
Win NS6 and Mac IE5 presumably don't share any code, I'm guessing that
links in child divs positioned outside their parent divs may be
generally unreliable (can this be true?). A search online does show
lots of people complaining about "unclickable links".
</p>
<p>
From W3C:<br>
The uploaded file was checked and found to be valid HTML 4.01
Transitional. This means that the resource in question identified
itself as "HTML 4.01 Transitional" and that we successfully performed a
formal validation using an SGML or XML Parser (depending on the markup
language used).</p>
I suggest you only use one of these doctype decl.

List of valid DTDs you can use in your document.
http://www.w3.org/QA/2002/04/valid-dtd-list.html

W3C Quality Assurance tips for webmasters
http://www.w3.org/QA/Tips/
<p>
<img border="0"
Removing border="0" allows your document to validate while using the
strict definition.

src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
</p>
<p>
This page also got a "Congratulations, no errors!" from the <a
href="http://www.htmlhelp.com/tools/validator/upload.html">WDG HTML
validator</a>. Both validations were done by uploading the file, not
from a "live" file on the Web.
</p>

<!-- Nested child div partially overlaps of parent div: -->
I removed it as a nested child.
<div style="width: 125px; margin: 0; position: absolute; right: 475px;
bottom: 30px; background-color: yellow;">
I gave it the margins of the left side column
<p>Try clicking the part of the links that overlap the parent div, and
the parts that don't:</p>
<p align="center"><a href="#logo">Go to top of this page</a></p>
setting
style="text-align: center;" is better than align center as 99% of
current browsers in use out there support well CSS1 text-align property.
<p align="center"><a href="http://www.cnn.com/">Here's another link
that goes somewhere.</a></p>
</div> <!-- End child div -->
</div> <!-- End parent div -->

</body>
</html>

Here's how that looks:

http://www10.brinkster.com/doctorunc...eLinksNS6.html

DU

[Jonas Smithson]

DU wrote:

Then
1) why do you need to make it a nested child element of the parent?
2) why can't you just use normal flow (position: static) instead?
. . . . Here's how that looks:

http://www10.brinkster.com/doctorunc...eLinksNS6.html

Thanks for making this effort. Unfortunately what you did isn't the
layout I'm after -- perhaps I didn't make clear that the whole point of
the yellow navigation box is to appear in the left column at the
*bottom of the page*, not near the top under the logo area. (That's why
it has a "go to top of this page" link; it's a "jump" -- the actual
page is fairly tall.) I wish I could, as you say, "just use normal
flow" to do that, but the main text column won't push down the nav box
because, as an absolute positioned element, the main text column is not
in the flow itself and can't push down anything.

I did a series of interesting (to me, anyway) experiments with how
browsers define "body size." I did this simply by applying a border to
the body and playing with different code sets in different browsers.
They seem to make the body's width equal to the viewport's width, more
or less; but the body's height is just enough to contain the tallest
*non-positioned* element on the page. In this case, that means that if
I un-nest the yellow nav box and (in an attempt to get it to the
bottom) set it to be absolutely positioned with bottom: 0, it actually
ends up in the middle of the page, even overlapping other elements in
the left column.

In other words, I'm trying to figure out some way to get the yellow box
"stuck" to the bottom of the page (without pre-defining how tall the
page is, since I'm trying to build a template that can be used on
various pages, and anyway I don't really know what the user's type size
will be and so I can't know how tall the page will be). I know how to
use JavaScript to get the size of the *viewport*, which is irrelevant
here, but I don't know any way with CSS or JavaScript or anything else
to get the height of the *page* (i.e. the vertical scroll-length). The
only way I could figure out to get the yellow nav box "stuck" to the
bottom left, while roughly base-aligned with the main column of text
(i.e. not a "footer" which would cause a large blank space under the
main text column), was to nest it near the end of the main column and
then shift it left with absolute positioning -- which as you saw
triggered the Netscape 6 bug.

I'd love some more reliable way to get this effect, but bottom line (no
pun intended) is that that's the effect I want. I can do it reliably in
a minute using table code; I was trying to get away from that. I'm not
going to give up my layout concept just so I can switch from tables to
CSS, however. I thought CSS was supposed to be able to reproduce almost
any layout tables can; but maybe not.

(Or should I just forget about the Netscape 6 bug? How many people use
Netscape 6, anyway?)

Thanks much.

[Els]

Jonas Smithson wrote:

DU wrote:

Can you clarify 3 points for us?

1- Can you upload the whole document on a http server and
post an url here.

Unfortunately that's not practical, but I'm pasting below
the entire code of a simple test page that shows this
problem clearly. You can just copy it into a text file and
drag it into Windows Netscape 6.2.

2- Which version of NS 6? 6.1? 6.2? Did you try with NS
7.1? Btw, NS 7.2 should be out within 7-10 days.

The only version of Netscape for Windows that I have is: NS
6.2.0.0, running on Windows 2000 Pro.

Thanks for the heads-up on NS7.2. Don't lots of users out
there still use NS6.2? (That's meant as a real question,
not a rhetorical question/argument.) The reason I ask is
(in case it isn't already obvious) that I'm not concerned
with the page working correctly for *me*, I'm concerned
with its working correctly for other people.

I did try the page in Macintosh (OS9.2.2) Netscape 7.01,
and the links worked correctly. So as far as I know it's a
Win NS6 issue.

[snip code]

Unfortunately I don't have NS6, so I can't try it out, but
maybe the use of z-index would help? That would place the div
on top of things, which might force the overlap to be
consistent enough for the links to work.

Another thing: Why don't you use left:-80px instead of
right:475px? That way you can have the main content div flow
with the window instead of using a fixed width.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Jonas Smithson]

Els wrote:

Unfortunately I don't have NS6, so I can't try it out, but
maybe the use of z-index would help? That would place the div
on top of things, which might force the overlap to be
consistent enough for the links to work.
I tried that; unfortunately it didn't help. Thanks for the thought,
though.
Another thing: Why don't you use left:-80px instead of
right:475px? That way you can have the main content div flow
with the window instead of using a fixed width.

Initially I did use a negative margin from the left, but I've heard
that negative margins are buggy in some browsers, so I tried a positive
number from the right. It made no difference. Also I usually don't like
"liquid width" windows for large columns of type, although I recognize
their advantages. I wish the min-max properties were more widely
supported; then I could have variable-width columns within some
constraints, which would be a good compromise.