Spacing issue of navigational menu items

[mickapoo]

I have a navigational menu with several items. It's hard to explain I guess, without posting the URL you can't see what I'm talking about, but I need the same spacing above and below the "Services" menu item (it's not a link, just text) as there is above and below the other menu items such as "About Us". Right now there is no space above the "Services" text- (between that and the dotted line) and the menu item below it (Financial Acctg & Consulting). I placed the "Services" menu item in it's one class as it does not have the dotted line directly below it as the other menu items do.

Here is an excerpt from the stylesheet:
}

.menu{
padding:0px 0px 40px 0px;
}

a.menu {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}

.menu a:hover{
color:#000000;
}

.menu h3{
color:#381E05;
font-family:Arial, Helvetica, sans-serif;
font-size:28px;
font-weight:100;

}

a.servicesMenu {
padding:7px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}

span.services {
padding:17px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:13px;
}

a.subBottom {
display:block;
background-image:url(../images/menuBg.jpg);
background-position:left bottom;
background-repeat:repeat-x;
padding:0px 0px 7px 0px;
text-decoration:none;
color:#56251E;
font-size:11px;
}

and then here is an excerpt from the HTML file with the menu:

<td class="menu">
<h3>Navigation</h3>
<a href="index.html" class="menu">Home</a>
<a href="about.html" class="menu">About Us</a>
<span class="services">Services</span><br><a href="services.html" class="servicesMenu">Financial Accounting & Consulting</a><br>
<a href="tax.html" class="servicesMenu">Tax & Advisory Services</a><br>
<a href="bookkeeping.html" class="subBottom">Accounting & Bookkeeping Services</a>
<a href="links.html" class="menu">Links/Resources</a>
<a href="contact.html" class="menu">Contact Us</a>
</td>

[D_Blackwell]

I may not correctly understand the question, so the solution may not be appropriate. (May not be appropriate even if I do understand the question, but the hack seems to meet the criteria.

I assume that the dotted lines are from the background-images, so have to kind of guess at what it should look like. (Would {border-bottom: .1em dotted #000;} or some such be workable? Don't know, just asking.)

The display: block; and margin: - hacks will let you move the positioning of "Services".

span.services {
padding:17px 0px 7px 0px;

color:#56251E;
font-size:13px;
display: block; margin: -1em 0;
}

[mickapoo]

I tried as you suggested, and it did fix the space ABOVE Services. It made it the same amount of space between "About" and the dotted line above it. But now, there is a huge space between "Services" and the submenu item directly below it "Financial Accounting..."

Thank you!