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:

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.

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

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


All times are GMT -4. The time now is 09:04 AM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.