p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   CSS Cascading Style Sheets (http://p2p.wrox.com/forumdisplay.php?f=146)
-   -   min-height in IE (http://p2p.wrox.com/showthread.php?t=25077)

cgallagr98 February 4th, 2005 11:56 AM

min-height in IE
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:


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.


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


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:

    <div class="content">
        Content here.

...your CSS would be:

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.

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/styles/ie.styles.css" />

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:


Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

All times are GMT -4. The time now is 10:52 AM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.