Webpage will not scroll - html

The webpage I made will not allow me to scroll. How can I fix this?
Other than viewing the code you can view the live website at this address
Also, the tabs only view on certain web browsers. How do I make it on all browsers?
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js b1" lang="en"> <!--<![endif]--> <!--[TO PUT THE BACKGROUND BACK, CHANGE "b1" to "bg1"-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site.</p><![endif]-->
<header>
<h1>The Down Syndrome Awareness Foundation (DASF)</h1>
</header>
<div id="image">
<img src="img/zoom.png">
<a href="img/big.JPG" class="MYCLASS" title="DSAF Logo">
<img src="img/small.JPG" title="Our Logo">
</a>
</div>
<div id="back" >
<img src="img/back.png" alt-text="Back" title="Back">
</div>
<div role="main" id="container">
<div id="primary">
<h2>TITLE ONE</h2>
</pre>
<p>TEXT</p>
<p>MORE TEXT, ANOTHTER PARAGRAPH</p>
</div>
<div id="content" class="one-edge-shadow">
<!-- <h2>Main content</h2> -->
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">About the Disorder</li>
<li id="tabHeader_2">TAB 2</li>
<li id="tabHeader_3">Commercial</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>HEADER ONE</h2>
<p><strong>What is Down Syndrome?:</strong></p>
<p></p>
<p><strong>Quality of Life:</strong></p>
<ul>
<li>A person with Down Syndrome in 1900 could expect to live to about 9-11 years. Now, patients with Down Syndrome live to 50 years old, with a ratio of 1:10 living to 70
<li>About 92% of pregnant women with babies with Down Syndrome elect to terminate the pregnancy
<li>Rate of bullying to children is increased to children with disorders is much higher
<li>Increase risk for Alzheimer’s Disease, Cancers, Celiac Disease, and Vision and Hearing Impairment
</ul>
<p><strong>Severity:</strong></p>
<p></p>
<p><strong>Famous Cases:</strong></p>
<p></p>
<p><strong>Special Olympics:</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>HEADER 2</h2>
<hr>
<p><strong>Clinical Science</strong></p>
<p></p>
<p><strong>Causes:</strong></p>
<ul>
<li>Having a third copy, or part of a third copy of chromosome 21
<li>1% of cases are hereditary, the other 99% of cases are random or based on the mother’s age being over thirty-five (35) years
</ul>
<p><strong>Symptoms:</strong></p>
<ul>
<li>Delayed physical, social, and intellectual development</li>
<li>Decreased muscle tone</li>
<li>Short neck, excess skin on the back of the neck</li>
<li>Flattened facial profile</li>
<li>Upward slanting eyes</li>
<li>Skin fold that comes out from the upper eyelid and covers the corner of the eye</li>
<li>Wide, short hands and short fingers</li>
<li>A single deep crease in the palm of the hand</li>
<li>White spots on the coloured part of the eye</li>
<li>Deep groove between the first and second toes</li>
</ul>
<p><strong>Treatment</strong></p>
<p>There is no cure for Down Syndrome, however there are treatments to minimalise the symptoms and the conditions associated with them. Speech and coordination can be improved by occupational therapy and special education.</p>
<p><strong>Heart Defects Related to Down Syndome</strong></p>
<p></p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>As Seen on "The Today Show"</h2>
<p>PARAGRAPH ONE BECAUSE I'M SO LAZY AND CAN'T ADD MORE, SORRY</p>
</div>
</div>
<!-- <p>Inner containers can be set using % measurements which are relative to the parent container.</p>
<p>If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.</p>
<p>To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.</p>
<p><strong>target ÷ context = result</strong></p> -->
<div id="button-box">
<a class="button">About Us</a>
</div>
</div>
<div id="secondary" class='visuallyhidden'>
<h2>Seconday Sidebar</h2>
<pre>
#secondary {
float:left;
width:25%;
}
</pre>
<p>One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.</p>
<p>You can mitigate this problem by changing font sizes on elements other than the containers themselves.</p>
</div>
</div>
<div id="remedy" class="one-edge-shadow">
<h2>Meet the Team</h2>
<p>I CAN PUT BULLETS IN LATER</p>
<p>BUT IM JUST SO TIRED</p>
<p>DURRRRR</p>
<p><strong>I CAN EVEN MAKE IT BOLD!</strong></p>
</div>
<footer>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> -->
<script src="js/jquery-1.7.2.min.js"></script>
<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>
<script src="js/acidTabs.js"></script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>


