CSS coding help please.

[Emiryal]

I hope I put this in the right spot. If not please move it to where it belongs.

Anyways, I know a fair amount of CSS but I can't figure out how to get the menu to look the way I want it to.

I want it to look like this.


so the menu should be 30px tall max and have a border around each link. (I know it doesn't look pretty but it's what the members on my forum want.)

Whenever I try to do this I have no margins between the borders and I can't control the height. below is what happened when I attempted to do this. What part of the CSS style do I need to edit to do this?



This is what I've changed so far in my attempt to do this.


#navigation-menu > ul li a { display: inline-block; padding: 5px; color: #000000; border: #000 1px solid; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 30px !important; }

[Brian]

Hi, Emiryal.

You should simply be able to add a margin to the <li> elements that contain the links. Adding this to the bottom of your style sheet should take care of that.

#navigation-menu li { margin: 0 1px !important; }

[Emiryal]

thank you so much, that worked perfectly!