PHP Content Does Not Look Exactly the same as seen on the video

Question

In php (creating the menu and footer) on the first video i downloaded the file and copy the file to the htdocs and re-freshen my internet explorer browser and all of the t-shirts are align to the side and the menu does not line up. but if i were to preview it on my computer and not the local server, everything is perfect but no php code executed.

Any Suggestion?

Answer 1 · 2012-12-29T12:43:54Z

December 29, 2012 12:43pm

try running it in a different browser like chrome or firefox

Answer 2 · 2012-12-29T15:02:24Z

December 29, 2012 3:02pm

Hi Z Khan,

As Roel suggested, it's probably because you're using an older version of Internet Explorer. What version are you using?

You should build your sites for your primary audience and whatever browser they're using. Thankfully, modern browsers (IE 9+, Chrome, Firefox or Safari) are used by most people around the world currently as they auto-update now.

Thanks, Ryan

Answer 3 · 2012-12-29T22:53:37Z

December 29, 2012 10:53pm

Hey Z Khan,

It sounds like it is working when you open the HTML file directly at an address like this ...

C:\Downloads\shirts4mike\index.html

... but it's not working when you open it through your PHP server at this address ...

http://localhost/

Is that correct?

If so, then it doesn't seem like a browser issue: it sounds like something isn't set up right with the server. Could you post a screenshot? Are you setting up XAMPP on Windows 7?

Answer 4 · 2012-12-30T00:50:03Z

December 30, 2012 12:50am

Hi Randy

i believe that is correct. i am setting XAMPP with windows 7. here is the snapshot link of it in internet explorer using with XAMPP.

http://tinypic.com/r/a75vd/6

Answer 5 · 2012-12-30T15:26:54Z

December 30, 2012 3:26pm

Hmmm ... it looks like there might be a PHP error that is throwing IE into quirks mode. A few questions:

Are you looking at the project starter files attached to the first video? They shouldn't have PHP code in them, just HTML/CSS.
What is the web address for this page? Is it localhost/index.html? Or is it something else? (If you have made changes to the starter files, it would be helpful if I could see what the changes are.)
What version of IE are you using?

Answer 6 · 2012-12-30T20:38:09Z

December 30, 2012 8:38pm

yes, i made sure that i download the right files and copied them to the htdocs.

the web address as it loads is http://localhost/ and no changes have been made to the starter files. if i were to preview them on a different web browser that isn't a local host it will be perfect, just won't execute the php code is all. as of right now i am using IE8, i've tried downloading IE9 but it continues to tell me i have an error.

i have started over a couple times to be sure i did the steps but it comes out the same.

Answer 7 · 2012-12-30T22:07:50Z

December 30, 2012 10:07pm

Sorry for the trouble! There's something not quite right with your XAMPP server: the HTML it's generating isn't correct, but I can't tell what it is looking in the browser. There's no PHP in the starter files (they contain just HTML) so there shouldn't be any problem there.

Can you click "View Source" on the page and take a screenshot of that? I think I'll be able to figure out the problem from that.

Answer 8 · 2012-12-31T05:30:52Z

December 31, 2012 5:30am

I even tried to preview the HTML using XAMPP and the url shows is the same http://localhost/

I can't screenshot the source so i'll copy and paste the HTML code.

i'm just editing this post because as i post the comment it does not show the html, head or link rel, at the top of the code i pasted.

<html> <head> <title>Shirts 4 Mike</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css"> <link rel="shortcut icon" href="favicon.ico"> </head> <body>

<div class="header">

    <div class="wrapper">

        <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

        <ul class="nav">
            <li class="shirts"><a href="#">Shirts</a></li>
            <li class="contact"><a href="#">Contact</a></li>
            <li class="cart"><a href="#">Shopping Cart</a></li>
        </ul>

    </div>

</div>

<div id="content">

    <div class="section banner">

        <div class="wrapper">

            <img class="hero" src="img/mike-the-frog.png" alt="Mike the Frog says:">
            <div class="button">
                <a href="#">
                    <h2>Hey, I&rsquo;m Mike!</h2>
                    <p>Check Out My Shirts</p>
                </a>
            </div>
        </div>

    </div>

    <div class="section shirts latest">

        <div class="wrapper">

            <h2>Mike&rsquo;s Latest Shirts</h2>

            <ul class="products">
                <li><a href="#">
                        <img src="img/shirts/shirt-108.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-107.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-106.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-105.jpg">
                        <p>View Details</p>
                    </a>
                </li>                               
            </ul>

        </div>

    </div>

</div>

<div class="footer">

    <div class="wrapper">

        <ul>        
            <li><a href="http://twitter.com/treehouse">Twitter</a></li>
            <li><a href="https://www.facebook.com/TeamTreehouse">Facebook</a></li>
        </ul>

        <p>&copy;2012 Shirts 4 Mike</p>

    </div>

</div>

</body> </html>

Answer 9 · 2012-12-31T06:14:35Z

December 31, 2012 6:14am

I think you copied that code straight from the file: is that right? I need to see what HTML the browser is seeing, after it processes it through the XAMPP server:

Browse to http://localhost/ in Internet Explorer.
Select View from the menu at the top, then click Source.
From there, you should see the HTML that the browser sees.
Send me a screenshot of that.

Does that make sense? Is that something that you can send me?

Answer 10 · 2012-12-31T06:17:34Z

December 31, 2012 6:17am

By the way: if you put four spaces before each line of code in a comment, it will get displayed properly:

<html>
<head>
    ...
</head>
<body>
    ...
</body>    
</html>

Answer 11 · 2012-12-31T06:27:08Z

December 31, 2012 6:27am

Oh I see now, since it was long i screenshot the top and then bottom,

here is the links,

http://tinypic.com/r/eq4gw1/6

