Div too wide?

They have: 140 posts

Joined: Jan 2003

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!

SonicMailer Pro
The best mailing list manager has just gotten better!
Click here for a full list of features!

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

1. it's IE that has it wrong, and Opera must be in IE mode to render it wrong as well.

2. http://www.google.com/search?q=tantek+box+model+hack

3. Good practice for CSS coding has each declaration on its own line... That also prevents forum scroll.

Happy reading! Smiling

They have: 140 posts

Joined: Jan 2003

suzanne: oh okay thanks I will look into it!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.