homepage Welcome to WebmasterWorld Guest from 54.196.189.229
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
borders in css
skylar




msg:1173775
 5:24 pm on Mar 17, 2003 (gmt 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?

 

grahamstewart




msg:1173776
 5:43 pm on Mar 17, 2003 (gmt 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)

grahamstewart




msg:1173777
 5:50 pm on Mar 17, 2003 (gmt 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.

grahamstewart




msg:1173778
 5:54 pm on Mar 17, 2003 (gmt 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. :)

skylar




msg:1173779
 6:45 pm on Mar 17, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved