borders in css

[skylar]

Take a look at my code first:

#menu {
width : 140;
height: 200;
margin-left : 15;
margin-top : 14;
margin-bottom : 14;
}
.menu {
display: block;
background-color: #8C6EA8;
color: #FFFFFF;
font-weight: 600;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12;
width: 100%;
text-decoration: none;
padding-bottom : 5;
padding-top : 5;
border-top: 2px solid #336699;
text-indent : 25;
border-left : 5px solid #336699;
border-right : 5px solid #336699;
}

The above is a menu in a div consisting out of anchors with class=menu.
Now I know NN and IE render borders different from each other in css, but in NN the above code produces messy results such as background overlapping border. Is there a work-around for this issue?

[grahamstewart]

Okay - first up, you need to specify units. width:140 means nothing, you should say width:140px for a width measurement in pixels (ditto for the height, padding, margin etc)

[grahamstewart]

Now.. with all your units in place.. here is whats going on. :)

NN is doing things correctly. You have specified you want your anchors to be 100% wide with a 5px border on the left and right sides. This means the total width will be 100% + 10px - which is what is causing the overlap.

It doesn't show on IE because IE incorrectly creates borders inside the existing width of items.

The solution is simple tho - just don't specify a width for the .menu class - it will fill the width of the parent by default.

[grahamstewart]

By the way, try using a CSS validator like the W3C one at [jigsaw.w3.org...]

Then you'll find out about errors like missing units straight away. :)

[skylar]

Well, I removed the width: 100% for the .menu class and now NN renders it the way it should.
Adding px by the way doesn't make any difference since it is the default in most browsers.
Thx a lot for the input.