min-height in IE

cgallagr98 · February 4th, 2005, 11:56 AM

Hi All,

I have created a cross-browser template that uses an external style sheet to position layers and text. I need to find a workaround for the min-height tag as it applies to the main content layer of a webpage. It looks fine in Firefox and Netscape but in IE it ends up being too short since the min-height only applies to table attributes in IE. Can anyone show me a work around without using tables in the layer? This thing needs to be 508 also. Regards,

Chris G.

beckfield · March 22nd, 2005, 04:27 PM

I was looking for something else entirely, and came across this, which may answer your question:

http://www.greywyvern.com/code/min-height-hack

What does "508" mean?

Hope it helps.

richard.york · March 22nd, 2005, 09:48 PM

508 means it needs to be an accessible website for people with disabilities. It would need to be friendly to screen readers, use a color-blindness acceptable color scheme, have an adjustable template with regards to font size, etc, etc.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

beckfield · March 23rd, 2005, 08:02 PM

Ah, thanks, Richard.

sonofsanta · April 7th, 2005, 05:04 PM

That solution's pretty messy, and requires extra mark-up. The easiest way to deal with this is to realise that IE, in all it's glory, treats

Code:

height

as

Code:

min-height

Who knows why. The only problem is getting it to IE alone, but that's pretty easy due to IE's * selector.

If this is your HTML then:

Code:

    <div class="content">
        Content here.
    </div>

...your CSS would be:

Code:

div.content {
    min-height: 500px;}    /* for compliant browsers */
* html div.content {
    height: 500px;}     /* for IE only. * html is only recognised by IE */

You can use any height, obviously, 500px is just an example. I'm not definite on the backwards compatibility for versions of IE, as far as the * selector goes - but older versions often have their own hacks anyway to target them specifically. This is a lot neater and entirely compliant though, and is really only 2 more lines of basic CSS. Score :)

richard.york · April 8th, 2005, 12:47 PM

I'm pretty skeptical of hacks like this one:

* html div.content {
height: 500px;} /* for IE only. * html is only recognised by IE */

What if this bug is fixed in IE7? (The bug that says that the <html> element has a parent element, not the bug that makes height behave like min-height).

Personally, I think it's best to contain IE-specific fixes in style sheets included via conditional comments.



That ensures that bug fixes for IE 6 (and less) will always work only for those browsers. When IE7 rolls around I'll have to re-evaluate my style sheets anyway, cause it's sure to come with its own breed of bugs.

Peter-Paul Koch shares some of my views in this excellent article on Quirksmode.org:
http://www.quirksmode.org/css/csshacks.html

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design