Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    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

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #3
    New Coder
    Join Date
    Jun 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh, and if that doesn't help it may be mozilla leaving space for a scrollbar.
    Once I thought I was wrong but I was mistaken.

  • #6
    New Coder
    Join Date
    Jun 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •