Negative top margin

works in IE - not moz or FF

[jo1ene]

I have a list of links to which I have set a top border and a bottom border. I have then set the top margin to -1px so I don't get duplicate borders in between. In Moz and FF (most recent versions), only every other one works. Meaning, every other one has duplicate borders in between. Any clues? The Code...

#menu a {
padding: 0px 5px 0px 20px;
width: 100%;
line-height: 150%;
margin-top: -1px;
border-top: 1px solid #D4EBD4;
border-bottom: 1px solid #D4EBD4;
border-left: 3px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
display: block;
}

<div id="menu">
<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
<a href="#">Page 4</a>
</div>

[bedlam]

No clue for your specific problem, but I'd try something like this instead:

HTML:
==========

<ul id="menu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>

CSS:
==========
ul#menu {
border-color:#D4EBD4;
border-style:solid;
border-width:1px 1px 0 1px; /* No border on bottom of container... */
}

ul#menu li {
border-bottom:1px solid #D4EBD4;
}

So, to summarize, there are borders on the top, right and left sides of the container element (<ul>), and borders on the bottoms only of the list items (<li>). You could, of course, also do the same thing with the block-level <a> elements that you've tried in your original example - just apply the styles to the <a> elements instead of the <li>.

-B

[jo1ene]

Perhaps I should have mentioned that I have :hover effects associated with the borders. When I switch to the method that you suggest, I get a big mess on hovers. So I just used part of your suggestion and set the border-top on the menu and switched to border-bottom on the links. But that dosn't work because I had "invisible" right and left borders on the links that would "appear" on hover. I get extra pixels on either side of the link meaning the top-border is too wide. Using li doesn't help me. Anyway, thanks for your help. I'll play around some more. I was just wondering if anyone was aware of a bug.

[jo1ene]

On More Time

I switched around to your idea but set a bottom-border for the menu and border-top for the links. But I have the same problem. Instead of having "double borders" on every other one, I have extra white space. Same bug - different color.