0

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:

services page on website

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

paulalexandru
  • 9,218
  • 7
  • 66
  • 94
J86
  • 14,345
  • 47
  • 130
  • 228

1 Answers1

2

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 and in IE8 it has 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.

paulalexandru
  • 9,218
  • 7
  • 66
  • 94
  • Thanks, can you please tell me **where the different width comes from?** In my stylesheet I did have the correct widths without the override `important` – J86 Nov 06 '14 at 10:07
  • To be honest, i don't know exactly. IE8 is hard to debug, i only noticed the diference and i saw that adding this lines will make your design look good. I did that using IE8 developer tools. – paulalexandru Nov 06 '14 at 10:23