We're using some code from twitter bootstrap and our divs are off in Internet Explorer (7-9)

Question

The code we used is from the less file that's related to positioning. The website looks great in safari, firefox, and chrome and looks off in IE version 7, 8, and 9. Does bootstrap have a known issue with IE? Probably not since it's so widely used. But I can't really identify what's wrong. Btw, here are two sample pages with the visual bug in Internet Explorer: http://www.presspass.me and a simpler page: http://www.presspass.me/about or you can take a look at the screenshots.

My guess is that it's something small, any help would be appreciated!

/*
 * Scaffolding
 * Basic and global styles for generating a grid system, structural layout, and page templates
 * ------------------------------------------------------------------------------------------- */

// Variables
// Can also be 24 / 20 / 20
// Or 16 / 40 /20
@gridColumns:       24;
@gridColumnWidth:   20px;
@gridGutterWidth:   20px;
@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));


// Mixins
// Clearfix for clearing floats like a boss h5bp.com/q

.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    zoom: 1;
  }
  &:after {
    clear: both;
  }
}

// Center-align a block level element
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.fixed-container() {
  width: @siteWidth;
  margin-left: auto;
  margin-right: auto;
  .clearfix();
}

.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}

.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}

// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
  display: inline;
  float: left;
  margin-left: @gridGutterWidth;
}

// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
  .gridColumn();
  .columns(@columnSpan);
}


// STRUCTURAL LAYOUT
// -----------------
/*
body {
  margin: 0;
}
*/
// Container (centered, fixed-width layouts)
.container {
  .fixed-container();
}

// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
  position: relative;
  min-width: 940px;
  padding-left: 20px;
  padding-right: 20px;
  .clearfix();
  > .sidebar {
    position: absolute;
    top: 0;
    left: 20px;
    width: 220px;
  }
  // TODO in v2: rename this and .popover .content to be more specific
  > .content {
    margin-left: 240px;
  }
}


// BASE STYLES
// -----------

// Quick floats
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}

// Toggling content
.hide {
  display: none;
}
.show {
  display: block;
}


// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there

.row {
  .clearfix();
  margin-left: -@gridGutterWidth;
}

// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
.row > [class*="span"] {
  .gridColumn();
}

// Default columns
.span1     { .columns(1); }
.span2     { .columns(2); }
.span3     { .columns(3); }
.span4     { .columns(4); }
.span5     { .columns(5); }
.span6     { .columns(6); }
.span7     { .columns(7); }
.span8     { .columns(8); }
.span9     { .columns(9); }
.span10    { .columns(10); }
.span11    { .columns(11); }
.span12    { .columns(12); }
.span13    { .columns(13); }
.span14    { .columns(14); }
.span15    { .columns(15); }
.span16    { .columns(16); }

// For optional 24-column grid
.span17    { .columns(17); }
.span18    { .columns(18); }
.span19    { .columns(19); }
.span20    { .columns(20); }
.span21    { .columns(21); }
.span22    { .columns(22); }
.span23    { .columns(23); }
.span24    { .columns(24); }

// Offset column options
.row {
  > .offset1   { .offset(1); }
  > .offset2   { .offset(2); }
  > .offset3   { .offset(3); }
  > .offset4   { .offset(4); }
  > .offset5   { .offset(5); }
  > .offset6   { .offset(6); }
  > .offset7   { .offset(7); }
  > .offset8   { .offset(8); }
  > .offset9   { .offset(9); }
  > .offset10  { .offset(10); }
  > .offset11  { .offset(11); }
  > .offset12  { .offset(12); }
}

// Unique column sizes for 16-column grid
.span-one-third     { width: 300px; }
.span-two-thirds    { width: 620px; }
.row {
  > .offset-one-third   { margin-left: 340px; }
  > .offset-two-thirds  { margin-left: 660px; }

Answer 1

My guess is that it's something small, any help would be appreciated!

It is something small.

You're missing a doctype. Add as the very first line:

<!DOCTYPE html>

Without a valid doctype, your page is displayed in quirks mode.

Open the Developer Tools (press F12) to see which mode is actually being used.

Answer 2

Also sometimes you have to override group policies that may force IE into non compatibility mode. We have to do this at my organization because group policies force this mode on the intranet.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Answer 3

I had a similar issue with Bootstrap 2.2.1. It looked great in IE 9 where I was developing it. However, one of the users is on IE 7 (don't ask, ugh) and for the most part the header was not showing up correctly. The solution was to change all of the HTML 5 tags (header, footer, article and section) to divs. That did the trick for me.

I had tried just doing the above suggestions with DOCTYPE and such but nothing totally worked for me until that.