Encountering significant challenges in making a Twitter Bootstrap site compatible with Internet Explorer. Visit for the site in question. Below are screenshots from Chrome and Internet Explorer along with the corresponding HTML code. The issue is with the navbar displaying as a top-down list in Internet Explorer, and the spans appearing vertically instead of horizontally. The desired outcome is for it to look consistent across Chrome and Internet Explorer.
Chrome Screenshot
Internet Explorer Screenshot
<html lang="en">
<head>
<meta charset="utf-8">
<title>Severe Weather Warnings - Torando Warning, Thunderstorm Warning</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/css/bootstrap-responsive.css" rel="stylesheet\ type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=182733995114522";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- More HTML code snippets -->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
<!-- More HTML code for Bootstrap components -->
</body>
</html>