0

I am trying to create a web form in ASP.NET with the control labels to the left of the input controls, but in IE8 they are one above the other. I am using html5shiv and respond.js as recommended. This is my latest attempt. Our corporate standard is IE8 (I know, I know, don't get me started). Any ideas how to make this work? Thanks.

<div class="container"> <!-- for bootstrap  -->
<div class="row">       <!-- for bootstrap  -->
    <div class="form-horizontal" role="form">
        <div class="form-group">
            <label for="txtProfitShareYear" class="col-md-2 control-label">Profit Share Year</label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="txtProfitShareYear" placeholder="rule year">
            </div>
        </div>
        <div class="form-group">
            <label for="txtCompanyID" class="col-md-2 control-label">Company ID</label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="txtCompanyID" placeholder="rule year">
            </div>
        </div>
        <div class="form-group">
            <label for="txtMaxPayAmount" class="col-md-2 control-label">Max Pay Amount</label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="txtMaxPayAmount" placeholder="deferral amount ratio">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-10">
                <button type="button" class="btn btn-default" id="btnModalSave">Save</button>
            </div>
        </div>
    </div>
</div>  <!-- /.row -->
</div>  <!-- /.container -->

Here's my entire head section. If I remove the conditional CSS, it works.

<title>Medical Group 401k</title>

<link rel="stylesheet" type="text/css" href="Styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="Styles/Site.css" />
<link href="Styles/jquery.dataTables.min.css" rel="stylesheet" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9]>
  <script src="Scripts/html5shiv.min.js"></script>
  <script src="Scripts/Respond.min.js"></script>      
<![endif]-->

<script type="text/javascript" src="http://decisionsupport/WebLibrary/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Scripts/Site.js"></script>

<style type="text/css">

</style>

@cvrebert: yes, that one space caused IE8 to just ignore the conditional CSS. Instead of this:

<!-- [if lt IE 9]>

Needs to be this: <!--[if lt IE 9]>

3
  • 1
    Presumably Respond.js isn't working correctly. Have you checked everything mentioned on getbootstrap.com/getting-started/#support-ie8-respondjs ?
    – cvrebert
    Oct 21, 2014 at 1:16
  • Please see my <head> section above. If I remove the conditional CSS, <!-- [if lt IE 9]>, it works. What am I doing wrong? Oct 21, 2014 at 14:42
  • And yes, thanks for the link, my page should be good to go. Everything else bootstrap seems to work just fine. Oct 21, 2014 at 14:50

2 Answers 2

0

Hi have you made sure the script call to respond.js is bellow your CSS (but still in the head section of the HTML this caught me out initially).

0

Found my answer here, an extra @%^&* space in the CSS conditional mucks it all up. Are you kidding me?

To quote a great American, "DOH!"

Thanks to all who responded.

1
  • Ah, so <!--[if lt IE 9]> instead of <!-- [if lt IE 9]> ?
    – cvrebert
    Oct 21, 2014 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.