http://tinypic.com/r/ke6io2/6

Answer 12 · 2012-12-31T12:57:51Z

December 31, 2012 12:57pm

I think I figured out the issue. I believe IE8 by default uses "Compatibility Mode" (which means it pretends to be IE7 :~) for websites at [http://localhost/]. I found a thread on Stack Overflow with this suggestion:

In turns out that IE8 has an option under Tools\Compatibility View Settings\ called 'Display intranet sites in Compatibility View'. Disabling this feature fixes my problem.

I think that will solve it.

Answer 13 · 2013-01-01T07:00:23Z

January 1, 2013 7:00am

It still turns out the same, but i think i will paste the URL into Firefox and work my way through the tutorials since its working that way.

Is their a way to set XAMPP to open up in Firefox or chrome? I do think that IE is important to fix just in case i come across it in the future.

Answer 14 · 2013-01-01T16:26:36Z

January 1, 2013 4:26pm

I'm pretty sure the issue is that IE8 is displaying local / intranet sites in compatibility mode, acting like it's IE7 instead of IE8. Here's one more thing to try. Add the following <code>meta</code> tag to the <code>head</code> of the index.html file.

Change this ...

<head>

... to this ...

<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge">

From researching online, it sounds like that should work.

(The HTML/CSS works fine in IE8; it only fails to work when you run it over localhost. Unfortunately, I don't have access to a computer with IE8 and XAMPP that I can use to test this.)

Answer 15 · 2013-01-01T17:12:08Z

January 1, 2013 5:12pm

Thank you for your patience and answering my questions, it finally worked!

THANK YOU!!!

Answer 16 · 2013-01-02T00:46:29Z

January 2, 2013 12:46am

Excellent! Glad we got it working. I'll add a note about this to the Windows installation video.

Answer 17 · 2014-04-23T05:33:02Z

April 23, 2014 5:33am

removed

Answer 18 · 2014-05-21T20:07:27Z

May 21, 2014 8:07pm

For some reason, the date function on my page isn't displaying the date for the copyright section. I've tried to use the function in different areas on the page and it still won't work. I've also used the function in a separate file, in the same folder and it DID work but it won't work on this test page. Please help me out

Answer 19 · 2014-05-21T20:08:57Z

May 21, 2014 8:08pm

Here's my code ... <html> <head> <title><?php echo "Shirts 4 Mike"; ?></title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css"> <link rel="shortcut icon" href="favicon.ico"> </head> <body>

<div class="header">

    <div class="wrapper">

        <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

        <ul class="nav">
            <li class="shirts"><a href="#">Shirts</a></li>
            <li class="contact"><a href="#">Contact</a></li>
            <li class="cart"><a href="#">Shopping Cart</a></li>
        </ul>

    </div>

</div>

<div id="content">

    <div class="section banner">

        <div class="wrapper">

            <img class="hero" src="img/mike-the-frog.png" alt="Mike the Frog says:">
            <div class="button">
                <a href="#">
                    <h2>Hey, I&rsquo;m Mike!</h2>
                    <p>Check Out My Shirts</p>
                </a>
            </div>
        </div>

    </div>

    <div class="section shirts latest">

        <div class="wrapper">

            <h2>Mike&rsquo;s Latest Shirts</h2>

            <ul class="products">
                <li><a href="#">
                        <img src="img/shirts/shirt-108.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-107.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-106.jpg">
                        <p>View Details</p>
                    </a>
                </li><li>
                    <a href="#">
                        <img src="img/shirts/shirt-105.jpg">
                        <p>View Details</p>
                    </a>
                </li>                               
            </ul>

        </div>

    </div>

</div>

<div class="footer">

    <div class="wrapper">

        <ul>        
            <li><a href="http://twitter.com/treehouse">Twitter</a></li>
            <li><a href="https://www.facebook.com/TeamTreehouse">Facebook</a></li>
        </ul>


        <p>&copy;<?php echo date('Y'); ?> Shirts 4 Mike</p>

    </div>

</div>

</body> </html>

Answer 20 · 2014-06-10T04:57:41Z

June 10, 2014 4:57am

Try renaming the file extension to php if all else fails and then call that file so index.php

Answer 21 · 2014-06-10T05:03:42Z

June 10, 2014 5:03am

I post that because my apache is not running html files with php in them in some cases ... sure I could edit my apache config and fix it as well set that index files call php instead of html . but hey more worried about code rather then apache config etc ...

Maybe they will set up a linux begging admin class here as well showing people about configuring a dedicated server .... etc or well a virtual server or cloud based circumstance or well the difference of these etc .... If so .... those that run this site contact me I have done this type of thing years ..... your site is great

Answer 22 · 2014-06-10T05:03:47Z

June 10, 2014 5:03am

I post that because my apache is not running html files with php in them in some cases ... sure I could edit my apache config and fix it as well set that index files call php instead of html . but hey more worried about code rather then apache config etc ...

Maybe they will set up a linux begging admin class here as well showing people about configuring a dedicated server .... etc or well a virtual server or cloud based circumstance or well the difference of these etc .... If so .... those that run this site contact me I have done this type of thing years ..... your site is great

Welcome to the Treehouse Community

Looking to learn something new?

Z Khan

Z Khan

PHP Content Does Not Look Exactly the same as seen on the video

22 Answers

Roel Slüper

Roel Slüper

Ryan Carson

Ryan Carson

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

Z Khan

Z Khan

Randy Hoyt

Randy Hoyt

xprofessor white

xprofessor white

Yusuf Wyatt

Yusuf Wyatt

Yusuf Wyatt

Yusuf Wyatt

Yusuf Wyatt

Yusuf Wyatt

kenton sweckard

kenton sweckard

kenton sweckard

kenton sweckard

kenton sweckard

kenton sweckard