SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed height for a cell irrespective of character height

    I have <td class="Heading1">Heading</td>
    My CSS file is actually a php file that sends the header Content-Type as text/css.

    My font size will vary depeding on the language.
    I want that row (<td></td>) height to be constant no matter what.
    For english characters its fine but for non-english characters (Hindi here specifically) I changed the font size to 18px to make the lettering more readable but the row height increases - ok - even if the size was 16px still the height increases ! This is because the height of the character is higher that the english ones. - This I figured by selecting it and the selection was high in height. But this is making my row heading border enlarged which I dont want.
    Is there any way to fix the height to a specified value even if the font-size is bigger ?

    Code:
    .clsNewsHead1
     <?
     {
     echo 'font-size:';
     switch ($_GET['lang'])
      {
             case "hi":    echo "18px;\n";break;
             default:      echo "16px;\n";break;
      }
     ?>
     font-weight:bold;
     font-family: 'Times New Roman', Arial, Helvetica, sans-serif, Verdana;
     background-color:#dcdcdc;
     border:2px groove #cccccc;
     height:25px;
     }
    height:25px; is not having the height fixed to 25 if th char height is more.

    Thanks
    Anjanesh

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .Heading1 {line-height:25px}
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so very much - cannot believe it was so simple. I checked w3c's css section but other than height I could not figure out anything more.
    Guess I would have interpreted line-height to do something with the height of some line tag etc.

    BTW what is the difference b/w height and line-height ?
    When and where are these to be applied separately ?

    Thanks
    Anjanesh

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The line-height specifies the distance between the baselines of two consecutive lines of text. The greater the line-height, the more 'space' you get between the lines. This is used to control what typographers call (half-)leading.

    Most browsers have a default line-height of 1.2, which means that for a 16px default font, the line height is 19px. Any extra space created by line-height is distributed equally above and below the font's ascenders and descenders, or, to put it more simply: the text is vertically centred within the specified line-height.

    You normally specify line-height as a number (e.g. 1.5) or in ems (e.g. 1.5em). These are basically equivalent, except when inherited. I've written a fairly detailed blog post about line-height, so I won't go into any more details here.

    If you specify the line height in a fixed unit, such as px or mm, it stays the same regardless of the font size. This is usually very bad, but sometimes it's necessary to achieve a particular effect, like in your case.

    The reason why this affects your table cell is that a table cell will always be tall enough to have room for one line of text, i.e. it will have a min-height equal to the line-height.

    The height property specifies the total content height of an element (and is ignored for inline boxes), so it's very different.
    Birnam wood is come to Dunsinane

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simply put, line-height is the height of one line of text; height is the height of a block or replaced element.

    Read the CSS specifications for more details.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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