[nycphp-talk] And the HTML CSS guru is....
Rob Marscher
rmarscher at beaffinitive.com
Thu Jan 11 11:10:30 EST 2007
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 <ken at secdat.com> 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
More information about the talk
mailing list