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
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Minimum height for div appears to be 20px ... ??

    Hi,

    I'm experiencing a weird problem: I've got some divs that I assign a certain height to via css:

    Code:
        <div id="header">
          <div id="header1">
          </div>
          <div id="header2">
          </div>
          <div id="header3">
          </div>
          <div id="header4">
          </div>
          <div id="header5">
          </div>
        </div>
    Code:
    * {
      margin: 0px;
      padding: 0px;
      border: solid 1px; /*for debugging*/
    }
    
    body {
      margin: 0px;
      padding: 0px;
    }
    
    #header {
      width: 100%;
      background: url(./graphics/header_background.jpg);
    }
    
    #header1 {
      width: 100%;
      height: 54px;
      background: url(./graphics/header1.jpg) no-repeat;
    }
    
    #header2 {
      width: 100%px;
      height: 90px;
      background: url(./graphics/header2.jpg) no-repeat;
    }
    
    #header3 {
      width: 100%;
      height: 10px;
      background: url(./graphics/header3.jpg) no-repeat;
    }
    
    #header4 {
      width: 100%;
      height: 21px;
      background: url(./graphics/header4.jpg) no-repeat;
    }
    
    #header5 {
      width: 100%;
      height: 6px;
      background: url(./graphics/header5.jpg) no-repeat;
    }
    Now what happens is that div 3 and div 4 have a height of 20px instead of the expected 10px and 6px. It seems as if the minimum height for a div is 20px. I can't remember ever having read about this minimum, so I guess something else must be wrong in my style sheet. Anyone any ideas?

    Thanx, Michiel

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    #header4 {
        font-size:0;
        line-height:0;
    }
    Or just put the opening and closing tags on the same line without any white-space between them.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    The no-white-space trick doesn't work in this case (in my IE6/Win setup anyway). Setting font-size to 0 works fine. Of course if you need to have text in those boxes, you'll want to set font-size to the appropriate readable size.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    An interesting side-note, if you do set font-size to 0 then put text in, IE still shows the text (albeit at a very unreadable 1px), whereas Mozilla doesn't show the text at all.

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's because IE won't shrink it below 1px.
    Apart from font-size, setting overflow to hidden works:
    Code:
    <div style="font-size:20px;overflow:hidden;height:4px;border:solid 1px windowtext">text</div>
    *this message will self destruct in n-seconds*


  •  

    Posting Permissions

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