CSS Forum

**Daman** · 01-24-2008, 02:03 PM

Hello,

If you look on the Main Menu on the left on the following link you will notice the text buttons are slightly about vertical center. I have been playing with it and can't find a solutions. What i need to do is move the text 2px down. Any help!?

www.ss-interactive.com

here is the CSS I am using for this Main Menu:

Code:

.width {
	width: 165px;
}
.divider {
	background-image: url(../images/leftNav/div.gif);
	background-repeat: repeat-x;
	width: 129px;
	height: 1px;
	float: left;
	margin-left: 14px;
}
.mainmenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
	height: 17px;
	width: 143px;
	background-color: #75563A;
	float: left;
	background-image: url(../images/leftNav/bullet1.gif);
	background-repeat: no-repeat;
	background-position: 14px center;
	text-indent: 25px;
}
.mainmenu a:link {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
	height: 17px;
	width: 143px;
	background-color: #75563A;
	float: left;
	background-image: url(../images/leftNav/bullet1.gif);
	background-repeat: no-repeat;
	background-position: 14px center;
	text-indent: 25px;
}
.mainmenu a:visited {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
	height: 17px;
	width: 143px;
	background-color: #75563A;
	float: left;
	background-image: url(../images/leftNav/bullet1.gif);
	background-repeat: no-repeat;
	background-position: 14px center;
	text-indent: 25px;
}
.mainmenu a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
	height: 17px;
	width: 143px;
	background-color: #58402B;
	float: left;
	background-image: url(../images/leftNav/bullet1.gif);
	background-repeat: no-repeat;
	background-position: 14px center;
	text-indent: 25px;
}
.mainmenu a:active {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
	height: 17px;
	width: 143px;
	background-color: #D55F3B;
	float: left;
	background-image: url(../images/leftNav/bullet1.gif);
	background-repeat: no-repeat;
	background-position: 14px center;
	text-indent: 25px;
}

**LadynRed** · 01-24-2008, 02:08 PM

First, put a proper DOCTYPE on your pages.

Then try adding some top padding to the <a>

**Daman** · 01-24-2008, 02:15 PM

Thanks LadynRed, but i probably should have mentioned i tried that already and got different results in IE and Firefox. I added the padding now for you to see on the link provided earlier. The box space over laps he dotted line below and there is an space above the box that i dont want. this is tricky.

**LadynRed** · 01-24-2008, 03:13 PM

You still don't have a proper DOCTYPE on your page. Until you add that, IE will operate in QUIRKS mode.. which is not what you want at all.

**Daman** · 01-24-2008, 03:27 PM

I have added the following DOCTYPE:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

As you can see nothing it is distorted in firefox and still looks the same in IE.

**chrishirst** · 01-24-2008, 03:52 PM

and there is your error ...

thinking that IE is right and FF is "broken", it's pretty much always going to be the other way around.

best way is to lose the tables completely and all the deprecated code then redo the layout using CSS.

**Daman** · 01-24-2008, 03:57 PM

I did originally start to design the entire site in CSS but with time restrictions I was forces to use tables. I still have yet to completely design a site in nothing but CSS. I dont have the time to redo everything so i guess I will keep messaging around until i get it. I know I know but its the only way I know how at the moment.

**angele803** · 01-24-2008, 07:08 PM

Did you get this fixed? I looked at it and didn't see anything wrong with it.

**Daman** · 01-24-2008, 07:46 PM

The only thing that centers the text properly is the 2px padding on the top. But the only problem now is the whole box overlaps the dotted divider line and the top has a 2px gab. I'm out of options.