respond.js with bootstrap 3 and IE8

Question

In Inernet Explorer 8 Can someone please tell me why the column width on the services page are shorter than what they should be? They should be similiar to the yellow highlighted area below:

I tried viewing it in Browser Stack and using Emulation Mode from within IE11. I am using respond.js like described in Bootstrap docs .

What am I doing wrong?

Thanks

Answer 1

There are 2 problems in IE8:

First problem:

<dt>
    <i class="icon-data-consolidation"></i>
</dt>

This <dt> tag has a diferent size on IE8 than any other browser. (Firefox, Chrome, Safari, etc). For example in Mozilla it has width = 45px ; height = 45px width = 45px ; height = 45px and in IE8 it has width = 160px ; height = 45px; width = 160px ; height = 45px; . So because of this 160px width of the <dt> tags that you have in the page, your design crashes.

Solution for first problem:

Add this into your css code:

.dl-horizontal dt {
    width: 45px !important;
}

Second problem:

<dd>
    <h5>Data Consolidation</h5>
    <p>Data from disparate systems ...</p>
</dd>

This <dd> tag has a margin-left = 45px in Firefox, but in IE8 it's set to 180px.

Solution for the second problem:

Add this into your css code:

.dl-horizontal dd {
    margin-left: 45px !important;
}

I've tested this and it works, hope this helps.