Padding css inside image? why isn't it working?

HTML & CSS
1

html:

	
        <table>
	<tr>
		<td><div class="menu_single"><span>Main Page</span></div></td>
		<td><div class="menu_single"><span>Secondary Page</span></div></td>
	</tr>
	</table>

Css:

.menu_single { display: block; width:97px; height:42px; background-image: url('menutop.png'); background-repeat:no-repeat;  }

.menu_single span { text-align: right; font-size: 14px; font-style:italic; color: #fff; [B][COLOR="#FF0000"]padding-top:10px; padding-right: 10px;[/COLOR][/B] }

i am trying to center my text on the picture… but the padding seems not to work… whats the problem here?

2

It’s hard to help because I can’t see the image. Can you provide a direct link to the image? Additionally, it looks as though you are attempting to create a navigation menu in a table. I would strongly suggest avoiding tables for this, as tables are not meant for it, and have a behavior that can work against you (like not being able to set margins between cells, so always being stuck only with padding.) I would suggest using a UL (list) to create your navigation.

3

http://winnertip.co.il/images/menutop.png
trying to write on it…

4

I presume that despite the post tirle you are talking about a background image inside an element and not padding for an IMG tag.

#1 your padding isn’t working as expected because you are applying it to an inline element. Add display:block to .menu_single span {} and your padding will “show up”.
#2 this leads me to ask why did you add the span to begin with? ( you could concatenate the style of the span into .menu_single {} and streamline your code ( unless there was an actual reason for the div…)
#3 I don’t know if you were trying to horizontally center your text as well but {text-align: right; } won’t help on that :wink:
#4 if this a navigation menu you should use a UL instead of a TABLE ( actually, you shouldn’t use table for layouts at all)
#5 setting font-size in pxs CAN be bad for accessibility.

my suggestion would be to do this:

	<ul id="nav">
		<li><a href="#">Main Page</a></li>
		<li><a href="#">Secondary Page</a></li>
		<li><a href="#">Third Page</a></li>
	</ul>

#nav {overflow:hidden; padding:0; list-style:none;}
#nav li { width:77px; height:22px; background: url('menutop.png') no-repeat;  padding:10px; text-align:center;}
#nav li a{  font-size: 14px; font-style:italic; color: #fff; }

ADEDUM
just saw your image…

have you considered using the red/yellow line as a continuous BG and the left arrow by itself, or is there some reason why each button MUST be 97px x 42px?

5

You don’t need to use padding to center text in a table vertically. That’s the default. So you don’t need a special div or span to do that, you just put the text in there. Then you create the class applied to the <table> element which controls the td (.menu_single td {}) and take all the values of both the classes and put them in that single selector in the brackets. That is how you style a table.

But it is a bad practice to do it for what you are attempting: navigation. Use a list! It is much easier to control the layout. There are many tutorials out there about that. It will make for less code and less hassle. Here is an example: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/