Twitter Bootstrap Question posted in

How to solve this Twitter BootStrap issue on a simple page that have to run also on Internet Explorer 8?

I have the following problem: I have created this very simple HTMLCSS page that use the Twitter BootStrap CSS framework (this is putted into a JSP page but this is not important):

<html>
    <head>
        <link href="<c:url value="resources/css/style.css" />" rel="stylesheet">

        <link href="<c:url value="resources/css/bootstrap.css" />" rel="stylesheet">
        <link href="<c:url value="resources/css/bootstrap-theme.css" />" rel="stylesheet">



        <title>Login Page</title>

    </head>

    <header>
      <div class="container">
        <img src="resources/img/logo2.png" class="logo">


        <div id="login-box">

            <c:if test="${not empty error}">
                <div class="error">${error}</div>
            </c:if>

            <form class="form-inline" name='loginForm' action="<c:url value='/j_spring_security_check' />" method='POST'>
              <div class="form-group">
                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                <input type='text' name='username' class="form-control" id="exampleInputEmail3" placeholder="Nome Utente">
              </div>

              <div class="form-group">
                <label class="sr-only" for="exampleInputPassword3">Password</label>
                <input type='password' name='password' class="form-control" id="exampleInputPassword3" placeholder="Password">
              </div>

              <!--  <button type="submit" class="btn btn-default">Sign in</button> -->
              <input id="ricorda" name="submit" type="submit" class="btn btn-default" value="login" />

              <br>

              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </form>
        </div>

      </div>
    </header>

    <body onload='document.loginForm.username.focus();'>
        <jsp:include page="header.jsp"/>
        <div id="intestazione">
            <h1 align="center">WIFI e PNSD</h1>
        </div>
        <div id="login-box">

            <h3>Accesso al sistema</h3>

        </div>
         <jsp:include page="footer.jsp"/>

         <script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>

    </body>
</html>

It works fine in FireFox and in the last version of Explorer, the problem is that this page have to run fine also in Internet Explorer 8 and trying with this browser I have many problem.

Using the IE developer tool and using the IE8 compatibility mode it seems that it can’t see the header tag, why?

How can I try to solve this situation and correctly use BootStrap on IE-8?

Tnx

Tags:

2

Answers


  1. 0

    Html5 is not supported in IE8, so you would have to “manually” add them in the DOM. You can use the following js, add it to your head. To read more about it you can do so in this blogpost

        <!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->
    Login or Signup to reply.
  2. 0

    Just add to your header section: 

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search