Help with spacing between vertically stacked images in mozilla

cathode · 08-12-2005, 08:03 PM

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

Code:

<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:

Code:

<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

Tristan Gray · 08-12-2005, 08:20 PM

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.

cathode · 08-12-2005, 08:24 PM

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?

Tristan Gray · 08-12-2005, 08:33 PM

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.

Tristan Gray · 08-12-2005, 08:34 PM

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

cathode · 08-12-2005, 09:50 PM

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.

rmedek · 08-13-2005, 12:06 AM

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:

Code:

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...