After running a test on my website using IE8, it appears that several elements are not displaying correctly. You can view the site on a test server: [REDACTED]. The layout looks fine in modern browsers, but when viewed in IE8 (or IE10 with Compatibility Mode), there are issues present.
The main problem is with the container class, which is responsible for keeping certain elements centered at a fixed width while allowing the header and footer to stretch across the full screen width. However, in IE8, the fixed width setting is not functioning properly.
CSS code for the container:
.container {
margin: 0 auto;
max-width: 1000px;
min-width: 916px;
}
Here is an example of how the container class is utilized in the HTML (specifically in the header section):
<header>
<div class="container">
<div class="float-left">
<a href="/index.php" class="home"><img src="/Images/logo.png" id="logo" alt="logo" /></a>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li><a href="/index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?> class="home">HOME</a></li>
<li><a href="/webgis.php" <?php if (strpos($url, "webgis.php")) { echo " class='active'"; } ?> id="gisnav">WEBGIS</a></li>
<li><a href="/documents.php" <?php if (strpos($url, "documents.php")) { echo " class='active'"; } ?> id="docsnav">DOCUMENTS</a></li>
<li><a href="/statistics.php" <?php if (strpos($url, "statistics.php")) { echo " class='active'"; } ?> id="statsnav">STATISTICS</a></li>
<li><a href="/support.php" <?php if (strpos($url, "support.php")) { echo " class='active'"; } ?> id="supportnav">SUPPORT</a></li>
</ul>
</nav>
</div>
</div>
</header>
I suspect the issue may be related to the CSS property margin: 0 auto; or the floated elements inside the container, although I am not entirely sure.
Another problem is that the header background does not appear as the blue gradient I specified. This is puzzling since the gradient works fine within other divs elsewhere on the page.
Header CSS code:
...[CSS code provided]...A third issue involves the styling of the <hr> element, which I modified to display a repeating image in IE8. However, the image is not rendering correctly in the browser.
CSS for the <hr>:
...[CSS code provided]...If these problems cannot be resolved, I will find alternative solutions. Thank you in advance for any assistance!