Welcome to WebmasterWorld Guest from 18.104.22.168
Forum Moderators: not2easy
width : 140;
margin-left : 15;
margin-top : 14;
margin-bottom : 14;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
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?
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.