Hover BG img not lining up

HTML & CSS
1

Hello,

relatively proficient in css but not getting this:

I have a simple horiz menu that has a rollover image and a font color change. However my text is not in the middle of the bar, so when I give the list any padding or margin, it of course wants to push my hover image down as well. I know I am just missing something simple but my mind is ready to explode looking at this thing for another minute…

I’ll take any help and even a little abuse to get this silly thing working…

Here’s a link to the site that is under construction and the code for the section
http://www.wealthbuildingsystems.com/

#topbar {
background:url(http://www.wealthbuildingsystems.com/wp-content/uploads/2010/11/menu-bar2.png) no-repeat;
height:54px;
width:100%;
margin: 0px 0px 0px 22px;
padding:0px;
}

#topbar ul {
float: left;
width:;
height:56px;
margin: 10px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type: none;
background:;
}

#topbar li {
float: left;
font: 16px Arial, Georgia, ‘Times New Roman’, Times, serif;
color:#fff;
margin: 0px 0px 0px 0px;
float: left;
display: inline;
height:;
width:120px;
background:;
}

#topbar a {
font: 16px Arial, Georgia, ‘Times New Roman’, Times, serif;
float: left;
display: block;
height:56px;
width:120px;
margin:0px 0px 0px 0px;
color: #fff;
text-align:center;
}

#topbar a:hover {
font: 16px Arial, Georgia, ‘Times New Roman’, Times, serif;
float: left;
display:block;
height:;
width:120px;
margin:0px 0px 0px 0px;
color: #ff6600;
text-align:center;
background:url(http://www.wealthbuildingsystems.com/wp-content/uploads/2010/11/btn-hvr.png) no-repeat center center;
}

2

Hi,

For non-wrapping text just set the line-height to the same as the height and the text will automatically be centred.

Don’t duplicate your hover styles, just apply the differences.

e.g.


#topbar a {
    font: 16px Arial, Georgia, 'Times New Roman', Times, serif;
    float: left;
    height:56px;
    [B] line-height:56px;[/B]
    width:120px;
    margin:0;
    color: #fff;
    text-align:center;
}

[B]#topbar a:hover {
    color: #ff6600;
    background:url(http://www.wealthbuildingsystems.com/wp-content/uploads/2010/11/btn-hvr.png) no-repeat center center;
}[/B]

Avoid swapping a new image on hover as that is too slow. You could have added the over state to [URL=“http://www.wealthbuildingsystems.com/wp-content/uploads/2010/11/menu-bar2.png”]the other image as well and the just swapped the background position to show it without incurring a delay.

3

Thank you Paul! It’s this sort of assistance that keeps my faith in humanity alive…

Seriously though…you nailed it and I appreciate your help…here’s wishing you the best