Welcome to WebmasterWorld Guest from 54.227.5.198

Forum Moderators: not2easy

Message Too Old, No Replies

borders in css

     

skylar

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month