Horizontal menu spacer - please help

Hey peeps

Can someone please help me implement a menu spacer?

This is the first template I have ever coded (I usually leave it for my programmer) but I decided it was time to learn how to do it too.

I am using CSS to style everything.

I need the menu in this website to look like this [URL=“http://www.brisbanemedia.com.au/casafin”]design

I tried the border-left: 1px solid #; border-right: 1px solid # method but the height of these borders are the same as the text and I need them to fill the height of the menu (47px). See ^ design for preview.

Any light on this? I have tried searching on Sitepoint and in Google for help but can’t find much.

Existing code:

#menu {
background-image:url(‘images/menu_bg.png’);
background-repeat:repeat-x;
width: 863px;
height: 47px;
}

ul{
list-style-type:none;
padding-left: 0px;
padding-top: 12px;
margin: 0px
}

li{
display:inline;
padding: 0px;
margin: 0px
}

.menutext {
font-family: calibri,arial;
font-size: 14pt;
color: #FFFFFF;
padding-left: 50px
}

.menutext A:link {color: #FFFFFF;}
.menutext A:link {text-decoration: none;}
.menutext A:visited {color: #FFFFFF;}
.menutext A:visited {text-decoration: none;}

I tried to view source code but that was not very informative. You didn’t mention where you tried applying the border attribute.

I’d have thought if used within the ID “menu” you would have had full height border. If in your list tags, then it’d follow text content I think.

Thanks for taking a look, I ended up annoying my programmer to help me though. :smiley:
I will paste the html/css in here shortly for anyone else who wants a horizontal menu with a gradient background and a ‘indented’ looking spacer.