okstated

Hi,

I'm trying to make a menu within a template I'm creating that looks as though the buttons and their text are rising up off the page. To do this I am trying to change the padding around the text so that it will move with the button. This works exactly as it should in IE6, but in firefox the padding is added to the overall width and height of the button and thus ruins the look of the menu. The menu button widths and heights are larger than they should be and when they are moused over they make the entire page spasm. Can anyone help?

I'm attaching a picture to better illustrate the problem. This only happens in firefox while IE6 keeps everthing in place. Thanks for any assistance.

Here is my menu css:


/* ##################### NAVIGATION ##################### */

.mainlevel {
text-align : left;
width : 168px;
display : block;
}

a.mainlevel:link, a.mainlevel:visited {
font-size : 13px;
background : url(../images/tab.jpg) no-repeat;
color : #cccccc;
text-decoration : none;
font-weight : bold;
height : 55px;
padding-top : 22px;
padding-left : 20px;
}

a.mainlevel:hover {
font-size : 13px;
background : url(../images/tab2.jpg) no-repeat;
color : #00ff00;
text-decoration : none;
font-weight : bold;
height : 55px;
padding-top : 12px;
padding-left : 12px;
}

.sublevel {
font-size : 10px;
margin-left: 5px;
}