SillyDog701

[paulh]

I'd appreciate some help with a CSS coding problem. I have used div tags to define a naviagation box containing a list of links at the left-hand side of a web page, with a block of body text alongside it. The CSS code is:

div#navigation {position: absolute; left: 20px; top: 130px; width: 180px; background: #FFFFCC; padding: 15px; border-right-style: dotted; border-color: gray; }

div#body {position: absolute; left: 217px; top: 130px; width: 570px; }

The boxes look fine in IE or Opera, but the navigation box is too wide when displayed in Netscape/Mozilla, i.e. the navigation box overlaps the body box. Is there something wrong with my code, or is it a problem in Netscape/Mozilla browser (I'm using the latest versions of all browsers)?

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

[akbash]

The problem is a disagreement among the various astrologers, browser developers, and standards bodies about the precise definition of an object's size. You can achieve greater agreement between browsers by adding a doctype to prod IE out of backwards compatible "quirks" mode. Some browsers also support a special CSS declaration to switch the treatment of individual webpage objects. For more information see Box model tweaking.

Welcome to the wonderful world of web design.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20050911 Firefox/1.6a1

[paulh]

Akbash

Thanks very much for your helpful reply. I must confess, now I know the problem is with the width parameter, I was able to take the easy way out and reduce the padding and width in the navigation box so that it no longer overlaps when displayed in Netscape. Best wishes.

Paul

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)