Change:
html {
overflow: hidden;
}
to:
html {
overflow: auto;
}

Related

HTML5UP, Image is small when browser isnt maximized

So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>

In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)

webpage is not clickable in internet explorer

The links on my project working on is not clickable on Internet Explorer but Ok on firefox and chrome. It is essential to support this on IE. I have been researching this for days. I first I put on position:fixed on the body background, but when I removed the position: fixed, my background will not be responsive. Here is the some css
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="container">
<div id="main_corporate">
<img id="logo" src="img/logo.png">
<div id="content_corporate1">
<p >Whether you are hosting a small lunch meeting or a grand banquet, preparing for an event can be a daunting task. The venue set up, the dishes and beverages must all be carefully planned and executed to be able to provide your guests an outstanding dining experience.</p>
<p >Save yourself from all these work and engage a seasoned caterer to do everything for you! Occasions Catering is a full-service caterer that has been delivering unique and exceptional culinary experiences since 2006.</p>
<p >Occasions Catering represents the best culinary experience in Singapore. We are with our clients from the conceptualization of the ideas to the smooth delivery of the event.From high end corporate functions to intimate gatherings, our skilled kitchen and operation teams continuously astonish clients with detailed setups, appetizing meals and first class service.</p>
<p style="margin-right:90px" >Don't just take our word for it. Request for a food tasting session today! </p>
</div>
<div id="socialmed">
<img src="img/facebook.png" >
<img src="img/twitter.png">
<img src="img/instagram.png">
<img src="img/youtube.png">
</div>
<ul id="MenuBar1" class="MenuBarHorizontal2">
<li style="width:70px;"><a href="home.html" >HOME</a></li>
<li><a href="aboutus.html" >ABOUT US</a></li>
</ul>
</div>
<div id="footer" class="clearfix">
<div class="about1">
</div>
<div class="about2">
</div>
<div class="about3">
</div>
</div>
</div>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the jsfiddle of the complete code: http://jsfiddle.net/jethph/TKM9Y/. Sorry for untidy code.
Thanks for your help.

IE8 issue with Twitter Bootstrap 3

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.
In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.
I also notice that the container class does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>
<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">
<header>
<div class="topArea clearfix">
<div class="container">
<div class="topLinks">
<div class="btn-group">
<span class="flag" data-toggle="dropdown"> </span>
<ul class="dropdown-menu">
<li>Country 1</li>
<li>Country 2</li>
<li>Country 3</li>
<li class="divider"></li>
<li>Country 4</li>
<li>Country 5</li>
<li>Country 6</li>
</ul>
</div>
<div class="visible-sm btn-group">
<div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div>
<ul class="dropdown-menu">
<li>Parts & Service</li>
<li>Store Locator</li>
<li>Find a Service Centre</li>
<li>Parts List</li>
<li>Tool Vibration</li>
<li>Resource Centre</li>
<li>Media Centre</li>
<li>Register your Tools</li>
<li>About Us</li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="topNav">
<ul class="hidden-sm">
<li>
<div class="btn-group">
Parts & Service
<ul class="dropdown-menu">
<li>Store Locator</li>
<li>Find a Service Centre</li>
<li>Parts List</li>
<li>Tool Vibration</li>
</ul>
</div>
</li>
<li>Resource Centre</li>
<li>Media Centre</li>
<li>Register your Tools</li>
<li>About Us</li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="searchArea">
<input type="text" />
GO
</div>
</div>
</div>
</div>
<div class="mainNavArea">
<div class="container rel">
<div class="logo">
<img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
</div>
<div class="navi">
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-justified">
<li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Power Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Cutters
Levels
Pliers
Saws
Screwdrivers
</div>
<div class="col-6 col-sm-6 col-lg-6">
Snips
Utility Knives
Combo Knives
Hand Tool Accessories
</div>
</div>
</div>
</div>
</div>
X
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Hand Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Cutters
Levels
Pliers
Saws
Screwdrivers
</div>
<div class="col-6 col-sm-6 col-lg-6">
Snips
Utility Knives
Combo Knives
Hand Tool Accessories
</div>
</div>
</div>
</div>
</div>
X
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Test & Measurement</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Cutters
Levels
Pliers
Saws
Screwdrivers
</div>
<div class="col-6 col-sm-6 col-lg-6">
Snips
Utility Knives
Combo Knives
Hand Tool Accessories
</div>
</div>
</div>
</div>
</div>
X
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Accessories</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Cutters
Levels
Pliers
Saws
Screwdrivers
</div>
<div class="col-6 col-sm-6 col-lg-6">
Snips
Utility Knives
Combo Knives
Hand Tool Accessories
</div>
</div>
</div>
</div>
</div>
X
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup
Note See also: https://github.com/scottjehl/Respond/pull/206
Update:
Please read: http://getbootstrap.com/getting-started/#support
In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.
See also: https://github.com/scottjehl/Respond
For this reason the basic template contains these lines in the head section:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->

