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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Div is made taller than the only thing it contains in IE...

    Hi,

    In Firefox the DIV expands to contain the image perfect with no border on it, but in IE there is a small strip of RED border at the bottom. I made it red to stand out. Any idea why IE makes the DIV larger than necessary??

    Thanks,

    Alan


    Code:
    body
      { 
        background: #000000;
        text-align: center;
      }
    
    .body
      {
        width: 975px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background: #ff0000;
      }
    
    
    
    <html>
      <head>
        <title>My Title</title>
        <link rel="stylesheet" type="text/css" href="index.css">
      </head>
      <body>
        <div class="body">
          <img src="header.jpg">
          <div class="body2">
          </div>
          <div class="body3">
          </div>
        </div>
      </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,228
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Try putting this:
    Code:
    img {display:block}
    in your CSS. IE has a nasty habit that way...

    Dave

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post
    you might be better served making header.jpg a bg image:

    of course, use the actual height and width of header.jpg:
    Code:
    #banner { width:100px; height:20px; background:url('header.jpg'); }
    Code:
    <html>
      <head>
        <title>My Title</title>
        <link rel="stylesheet" type="text/css" href="index.css">
      </head>
      <body>
        <div class="body">
    
          
          <div id="banner"></div> <!-- this is my banner img -->
    
          <div class="body2">
          </div>
          <div class="body3">
          </div>
        </div>
      </body>
    </html>

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by tracknut View Post
    Try putting this:
    Code:
    img {display:block}
    in your CSS. IE has a nasty habit that way...

    Dave
    I agree with the solution (maybe with a margin:0 auto in order to center the picture), but it's more related to the doctype (and the rendering engine choice) then the "nasty" IE

    If you add a XHTML 1.0 or HTML 4.01 transitional doctype, the "problem" will not appear in IE as well in FF. If you use the strict one, or HTML5, the "problem" will be there in FF also. I guess it's about the presence or not for the space under the text baseline.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the tips everyone - that worked great.

    I'm new at CSS, but trying to learn.

    Thanks,

    Alan


  •  

    Posting Permissions

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