Help with spacing between vertically stacked images in mozilla

Hello,
I am having a problem with a space above and below vertically stacked images in Mozilla:

<div class="centerer"><img src="images/image.jpg" /><img src="images/image.jpg" /><table border="0" cellspacing="0" cellpadding="0">
... (table content ) ...
</table>
</div>


I have also tried it like this, with the addition of BR's:
<div class="centerer"><img src="images/image.jpg" /><br /><img src="images/image.jpg" /><br /><table border="0" cellspacing="0" cellpadding="0">
... (table content ) ...
</table>
</div>

Note that I have no line breaks in between the tags. It looks fine in IE 6 but not mozilla... there's no padding or anything set for images.

Any ideas?
Thanks :)

You need to set the padding to 0px otherwise the browsers will add default padding. So you MUST define no padding if that is what you wish.

Hey,
Thanks for the response:

I tried this in the css:

img {
padding: 0 0 0 0;
}

But that didn't help. Do I need to wrap the images in a zero padding span or div just to get that?

Try adding:

HTML { padding: 0px; margin: 0px; }

Body { padding: 0px; margin: 0px; }

img { padding: 0px; margin: 0px; }


In my opinion you should always put the units even after a null value. Also, no need to define each padding separately if they are all to be set to zero just use padding: 0px; same goes for margin. I'm done here at work so good luck, I'm off like a prom dress to drink Absinthe and coward from this foul year of our Lord.

Oh, and if that doesn't help it may be mozilla leaving space for a scrollbar.

Thanks for your help!

Even though I wish that I didn't have to complexify things, I ended up using yet another div that set the line-spacing to 0.

Imaes are displayed inline by default (no line breaks). If you want to stack some vertically without using <br>s, you would do something like this:

HTML:

<img src="example.gif" width="100" height="100" alt="a photo of something" />
<img src="example.gif" width="100" height="100" alt="a photo of something" />
<img src="example.gif" width="100" height="100" alt="a photo of something" />
<img src="example.gif" width="100" height="100" alt="a photo of something" />

CSS:

img {
display: block;
padding: 0;
margin: 0;
}


Line-height, spacing, etc. affects inline elements, so once you set the display to block you shouldn't need that anymore. Also, make sure you're using a correct DOCTYPE or IE and Mozilla are going to have plenty of other inconsistencies.

Hope this helps...