I also had to set the following META tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Put this right after I'd loaded my css:
<!--[if lt IE 9]>
<script src="~/Content/compatibility/html5shiv.js"></script>
<script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->
and then change
<nav class="navbar" role="navigation">
</nav>
to
<header class="navbar" role="navigation">
</header>
Oh and for good measure I also added
<meta name="viewport" content="width=device-width, initial-scale=1.0">
simply because that's what the Bootstrap site itself has.

In my case, the bootstrap minified CSS was causing the issue.
To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:
1 - Set the X-UA-Compatible flag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css
<link href="/css/bootstrap.css" rel="stylesheet" />
3 - Add the respond.js (and html5shiv.js)
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->

put respond.js at bottom of page but before closing body tag and here is link of respond.js and run this code in your localhost.
https://github.com/scottjehl/Respond

Just in case. Make sure you load the IE specific js files after you load your css files.

Don't forget to place your css links in the <head> as respond.js takes only those.

As previously stated there are two different problems:
1) IE8 doesn't support media queries
2) respond.js used in conjunction with cross-domain css files must be included as described before.
If you want to use BootstrapCDN here's a working example:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/respond.proxy.js"></script>
<![endif]-->
Also make sure to copy respond.proxy.gif, respond.min.js and response.proxy.js in local directories

After verifying:
DOCTYPE
X-UA-Compatible meta tag
Inclusion of html5shiv.js and respond.js (and downloading the latest versions)
respond.js being local
Hosting site from a web server and not from File://
Not using #import
...
Still col-lg, col-md, and col-sm were not working. Finally I moved the references to bootstrap to be before the references to html5shiv.js and respond.js and it all worked.
Here is a snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Test for IE8</title>
<!-- Moved these two lines up -->
<link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="includes/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5shiv.js"></script>
<script src="includes/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color:red;">col-md-4</div>
<div class="col-md-8" style="background-color:green;">col-md-8</div>
</div>
</div>
</body>
</html>

From the explanation it says that IE8 is the standard version for you and making content="IE=edge" will render the page in the highest mode. To make it compatible change it to content="IE=8".
IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.
Reference What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

Needed to add - <meta http-equiv="X-UA-Compatible" content="IE=edge">
I was using Bootstrap 3 - had it working on IE on my local.
I put it live didn't work in IE.
Just Bootstrap doesn't include that line of code in their templates, I'm not sure why but it might be due to it not being W3C compatible.

