Jump to content
Larry Ullman's Book Forums

Page Display Problems In Ie7 When Changing From Html To Php

Recommended Posts



Admittedly, I am new to php but not writing html code or css. I am a high school Mathematics teacher but was a techie/codemonkey in a previous job-life. I have a class website that I provide for my students and it has become too difficult to maintain in static html.


So, I bought your book to make the switch to dynamic websites using Php and MySql.


I followed along, stripped the headers and footers first, put everything else in a .php file and called the header and footer with includes. Worked beautifully after I beat the CSS into submission.


Here is my problem: Every page in my website renders correctly using php with the included files, css3 and html5 in IE9, Firefox 4 and above, Safari and Chrome.


The orginal html page renders correctly in IE7, IE8, and IE9 and the others.


Original html page in IE9 on left, IE7 on right





A real PHP page from my website in IE9 on left, the same PHP page in IE7 on right






Any help you can give me will be most appreciated. I have several of your books and I have been reading here for a little while but I can't find a solution to my issue. Please feel free to visit the site and recreate what I have posted. http://www.zachsmath.com (BTW, the home page script works perfectly in all of the browsers using the same css files.)


I am beyond frustrated. Thanks in advance for any tips or clues you can provide on how I can fix this.




Link to comment
Share on other sites

It appears that your two pages in IE9 and IE7 on the top are a different design than the lower two pictures (i.e. Geometry). I would check your source html / css code. I have spent hours trying to figure out a PHP error and all that was wrong was an equals


that I forgot to assign in my HTML



Link to comment
Share on other sites

Your page doesn't display correctly in IE browsers because IE browsers are hideous.

But in all serious, I did take a look at your page and I think I found the problem.


The problem is that you're using HTML5 tags that are not supported in IE browsers before IE9. Specifically, I noticed a nav tag, several section tags, and an aside tag.


Simply changing all those HTML5 tags to divs and then adjusting the CSS accordingly should resolve all your problems.

The alternative is to use something like html5shiv:



Either way, what I can't understand is why your standard HTML (non-PHP) version was displaying properly in IE7, etc. if you were using the same HTML5 tags. Regardless of whether you write standard HTML or write PHP that generates HTML, HTML5 tags should not work properly in IE browsers before IE9.


All the same, please let us know if that resolves your problems.


Link to comment
Share on other sites

Thank you both for your replies.


Yes, IE is hideous but 95% of the population that uses it doesn't realize it. :rolleyes:


HartleySan, you may have pinpointed for me why the homepage of the website works in all IE browser versions. It is calling the html5shiv javascript because of the scrolling images js code on that page. I will try that and see if that fixes this mess.


I am just as confused as you are about the HTML 5 tags displaying in the standard (non php) html version of that page. Here is the link to the page pictured above: http://www.zachsmath.com/crs_geo/pages_test.html Take a look at the source code and you will see all the same html5 tags rendering perfectly in IE7 for that page. However, when I add my custom logo and nav links (css file stays exactly the same), it turns to crap on a cracker to quote Penny from the Big Bang Theory. LOL


I will try the html5shiv script and see if that fixes it. If it doesn't, I guess I am moving backwards and stripping all the html5 and css3 ti get this thing to display for techtards that refuse to update their browswers.


As a last result. I could just sniff for their browser version and dump them to an "Update now page" but my students parents might not find that terribly amusing.


Thanks again for your help.



Link to comment
Share on other sites

huh, I don't know what happened to the rest of my post above....


in that link, look at the source and you will see that the code is html5 and css3 and works just fine in IE7, IE8, and IE9. **shrug** beats me (I have tested in the actual IE7 browser and in the dev tools in IE9 using IE 7 mode and standards) I added my custom logo and replaced the links in the left nav and it turned to crap on a cracker.


anyway, I will try the html5shiv js and see if that works. If it doesn't, I am traveling back in time and reverting back to html4 standards and css2...bleh.


Or, I could sniff for browser version and dump them to an "Upgrade Now" page, but somehow I don't think my student's parents would find that very amusing.


Thanks again for all of your help.



Link to comment
Share on other sites

Success! I added the following to the header files and it worked. Now all of my pages render correctly in the evil IE browsers. Many blessings on the soul(s) that wrote the js fix.


<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>



You saved me HOURS of recoding and testing. Thank you so much!



Link to comment
Share on other sites

I could tell you were getting rather worked up about all this (which is completely understandable).

Anyway, glad you solved the problem.

I figured the shiv would be the easy, simple solution (i.e., the preferred solution).


As a minor note, IE9 (finally) supports HTML5 tags, so if you want, you can change your conditional comments to the following, to avoid forcing people that are using IE9+ from having to download the shiv code:


<!--[if lt IE 9]>  <script src="dist/html5shiv.js"></script>  <![endif]-->


That code piece comes from the official download site for the shiv hosted by Google.

Link to comment
Share on other sites

worked up is putting it mildly for this 50-yr old geekette!


yes, I can be nice to my up-to-date visitors and not make them download the extra bytes of code. good idea


one more question: do I ADD your code to what I have or change it entirely? Does the html5shiv.js contain the contents of html5.js that I am currently using?


ok, that was two questions.

Link to comment
Share on other sites

I did a search for "html5.js", and all I got were hits related to "html5shiv.js".

To be honest, I've never used either one, so I don't know whether they are the same or different, and if they are different, which is better.


With all that said though, Google and a bunch of popular JS libraries all seem to be hosting and praising html5shiv.js, so I'd stick with that. I'd just use the link I posted above as well as include the JS file as suggested above with conditional comments and call it a day.

In other words, I would not include or mix both html5.js and html5shiv.js together. I'd only use html5shiv.js (which might be the same thing as html5.js anyway?!).

Link to comment
Share on other sites


  • Create New...