This is about a problem that arose when working a project for a college assignment. It seemed simple enough; Make a new website using the newer CSS3 and HTML5 tags and technologies. And actually, it was for the most part when creating the original HTML and CSS files. A few images and Javascript code and bam, I was done! It looked great in all browsers except for a minor FF HTML5 Canvas Image problem. But that's not where I ran into the problem.
The problem arose when I wanted to convert it into useful PHP script. I ran into a rather interesting problem. IE9 was no longer processing the newer code. certain CSS3 and HTML5 code wasn't working despit the rest of the non-CSS3/HTML5 working fine.
Consider the images of my project below. The first three show what the webpage looks like without being broken up into sections for PHP output. The first image is for Internet Explorer 9 and looks great. The second image shows what the site looks like in FireFox, again okay but for the missing Canvas image in the main content area of the page. And lastly, an image from the Google Chrome browser, which seems to work fine no matter what the change in code is.
(Just the CSS/HTML & JavaScript)
Internet Explorer 9
|
FireFox
|
Google Chrome
|
If you click the First Image above and then the First Image below, you'll see the obvious difference when viewed with Internet Explorer 9. The first image above is how the site should look without being broken up for PHP.
However, after I break it up and place it into some PHP coding, the output to IE isn't being interpreted correctly, or, more likely perhaps, the newer markup of both CSS3 and HTML5 isn't being recognized. The CSS3 attributes for rounded corners, for example, and the HTML5 Canvas. See the differences below of what the project looks like AFTER being parsed into some PHP output...
(header & footer includes)
Internet Explorer 9
|
FireFox
|
Google Chrome
|
The CSS IS being recognized, of that much I am certain, however the specific markup for things like shadowing or border-radius is not being seen by IE9 for some reason. And as you can see, the HTML5 Canvas tag is being passed over to display the NO-CANVAS code instead. It's as if it thinks IE9 cannot handle the newer markup! But I am quite sure all the files are being referenced correctly from thier respective folders such as css, images, js, includes, etcetera.
The code seems to work fine in both FF and Chrome, although in FF there are some minor CSS quirks handling the Footer navigation links. But overall, it's being displayed AOK functionality wise (but for the Canvas Image being drawn for FF). It's certainly a head scratcher of a problem, and one I am determined to work out!
After all, when combining around 20 files and counting on them to integrate and work correctly together, then parsing them with PHP code, something is bound to go awry, am I right? Unfortunately, it's already taken some time and head-scratching in looking for the solution to this problem that is certainly perplexing me.
It was suggested to check the output by viewing the source file generated by the browser. The code looks okay, and I made sure the DIV tags all matched up with closing tags. It seemed alright in that respect, so there's something not being interpreted for some reason, and it appears to be mainly Internet Explorer that has the issue. Which brings me to the HTML Conditional statement I have included.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/mystyles.css" type="text/css" media="screen" />
<![endif]-->
Although removing this conditional statement of code did nothing to resolve the issue. What this was intended to do is shunt any IE browsers less than version 9 to reference a Javascript file hosted on Google Code to handle the HTML5 script more graciously. (I hadn't yet checked it out fully.) So this passed inspection since I still recieved the same results. The HTML5 Canvas was not being recognized, period.
Since I was introducing some newer techniques of better handling the PHP code I was creating this time (from a textbook on secure ecommerce concepts), I tested a few possibilities and again had no positive results. So I'm going to have to make a decision on getting a handle on this in order to move ahead. I'll dedicate a little more time troubleshooting the PHP code using dev tools like Firebug before having to give up to Reverse-Engineer the raw CSS/HTML source from the PHP code I created, hopefully to see if it can be duplicated and corrected. Time consumming, indeed, but now necessary. The main PHP files code is very basic, actually...
require ('includes/config.inc.php');
include ('includes/header.html');
?>
Content for Page Goes Here
<?php
include ('includes/footer.html');
?>
Three parts consisting of a Header, some main content and then a Footer. Simple enough. I've never fully utilized includes, but it seems to be functioning just fine, so will assume that code method is fine for now. All that is clear is how the header, aside nav and canvas are not being handled right with Internet Explorer 9, and it should. Last resort will be creating specific IE code for the project and branching it all off, which I so do NOT want to do. So here goes, wish me luck in my troubleshooting efforts!!
This article is in-progress. This article will be posted either once the
problem has been corrected, or the courseowrk submission deadline has passed on the 27th
of this month for reference by myself and others trying to utilize CSS3 and HTML5 with
PHP code and not having IE play well. Other articles related to programming will also
be available. All content is the sole property of myself and bound to my personal site
located at www.TommyRay.net. Thank you!