can't set div max-height in IE

**gib65** · 03-12-2012, 03:54 PM

I have a div whose maximum height I'm setting as follows:

div
{
max-height: 50px;
overflow: hidden;
}

This makes it so that any content whose height spans beyond 50px will not be completely visible (i.e. it will overflow below the bottom border of the div where it will not be seen).

This seems to work in Firefox but not in IE. In IE, the div still stretches beyond the height of 50px to make room for its contents such that everything is visible.

How can I enforce the maximum height in IE?

**jscheuer1** · 03-12-2012, 04:41 PM

Starting in version 7 IE supports max-height, but only if the page has a standards invoking DOCTYPE.

If you're in standards mode, you must be testing in IE 6 or less. Or you're in quirks mode. Which is it?

I ask because the fix is different depending upon the DOCTYPE and which mode the page is in.

**gib65** · 03-13-2012, 09:58 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

It magically started working now, so I guess the problem is solved.

**jscheuer1** · 03-14-2012, 02:14 AM

Actually, that DOCTYPE is a quirks mode DOCTYPE, so perhaps you switched the mode in your browser. If that's what happened, you cannot rely upon your users to do so.

The closest standards invoking DOCTYPE to the one listed in your post is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Though many prefer the more succinct HTML 5 DOCTYPE:

Code:

<!DOCTYPE html>

Thread: can't set div max-height in IE

Thread Tools

Search Thread

can't set div max-height in IE

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions