Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 4th, 2005, 11:56 AM
Registered User
 
Join Date: Feb 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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.
 
Old March 22nd, 2005, 04:27 PM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
 
Old March 22nd, 2005, 09:48 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old March 23rd, 2005, 08:02 PM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ah, thanks, Richard.
 
Old April 7th, 2005, 05:04 PM
Registered User
 
Join Date: Apr 2005
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 :)

 
Old April 8th, 2005, 12:47 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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




Similar Threads
Thread Thread Starter Forum Replies Last Post
MAX/MIN Value Help slbibs SQL Server 2005 4 November 6th, 2007 04:00 AM
Working with min-height rsearing BOOK: CSS Instant Results 0 June 9th, 2007 12:58 PM
Fixed table height and row height rajanikrishna HTML Code Clinic 3 January 18th, 2007 12:42 AM
MIN() function mohiddin52 Access 1 October 29th, 2004 07:09 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM





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