IE8 Bootstrap Respond.JS, List Items Not Horizontal

Question

I am having problems with the dl-Horizontal class in bootstrap.

I have two columns on my row and within each column I have a dl list. In all browsers apart from IE 8, the list item () and list value () are next to each other then the next item value pair is on the following row. However in IE8 the item then value appear under each other and the two columns are under each other.

Thank you for your time.

Fiddle Example

 <link href="<%=ResolveUrl("~/Extern/JQuery/BootStrap/bootstrap-3.2.0/dist/css/bootstrap.min.css")%>" rel="stylesheet" />
    <script src="<%=ResolveUrl("~/Extern/JQuery/Jquerylibs/Jquery1-11/jquery1-11-0.js")%>" type="text/javascript"></script>
    <script src="<%=ResolveUrl("~/Extern/JQuery/BootStrap/bootstrap-3.2.0/dist/js/bootstrap.min.js")%>" type="text/javascript"></script>

     <!--[if lt IE 9]>
         <script src="<%=ResolveUrl("~/Extern/JQuery/html5Siv/html5shiv-master/dist/html5shiv.min.js")%>" type="text/javascript"></script>
        <script src="<%=ResolveUrl("~/Extern/JQuery/Respond-master/dest/respond.min.js")%>" type="text/javascript"></script>
  <![endif]-->  


    <div class="container">
        <div class="row">
              <div id="OnlineEstimate" class="OnlineTabCell">
                 <div class="col-6 col-sm-6 col-lg-5">
                      <dl class="dl-horizontal"> 
                          <dt>Make:</dt><dd><div id="DetMake">aaa</div></dd> 
                          <dt>Model:</dt><dd><div id="DetModel">bbb</div></dd> 
                          <dt>Derivative:</dt><dd><div id="DetDerivative">ccc</div></dd> 
                          <dt>VIN:</dt><dd><div id="DetVin">ddd</div></dd> 
                           <dt>REG:</dt><dd><div id="DetReg">eee</div></dd> 
                          <dt>Colour:</dt><dd><div id="DetMileage">fff</div></dd>
                          <dt>Mileage:</dt><dd><div id="DetColour">ggg</div></dd>
                          <dt>Account:</dt><dd><div id="DetAccount">hhh</div></dd>
                          <dt>Customer No:</dt><dd><div id="DetCustNo">iii</div></dd>
                      </dl> 
                    </div>
                   <div class="col-6 col-sm-6 col-lg-6">
                      <dl class="dl-horizontal"> 
                          <dt>Address:</dt><dd><div id="DetAdd1">aaa</div></dd> 
                          <dt></dt><dd><div id="DetAdd2">bbb</div></dd> 
                          <dt></dt><dd><div id="DetAdd3">ccc</div></dd> 
                          <dt></dt><dd><div id="DetAdd4">ddd</div></dd> 
                           <dt></dt><dd><div id="DetTown">eee</div></dd> 
                          <dt></dt><dd><div id="DetCounty">fff</div></dd>
                          <dt>Postcode:</dt><dd><div id="DetPostcode"></div></dd>

                      </dl> 
                    </div>

            </div>
        </div>
         </div>

The below link is the fiddle full page mode which I was using to test the IE 8 mode!

Fiddle Full page mode

regards

Tom

Answer 1

Problem was caused by the javascript libraries being placed in the body not the head of the page.