max-height

E

Erik Ginnerskov

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?
 
S

Spartanicus

Erik Ginnerskov said:
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.
 
E

Erik Ginnerskov

Spartanicus said:
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]-->
 
D

Dylan Parry

Spartanicus said:

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

Spartanicus

Dylan Parry said:

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 ?
 
D

Dylan Parry

Spartanicus said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top