Images in HTML why the padding?

[MR_MAN]

Hello.

I have a problem with some images in IE and not Mozilla.

I currently have a td with a background image using this code:-
< td height="150px" valign="middle" style="background: url(images); background-repeat: no-repeat; padding:0px; background-position: center center;" >

I have then placed another image on top of that using this code:-
< a href="./index.php?product_id=<? print $rstMain[product_id];?>&option=Prod_detail&image_id=<? print $rstPicsR['image_id'];?>">
< img src="./images/<? print $ecom_hostname ?>/site_images/catbackgr2.gif" style="padding:0px;" alt="<? print $rstMain['pname'];?>" border="0" hspace="0" vspace="0" >< /a >

In mozilla the image line up perfectly but in IE the background image seems to slip down an extra two points. I think its because the top image it exactly the same size as the background image and the must be a thing in ie that pads images. i have set padding to 0 every where and border to 0 but that don't make any difference.

If you don't know what i mean then i can send you the images from a print screen but i din't have anywhere to host them or i would.

If you don't know what i am talking about please say and i will try and explain better.

Cheers
Stuart

[Solarfish]

Have you tried cellpadding="0"? I have used that before in the table tag to help align images.

[Phayze]

Try margin:0; on your image too, although I've found that IE will always add a 3px margin on the right and bottom when you make that image a link. I've always got round it by using an IE hack to move other things about though...

[MR_MAN]

Cheers. I have tried those but still not in sink.

[TheoGB]

Make the TD dimensions the EXACT dimensions of the image and that might do it.

[MR_MAN]

Thanks But that didn't work either. I don't know why. i have set the td and the table to 150 by 150 and the top image is set to 150 by 150 but it it still not working.

[MR_MAN]

http://demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/both.jpg
this is what i am getting
these are what i am using the background image is:- http://demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/football.jpg
and the forground is. http://demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/catbackgr2.gif. the code i am using is this:-

< table width="150px" height="150px" align="center" border="0" cellpadding="0" cellspacing="0">
< tr>
< td height="150px" width="150px" valign="top" align="center" style="padding:0px; margin:0px; border:0px; background: url(demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/football.jpg) no-repeat center center; ">
< a href="#">
< img height="150px" width="150px" src="demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/catbackgr2.gif" style="padding:0px; margin:0px; border:0px;" alt="test" border="0" hspace="0" vspace="0"></a>
< /td>
< /tr>
< /table>

[Phayze]

Change

background: url(demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/football.jpg) no-repeat center center;

to

background: url(demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/football.jpg) no-repeat top left;

[MR_MAN]

That works but the problem is if i have a smaller image (this is all dynamic so i could have a large image 150 by 150 or a small image 50 by 50) it would appear in the top left and not the center of the box

[Phayze]

It's a whitespace issue - use

< table width="150px" height="150px" align="center" border="0" cellpadding="0" cellspacing="0">
< tr>
< td height="150px" width="150px" valign="top" align="center" style="padding:0px; margin:0px; border:0px; background: url(demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/football.jpg) no-repeat 50% 50%; ">< a href="#">< img height="150px" width="150px" src="demo9.b-shop.co.uk/images/demo9.b-shop.co.uk/catbackgr2.gif" style="padding:0px; margin:0px; border:0px;" alt="test" border="0" hspace="0" vspace="0">< /a>< /td>
< /tr>
< /table>

and it's fine.

[MR_MAN]

Thanks Phayze.
I think i would have been still be trying to sort this out At Christmas