max-height

Discussion in 'HTML' started by Erik Ginnerskov, Dec 24, 2004.

  1. I have been struggling for some time, trying to make IE behave as if it
    actually understand the css attribute max-height.

    In fireFox this code vill work perfectly:

    <div style="width: 300px; max-height: 60px; overflow:auto">Some
    text</div>

    If the amount of text isn't enough to fill out the space, the box decreases
    til fit the text. If the amount of text exceeds the height defined, the box
    will get a scroll bar.

    IE does not understand that and the height of the box depends solely on the
    amount of content.

    I have come up with a hack (placed in header), that limits the height in IE
    too:

    <!--[if IE]>
    <style type="text/css" media="screen">
    #maxi {
    height:expression(
    document.body.clientHeight > (100/12) *
    parseInt(document.body.currentStyle.fontSize)?
    "60px":
    "auto" );
    }
    </style>
    <![endif]-->

    But when the amount of text doesn't fill out the specified height, all that
    happens is, the scroll bar dissapears. The box is still at the max height.

    Anyone who knows how to make IE do as wanted?

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 24, 2004
    #1
    1. Advertising

  2. Erik Ginnerskov

    Spartanicus Guest

    "Erik Ginnerskov" <> wrote:

    >I have been struggling for some time, trying to make IE behave as if it
    >actually understand the css attribute max-height.


    Google is your friend: http://www.doxdesk.com/software/js/minmax.html

    --
    Spartanicus
    Spartanicus, Dec 24, 2004
    #2
    1. Advertising

  3. Erik Ginnerskov, Dec 24, 2004
    #3
  4. Erik Ginnerskov

    Spartanicus Guest

    "Erik Ginnerskov" <> wrote:

    >>> I have been struggling for some time, trying to make IE behave as if
    >>> it actually understand the css attribute max-height.

    >>
    >> Google is your friend: http://www.doxdesk.com/software/js/minmax.html

    >
    >I actually knew about this javascript solution, but i'd prefer a css
    >solution if possible.


    Not possible. Min/max width/height are typically optional enhancements,
    hence using js to get the old beast into line is appropriate.

    --
    Spartanicus
    Spartanicus, Dec 25, 2004
    #4
  5. Spartanicus wrote:
    >>> http://www.doxdesk.com/software/js/minmax.html

    >>
    >> I actually knew about this javascript solution, but i'd prefer a css
    >> solution if possible.

    >
    > Not possible.


    Well, this isn't 100% css. But it is small and nice. I just found it this
    morning and it works fine in IE:

    <!--[if IE]>
    <style type="text/css" media="screen">
    div.maxi {
    height:expression(
    this.scrollHeight > 60? "60px" : "auto" );
    }
    </style>
    <![endif]-->

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #5
  6. Erik Ginnerskov

    Spartanicus Guest

    "Erik Ginnerskov" <> wrote:

    >>> I actually knew about this javascript solution, but i'd prefer a css
    >>> solution if possible.

    >>
    >> Not possible.

    >
    >Well, this isn't 100% css. But it is small and nice. I just found it this
    >morning and it works fine in IE:
    >
    ><!--[if IE]>
    ><style type="text/css" media="screen">
    >div.maxi {
    >height:expression(
    > this.scrollHeight > 60? "60px" : "auto" );
    >}
    ></style>
    ><![endif]-->


    http://www.spartanicus.utvinternet.ie/test/erik.htm

    --
    Spartanicus
    Spartanicus, Dec 25, 2004
    #6
  7. Erik Ginnerskov

    Dylan Parry Guest

    Spartanicus wrote:

    > http://www.spartanicus.utvinternet.ie/test/erik.htm


    Indeed, this shows that the code obviously doesn't work, but it's easily
    fixed:

    <!--[if IE]>
    <style type="text/css" media="screen">
    div.maxi {
    height:expression(
    this.scrollHeight > 60? "60px" : "auto" );
    overflow:hidden;
    }
    </style>
    <![endif]-->

    IE treats the height as a minimum height, even when the scripting is
    used, as so will expand the division if necessary. Adding the
    overflow:hidden; property tells it not to expand even if necessary.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #7
  8. Erik Ginnerskov

    Spartanicus Guest

    Dylan Parry <> wrote:

    >> http://www.spartanicus.utvinternet.ie/test/erik.htm

    >
    >Indeed, this shows that the code obviously doesn't work, but it's easily
    >fixed:
    >
    ><!--[if IE]>
    ><style type="text/css" media="screen">
    >div.maxi {
    > height:expression(
    > this.scrollHeight > 60? "60px" : "auto" );
    > overflow:hidden;
    >}
    ></style>
    ><![endif]-->
    >
    >IE treats the height as a minimum height, even when the scripting is
    >used, as so will expand the division if necessary. Adding the
    >overflow:hidden; property tells it not to expand even if necessary.


    And that differs from

    <style type="text/css" media="screen">
    div.maxi {
    height:60px;
    overflow:hidden;
    }
    </style>

    how ?

    --
    Spartanicus
    Spartanicus, Dec 25, 2004
    #8
  9. Erik Ginnerskov

    Dylan Parry Guest

    Spartanicus wrote:

    > And that differs from
    >
    > <style type="text/css" media="screen">
    > div.maxi {
    > height:60px;
    > overflow:hidden;
    > }
    > </style>
    >
    > how ?


    Because that code will cause the height to *always* be 60px, even when
    the content is less than 60px high. Whereas the code I gave would allow
    for heights upto and including 60px but no higher.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 25, 2004
    #9
  10. Erik Ginnerskov, Dec 25, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Erik Ginnerskov

    max-height

    Erik Ginnerskov, Dec 24, 2004, in forum: HTML
    Replies:
    0
    Views:
    458
    Erik Ginnerskov
    Dec 24, 2004
  2. Erik Ginnerskov

    max-height

    Erik Ginnerskov, Dec 24, 2004, in forum: HTML
    Replies:
    0
    Views:
    393
    Erik Ginnerskov
    Dec 24, 2004
  3. Summercool
    Replies:
    9
    Views:
    865
    dorayme
    Oct 23, 2007
  4. Greg Ferris

    Textarea max rows and max characters per row

    Greg Ferris, Jan 16, 2004, in forum: Javascript
    Replies:
    2
    Views:
    554
    Greg Ferris
    Jan 16, 2004
  5. kriton
    Replies:
    0
    Views:
    320
    kriton
    Apr 22, 2005
Loading...

Share This Page