Hyperlink clickable area is incorrect in FF 2.0.0.9

[breakupemail]

Hello, on my website at http://www.breakupemail.com/ there is a horizontal navigation bar with 6 hyperlinks. Recently, I added a second navigation row below the first, with 2 links. Once this second navigation bar was added, the clickable area on the 6 links in the top row became greatly reduced when viewed in Firefox 2.0.0.9. It seems to work properly in IE 7.

Essentially, if you hold your mouse over the center of the text link, it will not act as a hyperlink - you need to position the mouse over the bottom part of the text.

The html code for the links section is:

    <div id="linkbar">
        <div id="navcontainer">
            <ul id="navlist">
                <li id="active"><a href="index.php" id="current">Home</a></li>
                <li><a href="dump.php">Break up with him/her</a></li>
                <li><a href="faq.php">FAQ</a></li>
                <li><a href="contact.php">Contact</a></li>
                <li><a href="links.php">Links</a></li>
                <li><a href="http://digg.com/submit?phase=2&url=http://breakupemail.com&title=BreakUpEmail&
bodytext=Breaking%20up%20is%20easier%20than%20ever&topic=programming">Digg It!</a></li>
            </ul>
        </div>
        <div id="lowerlinkbar">
            <div id="lowernavcontainer">
                <ul id="navlist">
                    <li id="active"><a href="http://breakupemail.com/" id="current">BreakUpEmail.com</a></li>
                    <li><a href="http://quitmyjobemail.com/">QuitMyJobEmail.com</a></li>
                </ul>
            </div>
        </div>
    </div>

The CSS that applies to this section is:

#linkbar {
    background-image: url(images/linkbar_bg.jpg);
    background-repeat: repeat-x;
    height: 59px;
}
 
/******************** Top Main Navigation ************************/
 
#navcontainer ul
{
    background-color: #46d0fd;
    float: left;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    background-image: url(images/linkbar_bg.jpg);
    background-repeat: repeat-x;
    height: 59px;
}
 
#navcontainer ul li {
    display: inline;
}
 
#navcontainer ul li a {
    padding: 21px 20px 0px 20px;
    color: #fff;
    text-decoration: none;
    float: left;
}
 
#navcontainer ul li a:hover {
    background-image: url(images/hover_link_bg.jpg);
    background-repeat: repeat-x;
    height: 35px;
    color: #FFFFFF;
}
 
/********************* End top navigation ***************************/
 
#lowerlinkbar {
    height: 30px;
    position: relative;
    margin: 0 250px 0 0;
}
 
/******************** Lower Linkbar Navigation ************************/
 
#lowernavcontainer ul
{
    float: right;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    height: 22px;
    margin: 6px 0 0 20px;
}
 
#lowernavcontainer ul li {
    display: inline;
}
 
#lowernavcontainer ul li a {
    padding: 8px 20px 0px 20px;
    color: #03687e;
    text-decoration: none;
    float: right;
}
 
#lowernavcontainer ul li a:hover {
    background-image: url(images/lowerhover_link_bg.jpg);
    background-repeat: repeat-x;
    height: 30px;
    color: #73b7e6;
}
 
/******************** End Lower Linkbar Navigation ************************/

Can anyone spot the mistake I've made and offer some suggestion as to how I might correct it? Any help will be greatly appreciated!

[drhowarddrfine]

First, you have at least 17 html errors on your page including the use of multiple 'id' names. ids can only be unique to one element on a page. These need fixing.

[garrow]

First thing
I think you use too many divs, too many IDs when you should be using classes.
Remember, an ID is for a single element on a page, and classes are for multiple elements.

There is no height set on the main nav anchors. except on hover.
Add

#navcontainer ul li a {
    height: 35px; 
}

Also remove the following height declaration, its adding 30pxs of unclickable element above your main nav.

#lowerlinkbar {
    height: 30px; 
    position: relative;
    margin: 0 250px 0 0;
}

Too see all this in action, try adding a 1px solid red border to elements that dont appear to be working. you'll quickly see why.

Also use firefox, with WebDeveloper Toolbar or Firebug plugins.
Your sanity will thank you.

And stop using so many empty divs.

[breakupemail]

Sorry for the coding errors and extra divs, I've got a bit of learning to do but thanks to both of you for pointing that out and especially for the solution to the problem with the height attributes! Now the links work perfectly!

Thanks a million!