Question

i am trying to build a basic hover menu with blank background images and text.

I have created two images with normal and hover state, and for the text the code is in a table with one row and multiple td’s. This is an example of one:

                            <td align="center">
                            <div id=menu>
                               <ul style="padding:0px;">
                                 <li><a href="#">WHO WE ARE</a></li>
                               </ul>
                            </div>

I have a CSS running to control the hover color and background change.

#menu ul li{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#666;
display:block;
background-image:url(resource/try.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#FFF;
display:block;
background-image:url(resource/try2.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:visited{
text-decoration:none;
color:#666;
}

The problem is that although all this works fine my text is aligned to the top and i am unable to change its position

I have tried every possible trick, worked with vertical-align property but it doesn’t seem to work.

Could any one help me with this please?

Thanks in advance.

Answer 1

you need to add line-height for everything