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 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Extra blanks w/img in div box

    I'm wondering why there are a couple of pixel's worth of blank space under an image in a div container:

    CSS:
    body {margin: 0px auto;}
    #border_cont {
    margin: 0px auto;
    width: 500px;
    padding: 0px;
    border: 1px solid #ccc;
    }

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><link type="text/css" rel="stylesheet" href="css/no2.css"></head>
    <body>
    <div id="border_cont">
    <img src="images/design/blue_grad.gif">
    </id>
    </body>
    </html>

    The border_cont works fine, but when inserting any image into it, I'm always left with a couple of pixels between the bottom of the image and the bottom of the border_cont border, even though both margin and padding is set to none.

    I've also tried specifying height for the border_cont, but to no avail. Help?

    WinXP/IE6.

  • #2
    New Coder
    Join Date
    Jan 2005
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe because you didn't end the div tag??

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, noticed that, but no change when replacing </div> (don't know where that came from...) with </div>

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your problem is that <img> is an inline tag.

    In your css, you could apply.

    #border_cont img {
    display: block
    }


    Inline elements have a "baseline" of approx. 3px to allow for text and such...like when you use "p" and "j" then go under the baseline.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    That works good, thanks. I also found out that setting the height of the div container works in FF, but not in IE. Not sure which IE bug this is, but read something about a three-pixel jog issue with IE, maybe that's it.

    Thanks again.

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question FF/Opera problem with floats(?) and overlap

    Ignore
    Last edited by kimlb; 02-27-2005 at 02:33 AM.


  •  

    Posting Permissions

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