The Workaround

I received several interesting emails on this problem (included below), but it was Brig who provided the solution. She suggested assigning styles to the nested DIV via a class. Here is her email, followed by my implementation of her suggestion (note that instead of using two class styles as she suggested, I used one class style and then assigned the positioning style via ID):
Brig Eaton wrote:
-------------------------------------
	if you're looking for a workaround that lets you nest your divs,
	you can use a class.

	.nested {position:absolute;left:0px;top:30px;}
	.nested a:link {color: #669900;}

	then div id="contentdiv" class="nested"
-------------------------------------
<html><head><title>NS4x anchor in nested div css bug - solution</title>
<style type="text/css">
body {font-family:sans-serif; font-size:16px;}
a {text-decoration:none; font-weight:bold; color:#669900; font-family:serif}
#contentdiv {position:absolute; left:0px; top:30px;}
.nested a {text-decoration:none; font-weight:bold; color:#669900; font-family:serif}
</style>
</head><body text="#000000" link="#cc0000" vlink="#cc0000" alink="cc0000">
<h3>NS4x anchor in nested div css bug</h3>
<a href=test.html>Link #1</a> appears as it should, green and all serify (see the code below).
<div id="maindiv" style="position:absolute; left:10px; top:70px;">
	<a href=test.html>Link #2</a> in a DIV also appears as it should.
	<div id="contentdiv" class="nested" style="">
	<a href=test.html>Link #3</a> in a DIV nested in a DIV now also appears as it should.
	Reason below.
	</div>
</div>

The addition of that "nested" class forces NS to carry the style down into the nested DIV.

Below are two helpful emails from Steve Champeon and Jeffrey Zeldman. Champeon offers a technical reason for NS's problems, while Zeldman suggets a different workaround.

Steve Champeon wrote:
------------------------------------------------------------
	Navigator can't handle nested DIVs using absolute positioning. It's a side
	effect of their kludge to allow a crosswalk between Layers and Divs (if you
	use CSS-P to position a DIV, it shows up as a Layer in the document.layers
	array).

	So, no, it's not a stupid question, and no, there's no error on your part
	other than having high expectations for something that will never work. :)

	See if the styles work if you take the positioning CSS code out.
------------------------------------------------------------


Jeffrey Zeldman wrote:
------------------------------------------------------------
	nested divs and other css confusion

	Don't nest <divs> and don't use absolute positioning. Neither one is safe
	for IE3 users or Nav4 users. (Nav4 understands CSS positioning, but some
	versions of Nav4 become destabilized when you use it.)

	You can always style <p>s instead of divs ... slipping a <p></p> inside a
	<div></div> should not be a problem, and it may actually help your document
	make more structural sense, since <div>s have no inherent structural
	meaning, compared to elements like <p> and <h1> and <address>.

	Be warned, if you style HTML elements like <p> instead of using <div>s,
	Nav4 may add unwanted whitespace around some of these elements, because it
	applies "legacy styling" to traditional HTML objects. (IE does some of this
	too, but it's less obvious.)

	Because of these problems, I am still using TABLES, and still advising
	designers to use TABLES until IE3 and Netscape 4 are no longer in use. It's
	the wrong thing to do, from the perspective of where the web is going,
	because it yokes content to presentation. But I think it's the right thing
	to do in terms of supporting people who use older browsers - and giving
	clients sites that will work for their users.
------------------------------------------------------------
Thanks to everyone!

back to glish.com

NS4x anchor in nested div css bug

Link #1 appears as it should, green and all serify (see the code below).
Link #2 in a DIV also appears as it should.
Link #3 in a DIV nested in a DIV now also appears as it should. Reason below. See here for the problem code.