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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Angry Placing Images in Divs

    Hey guys, please take a look at this page:
    http://www.joelfolio.com/image.html

    As you can see, I've placed an image in a div.
    For some reason this div is showing up with an extra couple of pixels on the bottom (under the image).
    This only occurs in Firefox as far as I can tell. It works fine in Explorer.

    I've tried setting margins and padding to 0px, removing bottom borders. Doing pretty much everything.

    The code is simply:
    Code:
    <div style="background:#3F0"><img src="test.jpg"></div>
    Any ideas how to resolve this?
    Last edited by JoelC; 07-27-2009 at 08:20 PM. Reason: added code

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The gap underneath the img (in everything but IE) correctly allows space for the "tails" of g/j/y etc. You're using a strict doctype - which is fine - this means you need to add display:block to your css/styling for <img> to remove the gap.

    Preferably, add:

    Code:
    img {display:block}
    to your css , or, with your inline styling

    Code:
    <img src="test.jpg" style="display:block"/>

  • Users who have thanked SB65 for this post:

    JoelC (07-26-2009)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the tip!
    It worked
    Last edited by JoelC; 07-26-2009 at 12:52 PM.


  •  

    Tags for this Thread

    Posting Permissions

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