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
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts

    default height of empty div

    i have this:
    Code:
    <html>
    <head>
      <title></title>
      
     <style type="text/css">
     
    #header
    {width:80%;height:80px; margin:auto;
    background-color:#c0c0c0;text-align:center;}
      
    .tt
    {width:98%;
    height:2px;
    border-left:2px solid #f00;
    border-right:2px solid #f00;
    margin:0 auto 0 auto;} 
      
      
      </style> 
      
    </head>
    <body>
    
    <div id="header">
    <div class="tt">
     </div>
     <h1>header</h1>
    </div>
    
    </body>
    </html>
    idea is, well, to have div 2px heigh, and while FF does it in desired way, effin IE displays it with some fantom height i cant get rid of.
    if i aply line-height:2px; on that div, it works.
    1.is that what IE default for div wo content is? line height?

    2.having it set on 2px height with line height and playing further with this, i entered some text in that div. now FF display text with "normal" height? it exepts only explicit font-size, ignores line height. why?
    3.is there better, more proper solution? with less code if posible.

    tnx

  2. #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE/Win won't let an element have a height that is less than its line-height. This is because IE treats height the way it should treat min-height, which it doesn't support. (They might have fixed this in IE7 beta 2.)
    You can decrease the font-size and line-height OR use overflow:hidden.

    2) When I set height:2px line-height seems to work still in FF.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  3. #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I set height:2px line-height seems to work still in FF
    yes, lol, it stil works on that div, but if i have some text in that div, like:

    Code:
    .tt{width:98%;
    height:2px;
    border-left:2px solid #f00;
    border-right:2px solid #f00;
    margin:0 auto 0 auto;
    line-height:2px;
    } 
    
    <!--and down there:-->
    
    
    <div id="header">
    <div class="tt">tiny text afhakakjgha
     </div>
     <h1>header</h1>
    </div>
    that text "tiny text afhakakjgha" will display in full size, while div (apears to at least) remains 2px high. IE shrinks the text with line height, FF needs font size.

  4. #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Line-height doesn't shrink the text it just cuts off what can't fit. I see no sane reason for putting text in a div that is 2px high.
    Last edited by _Aerospace_Eng_; 03-02-2006 at 10:32 PM.

  5. #5
    Regular Coder
    Join Date
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks guys
    well, dunno, heres how i see it (ff 1.5/win) with set line height but without set font size:
    http://h1.ripway.com/orcrist/untitled33.PNG
    but ill take your word for it and check later on different box.

    reason, lol, no, not a sane one at all maybe graficless grafic or somtin, just playing


 

Posting Permissions

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