SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: TD cell heights

Hybrid View

  1. #1
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TD cell heights

    IE6 does not seem to respond to the following; it allows the cell height to stretch if the entire table is not >the screen height:
    Code:
    TD.title { 
    height: 80px; 
    }
    Mozilla 1.3.1 and Opera 7.11 both seem quite happy.

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE treats height/width the same way Mozilla/Opera treat min-height/min-width.

    Something to keep in mind.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Lange
    IE treats height/width the same way Mozilla/Opera treat min-height/min-width.

    Something to keep in mind.
    OK, so now I'm gonna be thick... How does Mozilla/Opera treat min-height/min-width?

  4. #4
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by themissingelf
    OK, so now I'm gonna be thick... How does Mozilla/Opera treat min-height/min-width?
    That is will let content overflow if there is "more" of it that the height will allow. If you put height into mozilla it will stay at that height

  5. #5
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. So perhaps the most reliable way of managing a table cell height is to revert to the height attribute in the tag?

  6. #6
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, there technically isn't a height attribute for table cells at all as it's depreciated, but anywho

    The method I have found that works is to use both in your styles:

    Height: 10px;
    min-height: 10px;

    IE will use the first one and NS will override it with the 2nd

  7. #7
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    The method I have found that works is to use both in your styles:

    Height: 10px;
    min-height: 10px;

    IE will use the first one and NS will override it with the 2nd
    The only problem with that is that while IE will stretch the height to accommodate the content Gecko won't, as it is in the example Gecko will always set the element to 10px high. One way around it, if stretching is required, is to override the initial style definition (containing height:Xpx; for the benefit of IE) by using a child selector containing height:auto; min-height:Xpx; for Gecko.

    eg

    #example { height: 50px; }
    html>body #example { height: auto; min-height: 50px; }

    If stretching isn't required/wanted then using overflow:auto; is good.

  8. #8
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stretching is NOT required. I want to limit the 'TD.title' to 80px in height.

    Also, I've not quite got to grips with the "html>body" spec in CSS. What does this do?

  9. #9
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    html>body selects the direct child "body" of the "html" element. It's used because Internet Explorer doesn't understand it, so you can send some code to Internet Explorer, and override it using this selector for other browsers.

    To limit the height to 80px, you may need to set the overflow style so it will clip (that is the content of the container will not be rendered outside it's dimensions. overflow:hidden is the property you're looking for). I think that should do it.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!


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
  •