Netscape CSS Border Alignment

I am attempting to use CSS border and getting display differences between Netscape 7.2 and IE 6. IE behaves correclty, Netscape does not.

The code is simple:

<body>
<div id="frame">
<div id="fatborder"></div>
</div>
</body>

where the styles are:

#frame {
height: 500px;
width: 500px;
border: 1px solid #000000;
}
#fatborder {
height: 100%;
width: 100%;
border: 20px solid #0000ff;
}

The fatborder displays wider than the frame in Netscape. I've tried various DOCTYPEs and various style approaches (classes, etc) with no luck. I am currently using DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This seems like a very basic problem. Any ideas?

ThanksThat's because NS is doing what you told it, "make a div the size of its container plus put a 20px border around it. IE gets the box model wrong.You're right.

I found that using:

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

Resolved the IE-6 inconsistency. Note that "4.01" does not work.

Thanks for your help.
 
Back
Top