XHTML DocType problem w/compatability

Discussion in 'OT Technology' started by P07r0457, Dec 1, 2004.

  1. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    Well, I am now confused. I have been working on a new site for my personal use, and one of my requirements is full XHTML 1.1 compliance. I have written my page, and validated it with W3 and it's all good, I think. Internet Explorer renders it perfectly. Opera, however, shows an extra white space near the top, and my bottom border is stretched 10x.

    If I remove the doctype (that's the only change) then opera renders it perfectly. Internet Explorer also renders it perfectly w/o the doctype.

    Now, I would much rather understand WHY this is a problem. I know I could leave out the doctype, but I do not want to as that breaks my requirement of compliance (where specifying a doctype is a requirement to be compliant).

    Any ideas? Is this a known problem with opera?

    side-note: I changed the doctype to HTML 4.01 as a test, and it exhibits the same problem.
     
  2. skooter

    skooter Guest

    post a link to the page? probably need to see your markup.
     
  3. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    PHP:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
        <title>test</title>
        <link href="stylesheet.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    </head>

    <body>

    <!-- Top Bar -->
    <table width='802px' border='0px' cellpadding='0px' cellspacing='0px'>
        <tr>
            <td><img src='images/headerLeft.jpg' width='253px' height='126px' alt='' /></td>
            <td><img src='images/headerMiddle.jpg' width='288px' height='126px' alt='' /></td>
            <td><img src='images/headerRight.jpg' width='261px' height='126px' alt='' /></td>
        </tr>
    </table>

    <!-- Nav Bar -->
    <table width='802px' border='0px' cellpadding='0px' cellspacing='0px'>
        <tr>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
            <td class='topNavBarPadding'>&nbsp;</td>
            <td class='topNavBar'>
                <a class='topNavLink' href='index.php'>Home</a>
                &nbsp;|&nbsp;&nbsp;<a class='topNavLink' href='index.php'>Link 1</a>
                &nbsp;|&nbsp;&nbsp;<a class='topNavLink' href='index.php'>Link 2</a>
            </td>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
        </tr>
    </table>

    <!-- Left Nav / Main -->
    <table width='802px' border='0px' cellpadding='0px' cellspacing='0px'>
        <tr>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
            <td class='leftNavBar'>
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
                <a class='leftNavLink' href='index.php'>Home</a><br />
            </td>
            <td class='main'>
                <h1>Home</h1>
                
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
                ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF ASDF
            </td>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
        </tr>
    </table>

    <!-- Footer -->
    <table width='802px' border='0px' cellpadding='0px' cellspacing='0px'>
        <tr>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
            <td class='footerNavBar'>&nbsp;</td>
            <td class='footerPadding'>&nbsp;</td>
            <td class='footer'>
                Copyright &copy;2004 Jolly Ogre -- All Rights Reserved.<br />
                [link to me].
            </td>
            <td class='verticalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
        </tr>
    </table>

    <!-- End Bar -->
    <table width='802px' border='0px' cellpadding='0px' cellspacing='0px'>
        <tr>
            <td class='horizontalBorder'><img src='images/dot.gif' width='1px' height='1px' alt='' /></td>
        </tr>
    </table>

    </body>

    </html>
    stylesheet.css:
    Code:
    body
    {
        padding : 0px;
        margin : 0px;
    }
    
    td.header
    {
        height : 126px;
    }
    
    table.outerBorder
    {
        border : 1px solid #999999;
        padding : 0px 0px 0px 0px;
        margin : 0px 0px 0px 0px;
    }
    
    td.verticalBorder
    {
        width : 1px;
        background : url('images/darkGreyDot.jpg');
    }
    
    td.horizontalBorder
    {
        width : 802px;
        height : 1px;
        background : url('images/darkGreyDot.jpg');
    }
    
    td.topNavBarPadding
    {
        background : url('images/navBarRepeat.jpg');
        width : 10px;
        height : 22px;
    }
    
    td.topNavBar
    {
        background : url('images/navBarRepeat.jpg');
        width : 790px;
        height : 22px;
        font-family : Arial;
        font-size : 12px;
        vertical-align : middle;
        color : #828282;
    }
    
    a.topNavLink
    {
        text-decoration : none;
        color : #828282;
        font-weight : bold;
    }
    
    a.topNavLink:Hover
    {
        color : #333399;
        cursor : hand;
        text-decoration : none;
    }
    
    a.leftNavLink
    {
        text-decoration : none;
        color : #828282;
        font-weight : bold;
    }
    
    a.leftNavLink:Hover
    {
        text-decoration : none;
        color : #333399;
        cursor : hand;
    }
    
    a
    {
        text-decoration : none;
        color : #828282;
        font-weight : bold;
    }
    
    a:Hover
    {
        text-decoration : underline;
        color : #333399;
        cursor : hand;
    }
    
    td.leftNavBar
    {
        background : url('images/leftNavRepeat.jpg');
        width : 150px;
        padding : 5px 5px 5px 5px;
        vertical-align : top;
        font-family : Arial;
        font-size : 12px;
    }
    
    td.footerNavBar
    {
        background : url('images/footerLeft.jpg');
        width : 150px;
        height : 50px;
    }
    
    td.footerPadding
    {
        background : url('images/footerRepeat.jpg');
        height : 50px;
        width : 10px;
    }
    
    td.footer
    {
        padding : 10px 0px 10px 0px;
        background : url('images/footerRepeat.jpg');
        height : 50px;
        width : 640px;
        vertical-align : top;
        font-family : Arial;
        font-size : 12px;
    }
    
    .main
    {
        padding : 10px 0px 15px 0px;
        vertical-align : top;
        font-family : Arial;
        font-size : 12px;
    }
    
     
  4. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    If you put the doctype in, then Opera will render it EXACTLY to the spec. Otherwise, it'll be renered in quirks mode. If you take out the "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" part then it will still be compliant but will render in quirks mode.
     
  5. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    ... that post doesn't make any sense. On paper, yes that is correct... However, what I am describing is exactly the opposite.

    With the doctype in, it doesn't work in opera but does in other browsers. It validates fine.

    with the doctype out, it renders fine everywhere.

    that seems to be operas problem.. how can i fix it.
     
  6. ez4me2c3d

    ez4me2c3d Guest

    its strange how you are so strict on yourself about being in compliance yet you rely so heavily on using tables for layout. not that its a bad thing, but i would think someone like you would use tables as the spec says to use them.
     
  7. SixFour

    SixFour Get on your knees and smile like a doughnut! OT Supporter

    Joined:
    Sep 2, 2004
    Messages:
    2,157
    Likes Received:
    0
    Location:
    /home/sixfour
    :bigthumb:
     
  8. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    I have been working on a CSS layout for a month now, but the crackheads at W3 are incompetant at creating a reasonable spec, and each browser has such horrible quirks that you can't make a CSS layout look good in each browser.

    Well, I've seen 2 or 3 nice CSS layouts, but I cannot imagine how much effort that took them.

    Now could you answer my question? Or can you not? Because the table is *NOT* the problem here... :nono:
     
  9. WERUreo

    WERUreo Imua!

    Joined:
    Oct 15, 2003
    Messages:
    566
    Likes Received:
    0
    Location:
    Daytona Beach, Florida
    Even though tables were not intended to be used for layout, doing so wouldn't necessarily be breaking the standards. A page using tables for layout can still be XHTML compliant. In an ideal world, everyone would use CSS for layout and XHTML for markup, every browser made would render pages the same. But, sometimes you have to make do.

    In any case, looking at the code, I can't see what would be causing that problem. Have you tried taking the xml tag out? I don't believe you need that for the page to be compliant, and I've read that it sometimes causes problems in some browsers. Also, do you have the page online somewhere already? I downloaded the code locally so that I could see what it looks like in my browser, but I'm not getting the full effect, because I can't see the graphics.
     
  10. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    yes, I have removed the xml tag. Unfortunatly it didn't change my results.

    I originally intended a full-css layout, but it didn't look right in every browser. I find it funny that the W3 says that's the way to do it, but it's actually very difficult because not every browser follows the same spec. If you want it that way, you have to use a very loose layout. Unfortunatly, the layout I want must be specific down to the pixel (everything must line up). But when you consider that Opera/FF/Mozilla add margins on top of width, and IE adds it within, there's your fatal problem right there.

    It is online, but is restricted access. I am not willing to change that until it goes live.
     
  11. WERUreo

    WERUreo Imua!

    Joined:
    Oct 15, 2003
    Messages:
    566
    Likes Received:
    0
    Location:
    Daytona Beach, Florida
    I had a feeling just removing that wouldn't fix it. But never hurts to try.

    I hear you about CSS layouts. It'd be great if all browsers rendered CSS the same. The funny thing I've noticed about XHTML and CSS standards is that even though, in theory, they are supposed to allow you to stop writing browser specific code or do browser checks in order for pages to look the same across different browsers, but then you still have to add extra code to fix differences. Classic example being the "box model" fix for IE.

    You know, speaking of that, I do remember seeing some kind of CSS hack that Opera needed for I believe the box model. I remember reading it in this book I bought about standards. I'll have to check it out when I get home.
     
  12. ez4me2c3d

    ez4me2c3d Guest

    all i have to say is: http://www.csszengarden.com
     
  13. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    yes, and they're 1 of the 2 or 3 nice sites that I mentioned.

    but if you look at their layout, it's "loose" meaning that being off by a few pixels isn't a problem. my layout is not loose.

    yeah yeah, I know, go make a loose layout :squint:
     
  14. IAMwhitey

    IAMwhitey New Member

    Joined:
    Nov 8, 2001
    Messages:
    1,010
    Likes Received:
    0
    Location:
    Pittsburgh, PA
    i was thinking the same thing about the tables, now that i got good at using the <div> tag i don't even use tables anymore...
     
  15. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    No, don't take out the whole DOCTYPE, just the URL to the spec. It's still legal since it says what type of document it is, but without a link to the spec, compliant browsers will render it in quirks mode.
     
  16. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    I just gave it a try, but it didn't work, unfortunatly. If I remove the entire line, it works. If I just remove the link to the spec, it doesn't work in opera.
     
  17. 96

    96 Merry Christmas :D

    Joined:
    Oct 30, 2001
    Messages:
    16,073
    Likes Received:
    0
    Location:
    San Diego
  18. 96

    96 Merry Christmas :D

    Joined:
    Oct 30, 2001
    Messages:
    16,073
    Likes Received:
    0
    Location:
    San Diego
    look at the links on the right, for "select a design". the main design you see is not the only one... the point of that site is to show what simply changing a CSS file can do. the HTML file for each of the acrhived site designs is teh exact same.. only the CSS changes ;)
     
  19. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    Ah, perhaps Opera doesn't use quirks mode. Odd.
     
  20. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    I found it was way too much work to get DIVs to work properly. I figure if you can get the same look using tables with half as much trouble, why use DIVs?
     
  21. IAMwhitey

    IAMwhitey New Member

    Joined:
    Nov 8, 2001
    Messages:
    1,010
    Likes Received:
    0
    Location:
    Pittsburgh, PA
    the absolute postioning is nice when using the div tags, i feel like i have more control when i use the div tag. somethings are still nice like data output. but as far as setting up screens i prefer the div tag.
     
  22. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    I played with DIVs for literally hours at work over the summer trying to get the site I was building layed out properly with them. Eventually just gave up and used a table setup. I guess whichever you're more comfortable with will always work better :dunno:
     

Share This Page