Welcome to WebmasterWorld Guest from 54.198.183.217

Forum Moderators: not2easy

Message Too Old, No Replies

borders in css

     
5:24 pm on Mar 17, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 17, 2003
posts:9
votes: 0


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?

5:43 pm on Mar 17, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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)
5:50 pm on Mar 17, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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.

5:54 pm on Mar 17, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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. :)

6:45 pm on Mar 17, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 17, 2003
posts:9
votes: 0


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.