Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    XHTML strict vs HTML 4.01 strict DOCTYPE

    This is a bit too subtle for me. I've got a web page with a fixed header, scrolling body table (a single table, not a composite), which works fine in IE with
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"-->

    However, we've got a company mandate to use
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    and now the header is not fixed in IE. Firefox, of course works without problems. I used a CSS hack I got from http://www.alistapart.com/articles/zebratables/ a long time ago. Can't pretend to understand it, but unfortunately I need to now.

    ==CSS==
    /* this is the only style required by CSS2 compliant browsers to make the table body scrollable
    * while the header remains fixed
    */
    .scroll_table > tbody
    {
    overflow: auto ;
    overflow-x: hidden ;
    height:100% ;
    }

    /* pretty stuff */

    .scroll_table
    {
    border: 2px outset activeborder ;
    width: 100% ;
    }

    .scroll_table thead th
    {
    background-color: activeborder;
    border-left: 2px groove activeborder;
    font-weight: normal;
    padding: 2px ;
    text-align: left
    }

    .scroll_table td
    {
    border-left: 2px outset activeborder ;
    padding: 2px ;
    }

    /* fix issues with vertical scrollbar obscuring content in non IE browsers */
    .scroll_table tbody > tr > td
    {
    padding-right: 15px ;
    }
    ===IE specific CSS===
    .scroll_container
    {
    border: 2px outset activeborder ;
    overflow: inherit ;
    overflow-y: auto;
    /*
    * (IE quirk)
    * when width:100% is used, div is slightly wider than page,
    * causing horizontal scroll bar. Don't know why.
    */
    width: 98% ;
    }

    .scroll_table
    {
    border: none ;
    }

    .scroll_table thead tr
    {
    position: relative
    }
    .scroll_table thead th
    {
    position: relative
    }
    ===== sample table =====
    <!--[if lt IE 7]>
    <div class="scroll_container" style='height:150px;width:98%' >
    <![endif] -->
    <table class="scroll_table" tabindex='0' cellpadding="0" cellspacing="0" width="100%" >
    <thead >
    <tr><th colspan="2" style='border-bottom:2px groove activeborder'>Span 2</th><th style='border-bottom:2px groove activeborder'>Span 1</th></tr>
    <tr>
    <th width="50%" style='border-left:none'>Tree</th>
    <th width="20%" >Col 1</th>
    <th width="30%" >Col 2</th>
    </tr>
    </thead>
    <![if gt IE 100]>
    <%-- only non-IE (eg firefox) --%>
    <tbody style='height:150px'>
    <![endif]>
    <!--[if lt IE 7]>
    <tbody >
    <![endif] -->
    <tr id='test1' ><TD >stuff0</TD><TD >col 2</TD><td >col 3</TD></tr>
    <tr id='test1' ><TD >stuff1</TD><TD >col 2</TD><td >col 3</TD></tr>
    <tr id='test2' ><TD >stuff1</TD><TD>col 2</TD><td>long text 0 1 2 3 4 5 6 7 8 9 q w e r t y u i o p</td></tr>
    <tr id='test3' ><td >stuff2</TD><TD>col 2</TD><td>col 3</TD></tr>
    <tr id='test4' ><td style="padding-left:40px">child 21</TD><TD>col 2</TD><td>col 3</TD></tr>
    <tr id='test5'><td > stuff 22 with long text a a a a a a a a a a a a a a a a a</TD><TD>col 2</TD><td>col 3</TD></tr>
    <tr id='test6' ><td >stuff23</TD><TD>col 2</TD><td>col 3</TD></tr>
    <tr id='test7' ><td >stuff3</TD><TD>col 2</TD><td>col 3</TD></tr>
    <tr id='test8' ><td >stuff2 with long text</TD><TD>col 2</TD><td>long text 0 1 2 3 4 5 6 7 8 9 q w e r t y u i o p</TD></tr>
    <tr id='test9' ><td >stuff3</TD><TD>col 2</TD><td>col 3</TD></tr>
    </tbody>
    </table>
    <!--[if lt IE 7]>
    </div>
    <![endif] -->
    Wayne Christian

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    I’m guessing that with the old doctype declaration code, Internet Explorer was displaying in backward-compatibility (quirks) mode since the declaration should not have two hyphen-minus characters at the end.

    Quote Originally Posted by "wac View Post
    /* this is the only style required by CSS2 compliant browsers to make the table body scrollable
    * while the header remains fixed
    */
    .scroll_table > tbody
    {
    overflow: auto ;
    overflow-x: hidden ;
    height:100% ;
    }

    […]

    /* fix issues with vertical scrollbar obscuring content in non IE browsers */
    .scroll_table tbody > tr > td
    {
    padding-right: 15px ;
    }
    I would refrain from using CSS exploits as exploits such as these are not forward compatible. For example, Internet Explorer 7 now recognizes the child selector and those rules will be read by that browser. Using conditional comments to serve IE-only code is a safer bet.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh, the --> at the end of the DOCTYPE was my cut/paste typo. I had one doctype commented out when trying the other and during copy/paste I missed removing that part. The original document does not have that.
    The CSS IE6 specific hacks are only loaded via IE conditional comments.
    I load a different CSS when the browser is not IE6
    Wayne Christian

  • #4
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Apparently Arbitrator was correct. I don't think the --> was the problem cause that wasn't in the original code, but there were some other things that a validator barfed on. When I cleaned them up, the code works in IE XHTML strict.dtd. Thanx for forcing me to double check my stuff...
    Wayne Christian

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    There is much discussion over whether to use XHTML or HTML.

    I've been using HTML 4.01 strict mostly because IE 6 doesn't know how what to do with documents of the type text/xml which is how you're supposed to be serving XHTML documents, according to the standard. Which basically means you can't adhere to the standard and still have your pages render in IE6 (yes you can use the XHTML doctype in IE, but you can't serve pages the way they are supposed to be as defined in the standard)

    Because of this, many professional web developers are using HTML 4.01 strict instead of XHTML.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Beagle View Post
    Because of this, many professional web developers are using HTML 4.01 strict instead of XHTML.
    At the risk of kicking up the dust…

    I know that many of those developers will go on at length, imploring the use of XHTML markup as text/html, largely on account of there being so few, if any, tangible benefits to doing so, in their opinion.
    But one question which doesn't really seem to get asked of them, or answered by them: what are the benefits of using HTML 4.01 (as text/html) over XHTML 1.0 (as text/html)?

    In real terms, the parsity of tangible benefits afforded by XHTML as text/html don't seem to be addressed by 'reverting' to HTML 4.01.

    (* The only perceivable 'benefit' demonstrated by some would be the sense of self-satisfaction at somehow managing to be that bit more pure, which supposedly leads them to consider themselves as superior. Ironically, this too often shows itself in the form of condescension, when the XHTML backlash largely seems to have risen out of a reaction to the condescension voiced by some XHTML (as text/html) users who looked down their noses at those 'still using HTML 4.01'.

    I'm certainly not accusing you of these traits, Beagle. I'm glad to see that you seem more than comfortable making your remarks without bloating them with back-handed and partisan condescensions.)


    (Fwiw, I'm one of those who do feel that there are small, but worthwhile benefits to working with XHTML markup, even if defaulting to text/html when served.
    To turn the argument, I feel that there are no tangible benefits to using HTML 4.01 (as text/html) in preference to XHTML 1.0 (as text/html).)

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Location
    D0u$h!t3 k4?
    Posts
    512
    Thanks
    2
    Thanked 5 Times in 5 Posts
    I use XHTML because I like to have control of my markup. I know exactly what is closed and what is left open. The P element in HTML makes no sense to me, honestly. It isn't an empty element, yet you can omit the end tag like BR or HR.
    Code:
    <P>Hello World!
    <BR>
    In XHTML, it would be closed as "<p/>Hello World!", which would mean "Hello World!" would just be text, without the p element containing it properly. But it is "<p>Hello World!</p>" actually, which makes sense, making the HTML version make no sense. :-P

    Simply put, I know what my elements are doing in XHTML.
    PHP Code:
    $hello file_get_contents('hello.txt'); echo $hello
    hello


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •