I have finally perfected my web page and it works perfectly in every browser.
However, when I abstracted out the header and footer contents into server side includes, the layout changes marginally in Firefox/Opera/Safari, but in IE, the layout changes makes the page look broken.
Are there any known issues that could cause the layout to change when using SSIs? Quite frankly, I'm surprised that using a SSI would have an effect like this. I am using HTML5 tags, the modernizr js library, and the page validates if any of that matters.
EDIT: I fixed my problem by changing what code was abstracted (I simply abstracted one parent tag further than before). HOWEVER, I am still eager to know exactly why this bug happened in the first place. Is there someone out there who could shed light on what in particular could cause this?
The issue ending up being a bug with how the server parsed the HTML and with HTML5 tags. For whatever reason, when I added one extra tag set to the SSI, it worked.
My original include looked like this:
<header>
<!--#Include File="/includes/header.shtm"-->
</header>
with the included file being:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
But when I took all of the HTML5 tags out of the include, as shown below, everything worked as normal. I'm not sure if this is an issue with an old version of apache or what, but doing this fixed everything.
<header>
<nav>
<!--#Include File="/includes/header.shtm"-->
</nav>
</header>