...

View Full Version : Help with spacing between vertically stacked images in mozilla



cathode
08-12-2005, 09:03 PM
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 :)

Tristan Gray
08-12-2005, 09: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, 09: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, 09: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, 09:34 PM
Oh, and if that doesn't help it may be mozilla leaving space for a scrollbar.

cathode
08-12-2005, 10: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, 01: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:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum