Reduce a white gap between two <hr> tags

Question

I have the following menu

The two lines are both 'hr' tags and the menu is a div containing a ul. I have been googling for a while now and trying adjusting the css with margin and padding but I want to reduce the white space between the lines and the text bringing them closer to the text.

HTML:

<hr id="header_line"/>
<div id="menu_bar">
    <ul>
        <li><a href="#">Add new Form</a></li>
        <li><a href="#">View old forms</a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Site Administration</a></li>
    </ul>
</div>
<hr id="under_menu_line"/>

CSS:

#menu_bar ul {
    list-style:none;
    padding-left:0px;
}

#menu_bar ul li {
    display:inline;
    padding-left:10px;
}

#menu_bar ul li a {
    text-decoration:none;
    color:Black;
    font-family:Century Gothic;
    font-size:12pt;
}

#menu_bar ul li a:hover {
    color:#007C5A;
}

#header_line {
    margin-top:5px;
}

#under_menu_line {
    margin-top:5px;
}

Any ideas?

Answer 1

The best solution would be to drop the <hr>s, and use border-top and border-bottom in conjunction with padding on the div.

<hr> should be used as a horizontal rule. For instance, a hard separation of paragraphs or a long break. And not as a visual element.