Simple text positioning in FF and IE

Fine in FF

[MrMessi]

Hi folks

This should be pretty simple so I assume I'm approaching it in the wrong way. I'm setting up a row of icons that need a line of text a few pixels from the bottom of each icon. The icon is set up as cell background like this

<table><tr><td class="icon1">Text here</a></td></tr></table>

and the css is

.icon1{
font-weight:bold;
text-align:center;
background-image: url(icon.jpg);
background-repeat: no-repeat;
width:72px;
height: 92px;
vertical-align:bottom;
padding-bottom:10px;
}

That displays fine in FF and Opera but completely bottom aligned in IE.

Can anyone suggest away of making the text also appear about 10 pixels from the bottom of the icon in IE please?

Cheers!

[quartzy]

If you are going to use vertical align you have to add it to each cell, as this only work on inline elements. Like cell, img, em etc.

[quartzy]

<td class="icon1" style="vertical-align: bottom;">
It is much easier to do it with a div tag, rather than a table for just one cell. You will have to play around a bit, as I am not sure if this works with a class.

[MrMessi]

Thanks but the vertical alignment works fine, the problem is I want to add a few pixels of padding at the bottom of the cell so the text doesn't sit tight against the bottom of the icon.

Cheers

[simonuk]

Decrease the height by the amount of padding needed and then give the td the padding required.

If height:100px and padding-bottom:10px is not enough go

height:90px and padding-bottom:20px

[MrMessi]

Thanks very much Simon, I appreciate you looking at it. That gets the text off the bottom of the icon. There's still a 4 or 5 pixel difference between IE and FF but I think I can live with that unless there's anybody that can have a stab at it.

Cheers

[simonuk]

Could just be a simple padding or margin misalignment somewhere. Grab firebug for FireFox and see if you can spot the problem.

I always start every new project with all tags set to zero margins and paddings (body, div, ul, li etc). That way it is easier for me to style exactly what I want when I want plus I've fixed a lot of problems I used to encounter with cross browser compatibility because everything starts with zero.