#IE Problems & Solutions
Internet Explorer is a bitch. But hopefully this list of fixes for common problems we experience will make life a little easier when dealing with it. Note that these fixes are aimed towards IE8 and IE9.
Most commonly used javacript files to fix many issues for IE are HTML5 Shiv and IE9.js.
Include these in your layout file, for browsers older than IE10. Add them to head section, before any other javascript links or code.
They both do very different things:
###html5shiv.js
This resolves a bug of older versions of IE where elements introduced by HTML5 (section, article, header, footer, aside etc) are not stylable with CSS.
Download - http://html5shiv.googlecode.com/svn/trunk/html5.js or - https://code.google.com/p/html5shiv/
###IE9.js
This fixes certain rendering bugs in older versions of IE and adds support for newer CSS3 features.
Download - http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js
Both are lightweight and should sort out most issues.
####Usage
To use one or more of these files in your project, include them in your layout file in the head element.
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
If you're using HAML, use:
/[if lt IE 9]
= javascript_include_tag "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"
There are also other options:
###Modernizer.js
Includes HTML5shiv functionality and a lot more, you can customise it to your needs. But generally it slows the page download speed a lot so only use if necessary.
Download - http://modernizr.com/
###CSS3 Pie
If you're using a lot of CSS3 consider using this. Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
Download - http://css3pie.com/
###Set Class on HTML tag
Include the following code a the top of your layout.haml, after the Doctype declaration and before the head tag. This puts the class "ie8" on all html elements if the browser viewing the website is Internet Explorer 8 or an older version.
<!--[if lt IE 9]>
<html class="ie8" lang="en"></html>
<![endif]-->
HAML version below:
/[if lt IE 9]
%html{:lang => "en", :class => "ie8"}
Then to alter the CSS for IE8 and below only simply add write your CSS within this targeted class, for example, the code below is used to change the properties of the header element for old IE versions, but not affect any other browsers.
.ie8 header{
margin: 0;
float: left;
}
You could also use a separate IE only stylsheet to avoid cluttering your main stylesheets. Simply include this ocnditional statement in your layout file.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
<![endif]-->
HAML Version
/[if IE 8]
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
##Margin 0 Auto Not Centering
This is a bug in IE. To fix you must put a wrapper around the container (or whatever div you've set as margin: 0 auto; ). On this wrappper, set its text align to center.
<body>
<div class="container">
<h1>Hiya World</h1>
</div>
</body>
Here's a quick example with the necessary styles needed.
body{
text-align: center;
}
.container{
margin: 0 auto;
}
Video Tags can be supported in IE by simply adding the HTML5 doctype and ensuring an .mp4 version of the video is linked to in the video sources.
<!DOCTYPE html>
If you're using HAML, you can format the Doctype like this:
!!! 5
For older browsers, you can use a fallback image in place of the video. See the section above about targeting different versions of IE with CSS. There you can hide the video background and put an image in its place.
For a website that has a full-sized image background that is scalable, the CSS normally looks like this:
body {
background-color: #CCC;
background: transparent url("myimage.jpg") no-repeat center center fixed;
@include background-size(cover);
}
However, browsers older than IE9 don't recognise "background-size: cover;" so it's best to use a javascript fallback. Put these links to Backstretch.js and your image at the bottom of your index file.
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script type="text/javascript">
jQuery.backstretch("image.jpg");
</script>
<![endif]-->
This solution is for when you're putting a full-height, fixed sidebar on your webpage, much like this one - http://www.spenceandpartners.co.uk/christmas/
The sidebar needs to be scrollable for smaller (height-wise) browser windows, as the browser does not know the content cannot be seen within your window view, so you must force a scroll bar.
.fixed-content {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Opacity and RGBA is now quite well supported as IE9 now supports it, but incase you need to make your website IE8 friendly, use the filter property.
.mydiv {
opacity: 0.55; /* CSS3 */
background: rgba(0, 0, 0, .55); /* An alternative CSS3 method - this one is 55% black */
filter: alpha(opacity=55); /* IE6+ */
}
To target IE8 speicifically, use this newer method:
.mydiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=55)"; /* IE8 */
}
Note that this opacity filter is applied to everything in that div, including the text. So for an easy fix to make the background translucent, use a background image.
background: url("transparent-black.png") repeat;