Borders doubling up

Question

Hi!

I'm adding a new design to my website. The main menu ul stretches across the screen and the items are demarcated by simple borders. I'm having problems with the left and right borders for my menu items.

What's happening is that I can't properly display the borders on mouseover (a:hover) unless I space the margins so that in the normal state, the right border of Item1 and the left border of item2 "collide" in effect making a 2px wide border. I use the same image for the menu area, the normal buttons and the mouseover effect, but change the background position css uses where needed. No borders were drawn into the image.

<ul class="ServiceMenu">
    <li class="ServiceMenuItem"><a href="Pages/Service1.html>Service1</a></li>
    <li class="ServiceMenuItem"><a href="Pages/Service2.html>Service2</a></li>
    <li class="ServiceMenuItem"><a href="Pages/Service3.html>Service3</a></li>
    <li class="ServiceMenuItem"><a href="Pages/Service4.html>Service4</a></li>
</ul>

.ServiceMenu {
    margin: 0;
    width: 100% !important;
    height: 42px !important;
    display: block;
    border-top: 1px solid #0054a6;
    border-bottom: 1px solid #0054a6;
    background-repeat: repeat-x;
    background: transparent url("Images/ServiceMenuBG.png");
}
.ServiceMenuItem { display: inline-block; text-align: center; }
.ServiceMenuItem a, .ServiceMenuItem a:link, .ServiceMenuItem a:visited {
    color: #ffffff;
    padding: 11px 0 0 0;
    font-weight: bold;
    text-decoration: none;
    margin: -1px -2px;
    display: block;
    height: 31px !important;
    width: 198px !important;
    background-repeat: repeat-x;
    background: transparent url("ServiceMenuBG.png");
}
.ServiceMenuItem a:hover {
    color: #000000;
    background-position: 0 -42px;
    border-color: #999999;
}

I would decrease the margin in the .ServiceMenuItem a... styles, but this results in the right border disappearing on the hover.

So how do I set this up so that I have 1px borders without overlapping or "collision" of the vertical borders?

Answer 1

first of all your code seems to have errors. The URLs in the unordered list have no closing quotes ("). Then the image you are loading in CSS seems to be the same image yet once from an image folder and the other doesnt have it, that might not be your intention.

Anyway to fix your problem, give ".ServiceMenuItem a" a "border-right" with one pixel and desired color when not hovering. can be same color as image so that it is not visible. Then give the first list item an id. In you CSS add the id and give this a "border-left" which resembles the right borders of the other list items. under the hover, simply change the border-left and the border-right colors to the correct hover color, for top and border borders you can add them to the same ".ServiceMenuItem a" for better control.

Now you have a single border for each item on the right except for the first item which should have two borders, one covering the left side