IE8 issue with Twitter Bootstrap 3
HtmlCssTwitter BootstrapInternet Explorer-8Twitter Bootstrap-3Html Problem Overview
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><a href="#">Country 1</a></li>
<li><a href="#">Country 2</a></li>
<li><a href="#">Country 3</a></li>
<li class="divider"></li>
<li><a href="#">Country 4</a></li>
<li><a href="#">Country 5</a></li>
<li><a href="#">Country 6</a></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><a href="#">Parts & Service</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></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">
<a href="#" data-toggle="dropdown">Parts & Service</a>
<ul class="dropdown-menu">
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
</ul>
</div>
</li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></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" />
<a href="#" class="goBtn">GO</a>
</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">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</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">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</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">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</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">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>
Html Solutions
Solution 1 - Html
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</strike>
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]-->
Solution 2 - Html
I also had to set the following META tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Solution 3 - Html
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.
Solution 4 - Html
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]-->
Solution 5 - Html
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.
Solution 6 - Html
Just in case. Make sure you load the IE specific js files after you load your css files.
Solution 7 - Html
Don't forget to place your css links in the <head> as respond.js takes only those.
Solution 8 - Html
As previously stated there are two different problems:
- IE8 doesn't support media queries
- 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
Solution 9 - Html
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>
Solution 10 - 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.
Solution 11 - Html
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.
Solution 12 - Html
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.
Solution 13 - Html
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";
Solution 14 - Html
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 :-)
Solution 15 - Html
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
Solution 16 - Html
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>
Solution 17 - Html
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]-->
Solution 18 - 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.
Solution 19 - Html
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
Solution 20 - Html
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
Solution 21 - Html
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.
Solution 22 - Html
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