Change Background of Entire Cell on Hover - HELP!

[smanderson16]

I have been trying for hours to get the entire background height of the row to change on hover and it only changes the background of the text. I also want the borders to fill the entire height of the row and it is not working either. Please help if you can.
-------------------------------------------------------------------------

Link to the page is:

http://www.smartsolutionsdesign.com/hightop/

Here is my CSS

body {
background-image: url(../images/pageback.jpg);
background-repeat: repeat-x;
background-color: #002e45;
}

#container {
width: 990px;
background-color: #FFFFFF;
}

#header {
border-top-width: 3px;
border-top-style: solid;
border-top-color: #AED256;
background-image: url(../images/headerback.jpg);
background-repeat: repeat-y;
background-position: right;
height: 108px;

}

#footer {
border-top-width: 3px;
border-top-style: solid;
border-top-color: #AED256;
}

#mainmenu {
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 34px;
background-color: #004462;
text-align: center;
}

#mainmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#mainmenu ul li {
display: inline;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #006699;
}

#mainmenu li a {
color: #FFFFFF;
text-decoration: none;
padding-left: 35px;
padding-right: 35px;
line-height: 3em;
}

#mainmenu li a:hover {
color: #333333;
background-image: url(../images/menuhover.jpg);
background-repeat: repeat-x;
}

#content {

}

#news {

}

#linksarea {

}

#navmessage {

}

#submenu {

}

#topmenu {
text-align: right;
padding-right: 25px;
float: right;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top: 10px;
color: #003366;
text-transform: uppercase;
}

#topmenu a{
color: #003366;
text-decoration: none;
padding-left: 12px;
}

.tagline {
color: #002E45;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding-right: 20%;
float: right;
width: 400px;
padding-top: 45px;
padding-bottom: 0px;
text-align: right;
}

.tagline span{
font-size: 28px;
color: #00486A;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;

}
.logo {
float: left;
padding-left: 15px;
}

[officeli0n]

Smanderson, can you be more specific? Background height is not a property of any web element. The background of the text? Borders to fill the entire height of the row? Are you trying to increase the height of the link div on hover?

Just a little confused!!

[smanderson16]

Sorry for the confusion. If you look at the web page you will see that I have made a bit of progress with it. If you roll over any one of the main menu items, I want the background images to change and fill the entire height/width of the menu item - delineated by the borders. Basically, I am trying to make the links look like buttons.

I added padding around the anchors but I am having a hard time finding the right amount of padding to use.

http://www.smartsolutionsdesign.com/hightop/

[Major Payne]

You must be designing the page in IE because it seems to look and work ok in Firefox. IE 7.0 shows the problems with the links mouseovers.

Ron