Yeah... the hack is necessary. Fortunately, IE's conditional comments
provide a clean way to add css hacks for IE. <!--[if lt IE 7]> is a
conditional comment that only IE recognizes... what it's saying is to
apply the rule if the version of IE is less than IE 7... so it's
targeting IE 6 and below. IE7 implements the min-height css rule, but
IE6 does not know what min-height is.
If you move that rule (height: 100%; for the #wrapper div) to the main
css, then the footer will overlap the body if the height of your window
is small enough in Firefox, IE 7, and other standards-compliant
browsers. The height: 100% works for IE6 because IE6 always
automatically expands the height of an element to fit it's content
whereas other browsers let the content spill out of the element if it
doesn't fit into the defined height.
If you're interested in getting more into css/html, I learned a lot from
the css-discuss mailing list and wiki here: http://css-discuss.incutio.com
Here are some other sites with good articles:
http://www.contentwithstyle.co.uk
http://www.alistapart.com
Mike Stenhouse from Content with Style created a great css framework
that allows you to not reinvent the wheel to do common layouts:
<http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/>
I have to admit though... avoiding using tables for layout can really
rack your brain in some situations and take more time to implement. You
get used to ways to solve certain problems after you've been doing it
for a while though. I've found a couple Firefox extensions to be
indispensable:
Web Developer by Chris Pederick and HTML Validator by Marc Gueury
By the way, if want to use the code I supplied and you don't have your
web server setup to serve pages as utf-8 and haven't saved your
documents as utf-8, you should switch the meta tag back to iso-8859-1:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
Good luck!
-Rob
Kenneth Downs wrote:
According to my copy of Win 2003 and Firefox/linux, you are. Thanks!
But here is a question, do you really need to wrap the IE 7 hack, is
there harm in explicitly declaring that for all browsers?
Rob Marscher wrote:
Umm... and I a guru?? ;)
-Rob
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table to Div Test</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
margin: 0 auto;
position: relative;
width: 500px;
}
#top {
background-color: red;
height: 100px;
}
#middle {
padding-bottom: 100px;
}
#bottom {
background-color: blue;
bottom: 0;
height: 100px;
position: absolute;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css" title="iehacks">
#wrapper {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="top">a</div>
<div id="middle">hello</div>
<div id="bottom">b</div>
</div>
</body>
</html>
Kenneth Downs wrote:
Next time I'll put "simplified snippet" in bold 36pt, and I probably
should have included the standard disclaimer, "for illustrative
purposes" along with "strict compliance is left as an exercise to
the student".
...but if we're going to be picky, the best argument is working
code, how about somebody posts the DIV/CSS code that does the same
thing? I've heard from more than one person who has obviously read
the blogs that tell them to use CSS2, but nobody has yet supplied
any working code. A lot of people helped me with this little
problem, and now my customers are enjoying the benefits, but none of
that help came from the nit-pickers.
I'll be very happy to post a "And the HTML CSS guru is..." as soon
as somebody posts the CSS2 code that does the same thing. I'll even
buy you a drink at Friday's after the next meeting. This is not a
nasty I-don't-think-you-can-do-it challenge, its just that I'm not
an HTML guru, that's why I asked for help. As soon as somebody can
show the code I'd be extremely happy, I'll use it from now on. I'll
be so glad I'll buy you a drink. Shoot, I even offered in the post
to pay, and nobody came up with anything. The scientist in me
wonders if it can actually be done.
tedd wrote:
At 9:46 PM -0500 1/4/07, Greg Rundlett wrote:
On 1/4/07, Kenneth Downs <[EMAIL PROTECTED]> wrote:
Hi folks,
A helpful HTML guru has given me the solution to my height-dont-work
problem in IE 6.
The guru is.... (drumroll) Tom Melendez of LIPHP fame. He
pointed out
that changing the document type declaration to "quirks" mode
makes IE
work, instantly fixing the problem.
For completeness, here is a simplified snipeet that illustrates the
fixed situation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
</head>
<body>
<center>
<table cellspacing=0
style="width: 500px; height: 100%;">
<tr><td style="height: 100px" bgcolor=red>a </td></tr>
<tr><td>hello </td></tr>
<tr><td style="height: 100px" bgcolor=blue>b </td></tr>
</table>
</center>
</body>
I don't mean to be picky, but if you post a 'solution' then it ought
to be or attempt to be syntactically correct. The simple snippet
above gets lazy about quoting attributes, ending semi-colons and the
type attribute is even missing from the <style> tag not to mention a
missing </html> tag. Your point is made about doctype declarations,
but the code example would lead a newbie to believe that tag soup is
acceptable to 'gurus'. All I had to do to produce the version below
was run it through tidy -im -ashtml /tmp/tmp.html
-snip-
Greg
Hi all:
In addition, I don't mean to be picky either, but the example is:
a) using a table to display other than table stuff; b) embedding
css (nothing really wrong with it other than it could be made
unobtrusive); c) placing design attributes within tags, which
certainly belong in a css file; d) and, has an incomplete DOCTYPE.
It's hard to do build something strong, when you have a poor
foundation.
tedd
_______________________________________________
New York PHP Community Talk Mailing List
http://lists.nyphp.org/mailman/listinfo/talk
NYPHPCon 2006 Presentations Online
http://www.nyphpcon.com
Show Your Participation in New York PHP
http://www.nyphp.org/show_participation.php
