Menu
So, I have created the beginnings of a website. If I run it in Internet Explorer 8 or below, all (most of) the style associated with the html seems to disappear. Here's what I have checked so far;
I've checked W3C Validation Check and it runs fine and without errors, I've checked IE8 compatibility with HTML5 and I am not using anything that would not be compatible. I've changed the browser version of internet explorer using the IE Development tools and it shows the css attributes as having been successfully paired with their corresponding elements, but they're just not showing on the page. So I have run out of things to try and check. Below is the entirety of the website (it's only small).
index;
<!DOCTYPE html>
<html>
<head>
<title>Your Indy Buddy</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body id="body">
<nav id="titlebar">
<h1><img src="Other/eve.png" style="float:left;margin-right:200px;" alt="Image Not Displayed"/>EVE ONLINE INDY BUDDY</h1>
<nav id="utilbar">
<p style="margin-left:0px;">Your Time:</p>
<form>
Email <input type="text" name="email"/>
Password <input type="text" name="password"/>
<button type="button" onclick="">Login</button>
</form>
<p style="margin-left:0px;">Eve Time : </p>
</nav>
<p>Not registered? Register</p>
</nav>
<br/>
<nav id="main">
<h2>Test</h2>
</nav>
</body>
</html>
style.cs;
/* Reset above occluded */
h1 {font-size:40px;margin-left:10px;margin-bottom:20px;}
p {margin-top:10px;margin-left:10px;}
#body {background-image:url("Other/background.jpg");background-color:#000000;font-family:"Arial Black", Gadget, sans-serif;color:rgb(200,200,200);font-size:14px;}
#main {width:890px;margin:auto;padding:12px;background-color:rgba(145,49,28,0.9);margin-top:180px;}
#titlebar {width:926px;padding-top:10px;padding-bottom:10px;background-color:rgb(24,24,24);position:fixed;left:50%;margin-left:-463px;margin-top:12px;}
#utilbar {width:906px;padding:10px;background-color:rgb(145,49,28)}
#utilbar form {float:right;position:absolute;right:10px;top:85px;}
#utilbar input {font-family:sans-serif;background-color:rgb(180,80,45);border:2px solid rgb(201,113,87);}
#utilbar button {font-family:'Arial Black', Gadget, sans-serif;color:rgb(200,200,200);background-color:rgb(160,60,40);border:2px solid rgb(180,100,70);}
#utilbar button:hover {background-color:rgb(100,30,10);border:2px solid rgb(160,60,30);}
Sorry to dump code on you guys, but I have run out of things to try, and I am frankly a bit confused. If it were IE7 and below only that didn't work, I would just ignore it. But a lot of businesses are still running on IE8 for some reason or other.
278
Like Sheikh Heera said, HTML5 elements are not supported in IE8 and below. You'll need to include the HTML5 shim into your code. Simply paste the following into the <head> element:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
This essentially allows IE6-8 to support HTML5 elements such as <nav>, <header>, <footer>, etc.
Here's a nifty background on the HTML5 shim/shiv, if you're curious.
176
If you don't want to add html5 shim, you can do this manually by adding some JS and CSS
JS:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('main');
</script>
<![endif]-->
CSS:
header, nav, section, article, aside, footer, main{
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
