How do I style my text padding only inside the mainlevel div-tag?

[supermoos]

Hello
I need to style my menu in the left here: http://lassemoos.com/joomla/index.php?
My text needs to be centered vertically in the buttons using this css code:

Code: Select all

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/button.gif) no-repeat;
	vertical-align: middle;
	font-size: 18px;
	font-weight: normal;
	color: #6e6e6e;
	text-align: left;
	[color=red]padding-top: 8px;[/color]
	padding-left: 30px;
	height: 40px;
	width: 170px;
	text-decoration: none;
}

But this way of doing it also spaces my buttons up to much, I need a 0px spacearea between my buttons, which I get by just changing padding to 0px. But this then ruins my text centering. How do I get both things?

[Jenny]

You can specify padding by using all 4 sides.

padding: 0px 0px 0px 0px;

which is padding: top, right, bottom, left;

[supermoos]

Yes, I know, but thats not what I want to do, I have now totally removed the padding, which gives me the correct spacing between my button images, see: http://lassemoos.com/joomla/index.php?
But, now my text is aligned to the top, instead of center, which is what i essentially need?

[Jenny]

Perhaps it is margins you wish to use to space out the text for the buttons?

[supermoos]

I have now tried to add a margin, and as expected it does the same thing as padding does, if you look at my site now (which has 8px, top-margin) it's the same result as 8 px padding - almost. the point is that it's not working

[Jenny]

Code: Select all

a.mainlevel:link, a.mainlevel:visited {
	display:block;
	background: url(../images/button.gif) no-repeat;
	font-size: 18px;
	font-weight: normal;
	color: #6e6e6e;
	text-align: left ;
	padding: 0px 0px 0px 30px;
        line-height: 30px;
        height: 30px;	
	width: 170px;
	text-decoration: none;

Try that.  For some reason the line height for the menu is a bit wonky.  I don't know if it is the css from the shop affecting it. 

[supermoos]

Although there where a few faults in your code I got it to work, so thank you, it seems that line height does the trick. my code is now:

Code: Select all

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/button.gif) no-repeat;
	vertical-align: middle;
	font-size: 18px;
	font-weight: normal;
	color: #6e6e6e;
	text-align: left;
	padding-left: 30px;
         line-height: 40px;
	height: 40px;
	width: 170px;
	text-decoration: none;
}