max-height

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

"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 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.

--
Yours
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

"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 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" <> 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 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 <> 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 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 wrote:

> 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.

And your code is the one, I this afternoon implemented as you can se at
http://hjemmesideskolen.dk/html/testsider/maxheight.asp

It works exactly like I wanted.

--
Yours
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk