Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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.
Reply With Quote
  #2 (permalink)  
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.
Reply With Quote
  #3 (permalink)  
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
Reply With Quote
  #4 (permalink)  
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.
Reply With Quote
  #5 (permalink)  
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 :)

Reply With Quote
  #6 (permalink)  
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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 11:52 PM.


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