I have a fix for this issue. Actually IE7 and 8 doesnt support the #media properly and if you check the css for “col-md-*” classes and there width is given in media width 992px. Just create a new css file IE eg: IE.css and add in the conditional comments. And then just copy the classes required for your design directly with any media queries there and you are done.

I had exactly the same problem when migrating from bootstrapv2 to v3.
If (like me) you migrated by replacing the old spanX with col-sm-X you also need to add col-X classes. col-X are the styles that are outside of any #media blocks so they work without media query support.
To fix the container width you can set it yourself outside of a #media block. Something like:
.container {
max-width: #container-tablet;
}
#import "twitter-bootstrap/less/bootstrap";

I've suffer the same problem in IE 10.0. I know this is not exactly the problem in the OP, but maybe it will be usefull for others.
In my case, I had an empty line at the beginning of the document:
[blank line]
<!DOCTYPE html>
<html lang="es">
...
If the blank line is between the DOCTYPE and the tag, the problem is also shown:
<!DOCTYPE html>
[blank line]
<html lang="es">
Once I've removed the blank line, and without the magic X-UA-Compatible meta, IE 10 has started to render the site correctly.
If you are using PHP and Smarty be careful with your Smarty comments because they will add those problematic blank lines :-)

my head tag is like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
if you want to try in local...try through localhost, or create a QA server and set the content and try.
We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as IE has security restriction. :P

I've read every comment here, tried everything.. but couldn't get it to work with Windows 7 - Internet Explorer 11 (with document mode: IE8).
Then it came to mind that running a document mode (IE8) isn't the same as the real IE8, so I installed Windows Virtual PC (Windows 7 with Internet Explorer 8) and tadaaaa... it works like a charm!
I've put this piece of code JUST at the bottom of the page to make it work:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Just as a heads up. I had the same problem and none of the above fixed it for me. Eventually I found out that respond.js doesn't parse CSS referenced via #import. I had the whole bootstrap.min.css imported via #import into my main.css.
So make sure you don't have any CSS that contains your media queries referenced via #import.

I have resolved below steps.
(1) installed Respond.js module for drupal 7.
(2) lessphp module for drupal 7 set in libraries, instead of module folder.
(3)
(3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">
(3.2)
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
using cdn bootstrap from theme setting.
To learn more, review my website blog for drupal design and development www.devangsolanki.com

If you use Bootstrap 3 and everything works fine on other browsers except IE, try the below.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Use this solution
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->
This string <script src="js/css3-mediaqueries.js"></script> enable mediaqueries.
This string <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> enable bootstrap fonts.
Tested on Bootstrap 3.3.5
Link to download mediaqieries.js.
Link to download bootstrap-ie7.css

Make sure you link the bootstrap source separately
If you use LESS or SASS don't be to greedy with compiling the styles.
In my project I included bootstrap.min.css in my main style, on the top of the file - so there should be only one request for all styles.
And because of that, the boostrap classes did not work properly.
When added separately, works as expected.

I faced the same problem, tried the first answer but something was missing.
If you guys are using Webpack, your css will be loaded as a style tag which is not supported by respond.js, it needs a file, so make sure bootstrap is loaded as a css file
Personally I used extract-text-webpack-plugin
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")
module.exports = {
context: __dirname+"/src",
entry: "./index.js",
output: {
filename: "./dist/bundle.js",
path: __dirname
},
plugins: [
...,
new ExtractTextPlugin("./dist/bootstrap.css", {
allChunks: true
})
],
module: {
loaders: [
...,
// your css loader excluding bootstrap
{
test: /\.css$/,
loader: "style!css",
exclude: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
]
},
{
// loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
include: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
],
loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
}
]
}
}
Hope it will help you

HTML5 html5shiv and IE7

