I have the following:

<div class="menuoff" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick="LoadPage('index.php');">Home</div>

CSS:
div.menuoff { width:115px; font-size:11px; font-family:Verdana; background-color:#BB99DD; color:#660066; cursor:default; padding:3px; border-top:2px solid #660066; border-left:2px solid #660066; border-right:2px solid #660066; margin-left:5px; }
div.menuon { width:115px; font-size:11px; font-family:Verdana; background-color:#EE22BB; color:#FFFFFF; cursor:pointer; padding:3px; border-top:2px solid #660066; border-left:2px solid #660066; border-right:2px solid #660066; margin-left:5px; }

In Opera and IE it works fine, however with Netscape (7.02), it is "too wide". The menu bar is 125 pixels wide, and as you can see each item is 115. With netscape, it goes across too far and this is because of the border and padding. Both IE and opera put the border on the inside of the 115px width, while netscape puts it outside (so it becomes 119px... 2px on each side). Then, it does the same with padding.

Is there anything I can do so that this displays properly? I don't want to go back to tables!

Just a thought, couldn't you do some browser detection (PHP perhaps?) and then change the width if you detect Netscape to compensate?

david: could, but not sure I want to do that for every single element on my page...