Text align issue (css)

[MagSafe]

Hey

I'm having a little issue with these buttons that I've made for a websites primary navigation. As you'll be able to see from the image I can't get the text to vertically align, and have tried everything I can think of to fix it...

...I've not really done them like that before so was hoping someone that has could help out and see if they can think of a fix? So far I've tried vertical-align with css and valign within the td table tag.

Thanks

CSS

#campaigns-menu
{
	background: #658dbd;
}

.campaigns td
{
	margin: 0;
	padding: 0px;
	width: 100px;
	font: normal 8pt arial, helvetica, san-serif;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}

.campaigns a
{
	background: url('graphics/menu/menubackground1.jpg') no-repeat;
	display: block;
	height: 28px;
	text-decoration: none;
}

.campaigns a:hover
{
	background: url('graphics/menu/menubackground2.jpg') no-repeat;
	display: block;
	height: 28px;
	text-decoration: none;
}

HTML

			<div id="campaigns-menu">
				<table class="campaigns">
					<tr>
						<td><img src="graphics/menu/coastalcampaigns.jpg" alt="Coastal Campaigns" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/ecocongregation.jpg" alt="Eco Congregation" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/ecoschools.jpg" alt="Eco Schools" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/keepscotlandtidy.jpg" alt="Keep Scotland Tidy" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/peopleandplaces.jpg" alt="People & Places" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/sustainablescotland.jpg" alt="Sustainable Scotland" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/wasteawarescotland.jpg" alt="Waste Aware Scotland" width="100px" height="80px" /></td>
					</tr>
					
					<tr>
						<td><a style="color: #66B3FF;" href="#">Coastal Campaigns</a></td>
						<td><a style="color: #CC99CC;" href="#">Eco-Congregation</a></td>
						<td><a style="color: #66CC66;" href="#">Eco Schools</a></td>
						<td><a style="color: #66B3FF;" href="#">Keep Scotland Tidy</a></td>
						<td><a style="color: #CC99CC;" href="#">People & Places</a></td>
						<td><a style="color: #66CC66;" href="#">Sustainable Scotland</a></td>
						<td><a style="color: #66B3FF;" href="#">Waste Aware Scotland</a></td>
					</tr>
				</table>
			</div><!-- End of #campaigns-menu -->

 

[MagSafe]

line-height:28px

should sort it.

i thikn

hmm, nice idea but all it's doing is increasing the height of the button and because the background of the <a> links is the image it shows the blue area behind it.

thanks though , i tried -28px and other numbers but it didn't do anything.

 

[MagSafe]

Fixed it , after starting again fresh from an evening of rest and a good night's sleep I found a solution ... thanks to HTMLHugo's line-height. I hadn't heard of that before, but when I first applied it to all of the links it wasen't working.

I tried using the line-height: 28px; again but only on the first 5 with inline css, and it works perfectly now - in both IE and Firefox

Thanks for the help to all the posters,

Steven.