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
    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
    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
    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 09:32 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #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
    •