NYCPHP Meetup

NYPHP.org

[nycphp-talk] And the HTML CSS guru is....

Kenneth Downs ken at secdat.com
Thu Jan 11 09:42:34 EST 2007


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
> _______________________________________________
> 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

-------------- next part --------------
A non-text attachment was scrubbed...
Name: ken.vcf
Type: text/x-vcard
Size: 261 bytes
Desc: not available
URL: <http://lists.nyphp.org/pipermail/talk/attachments/20070111/61740e48/attachment.vcf>


More information about the talk mailing list