1

I created two threads here and here about that internet explorer works in quirks mode and that broke the layout. After a bit of investigation I found that somehow php make some mess.

For example If I run the code below as html page on web server IE parse it correctly.I`m using small CMS, so if I divide the code in three parts lets say header main footer (CMS combine them) then IE show quirks mode and the layout is broken. The html output from php file is the same as that below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            body{
                font: 11px Tahoma, Verdana, Arial, sans-serif;
                color: #707070;
                background: #8c2727 url('../img/bgr_red.png') repeat-x;
            }

            a {
                color:#bc2828;
                text-decoration:none;
                font-weight: bold;
                outline: none;
            }


            #wrapper{
                position: relative;
                width: 960px;
                margin: 70px auto;
                background-color: #fff;
                border: 1px solid red;
            }

        </style>
    </head>

    <body>
    <div id="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </body>
    </html>

I belive that the problem is in CMS. But what could broke the doctype ?

EDIT: Here is screenshot from Fiddler See the rectangle. What is that ?

2
  • 2
    Make sure there is nothing printing out above the doctype. The doctype needs to be the first thing on the page.
    – Seth
    Apr 6, 2011 at 11:12
  • Which version of IE are you talking about? Do you mean quirks or IE7 compatibility mode?
    – Pekka
    Apr 6, 2011 at 11:14

2 Answers 2

3

Most likely there is some output going to the browser before the doctype.

Ensure that:

  • There is no white space or any other kind of data before the <?php opening tags
  • There is no BOM at the beginning if your files are saved using some Unicode encoding

...in any of the files that are being parsed to generate your output.

1
  • The new fiddler screensot does support this answer. BOM seems most likely.
    – Chris
    Apr 6, 2011 at 11:38
2

If a browser is treating the two pages differently, then there's some difference between them, even if it's not immediately apparent when you "View Source".

I recommend using a tool such as Fiddler to look at the actual page content as delivered from the server.


Edit: You'll find that the "RAW" and "HEX" tabs are more important than "TextView". Start with "Raw" and compare the "Content-Length" header, then look at "HexView" to see what has changed.

1
  • I knew that something in output broke the layout, but I did not know the way to "see" it. Well the Fiddler helps me a lot
    – prista
    Apr 6, 2011 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.