Need CSS workaround for IE 6 ignoring min-height

[Wayfarer]

Hi,

I've got a website (see below) that, among other things, has a database
of quotes. When no quotes are returned from a search, or if there are
only one or two quotes returned, the <div id="content"> needs to be at a
minimum height to avoid mutilating the menu and page presentation. It
works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
workaround? I'd prefer one that doesn't involve javascript, though I'll
use it if I have to.

TIA

 

[Toby A Inkster]

<div id="content"> needs to be at a
minimum height to avoid mutilating the menu and page presentation. It
works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
workaround? I'd prefer one that doesn't involve javascript, though I'll
use it if I have to.

IE doesn't support min-height.

I know you wanted to avoid JavaScript, but there is a possible way to fix
using IE-proprietry extensions to JavaScript.

You can test for the actual height of an element using
document.getElementById('ElementID').offsetHeight and then if this is
found to be less than what you wanted as a minimum, adjust the value of
document.getElementById('ElementID').style.height.

Of course, make sure you do a JavaScript test for the user agent. If
agent != IE, then do nothing.

 

[Eric B. Bednarz]

[...] the <div id="content"> needs to be at a
minimum height to avoid mutilating the menu and page presentation. It
works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
workaround?

M$IE treats the height property incorrectly anyway and stretches a box
to the size that its contents need. You could thusly declare min-height
for browsers that support it and then employ the usual M$ voodoo syntax
[0] to attach style rules to your document that declare height instead.


[0] <http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>

Which is a very entertaining read; to quote the beginning:

| One of the most common operations performed in a Web page is to detect
| the browser type and version.

Know your oxymorons. Barf, barf.

| Browser detection is performed to ensure
| that the content presented to the browser is compatible and renders
| correctly.

Now, *that* explains

Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg,
application/vnd.ms-powerpoint, application/vnd.ms-excel,
application/msword, */*

Chomp, chomp.

 

[kchayka]

I've got a website (see below) that, among other things, has a database
of quotes. When no quotes are returned from a search, or if there are
only one or two quotes returned, the <div id="content"> needs to be at a
minimum height to avoid mutilating the menu and page presentation. It
works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
workaround? I'd prefer one that doesn't involve javascript, though I'll
use it if I have to.

IE's default overflow behavior doesn't follow specs, but will work in
your favor here. Unless the overflow property is specifically set, IE
will ignore the set dimension(s) and expand a box as needed to fit the
content. This means you can set the height property and it will act as
min-height. Just don't set overflow and you should be fine.

* html div#content { height:10em; } /* min-height for IE */

Should work. AFAIK, this particular syntax only works in IE so other
browsers should ignore the rule.
<URL:http://centricle.com/ref/css/filters/tests/star_html/>

 

[DU]

IE's default overflow behavior doesn't follow specs, but will work in
your favor here.

Exactly!

Unless the overflow property is specifically set, IE

will ignore the set dimension(s) and expand a box as needed to fit the
content.

.... except if it is overflow:visible: that's the particular bug in IE.

This means you can set the height property and it will act as

min-height. Just don't set overflow and you should be fine.

He could declare

#quote-container
{
background-color: #ffefd5;
padding: 0.25em 4em 1.5em 4em;
height:10em;
overflow:visible;
/* in IE 6, containing box will stretch in case content overflows */
}

body>div#quote-container
{
min-height:10em;
}

Not tested but it should work.

* html div#content { height:10em; } /* min-height for IE */

Should work. AFAIK, this particular syntax only works in IE so other
browsers should ignore the rule.
<URL:http://centricle.com/ref/css/filters/tests/star_html/>

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html