I am trying to make IE7 render HTML5 using html5shiv; I thought html5shiv would fix these issues. However, Internet Explorer's debugbar is still griping about HTML5 tags.
How can I fix this using html5shiv to use the same HTML5 content without errors in debugbar?
<!DOCTYPE html>
<!--
See this page for language codes:
http://tlt.its.psu.edu/suggestions/international/web/tips/langtagscript.html
-->
<html class="no-js" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Page Template</title>
<!--
html5shiv via CDN
Provides HTML5 support in hateful IE versions
CDN: http://cdnjs.com/
-->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Standard HTML5 Page</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>About</li>
</ul>
</nav>
<section id="featured">
<article>
<header>
<h1>Title Foo1</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1>Title Foo2</h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<section id="ads">
Get a better job!
</section>
<footer>
<p>Insert footer info here</p>
</footer>
</div>
</body>
</html>

You don't. html5shiv only makes it possible to style those elements. IE7 still won't know about them.

I've also had problems getting html5shiv to work in IE Tester (assuming you're using IE Tester), which I found do not occur when I force IE8 to emulate IE7 using a tag, like so:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;">
(See my answer to a similar question here). Based on this experience, I suspect IE Tester might have a problem with html5shiv: it might be worth testing your page in actual IE7 to make sure there really is a problem here.

Unbelievable CSS div jump

See it or yourself! The meal-category-box div has an inexplicable jump from the title to the rest of the content. We can't work it out?
My code is also shown here:
/* Begin Base */
body {
color: #245a03;
background-color: #e7f5df;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light",
"HelveticaNeue", Helvetica, Arial;
font-size: 17px;
margin: 0;
padding: 0;
height: 100%;
}
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MealMarket</title>
<meta name="description" content="">
<meta name="author" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<script src="/static/bootstrap/js/bootstrap-alert.js"></script>
<script src="/static/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="container">
<div id="header">
<a href="/"><h1>Meal Market</h1>
<span>Share food, get food, more merry mealtimes</span></a>
</div>
<div id="main" role="main" class="container">
<div id="user-info">
<img src="/static/images/pics/profile-default.jpg">
<div id="user-column-options">
<h3 style="word-wrap:break-word;">
Matt</h3>
<p>Credits: 10</p>
<ul>
<li>Make meal</li>
<li>Find meal</li>
<!--<li>Past meals</li>-->
</ul>
</div>
</div>
<!-- End user info column -->
<div id="stream">
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4><br />
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/22/Apr/2012/05:30">
Fungus food</a></h5>
April 22, 2012, 5:30 a.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/21/Apr/2012/19:00">
Lentil stew</a></h5>
April 21, 2012, 7 p.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
</div>
<!-- End user's coming hosted meals div -->
<div class="clearer"> </div>
<div class="clearer"> </div>
<!-- Start other coming meals div -->
<div class="meal-category-box">
<h4>Other Upcoming Meal Invites</h4>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/13/Apr/2012/00:30">
Great flippin' food</a></h5>
</p>
<p>April 13, 2012, 12:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/29/Apr/2012/04:30">
Veggie curry</a></h5>
</p>
<p>April 29, 2012, 4:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
</div>
<!-- End other coming meals div -->
</div>
<div class="clearer"> </div>
</div>
<div id="clearer"> </div>
<footer class="footer">
<hr>
<ul id="footer-links">
<li>About / FAQ</li>
<li>Privacy / Legal</li>
<li>Media</li>
<li>Contact</li>
</ul>
</footer>
</div>
</div> <!-- end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!--<script defer src="/static/js/plugins.js"></script>
<script defer src="/static/js/script.js"></script>-->
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".collapse").collapse({toggle: false});
});
</script>
<script type="text/javascript">
// On click...
$("#cross-icon").click(function() {
$('#new-user-box p').slideUp("slow")
$('#new-user-box').slideUp("slow");
});
</script>
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>

Remove clear: both; from the style for .meal-box-small.
#user-column-options is set to float: left;, so the clear: both; causes .meal-box-small to move below that.

How about the 70px bottom margin on your #header? (The Developer Tools: use them.)

div#header has a margin-bottom of 70px. Decrease that to lessen the space between your title and content.

Make this change in your HTML:
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4>
<div class="meal-box">
<div class="meal-details">
Just change the div with the class meal-box-small to the class meal-box and all is fine.