Search code examples
csshtmlhtml5shiv

IE not loading CSS sheet, HTML5 and html5shiv not helping

Im working on this html5 , using css, and my website works fine on chrome and firefox, but not in IE 10. Nothing written on css file applies on IE.

My website still remains locally and unfinished,but its driving me crazy as i tried so many answers to fix IE like html5shiv, and so on...

I checked on the validator also, and i only get errors of not recognized bootstrap attributes.

i would love if someone can get a look on my code

body {
  background-color: #D1E0B2;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
  display: block;
}
.fotos {
  max-width: 100%;
  height: auto;
}
.carousel-inner > .item > img {
  max-width: 100%;
  height: 360px;
  margin: 0 auto;
}
.tres-colunas {
  display: block;
  width: 360px;
  height: 170px;
  vertical-align: middle;
  border-bottom: 1px dashed #929493;
  border-top: 1px dashed #929493;
  margin: 10px;
  padding-top: 8px;
  float: left;
}
h3 {
  font-size: 1.6em;
  margin-top: 0;
}
.button-home {
  float: right;
  background-color: #A2BF4D;
  border-radius: 6px;
  color: #fff;
  font-family: 'Arial';
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #C2E066;
}
.button-home:hover {
  float: right;
  background-color: #9BB352;
  border-radius: 6px;
  color: #fff;
  font-family: 'Arial';
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #C2E066;
}
<!DOCTYPE html>

<head>



  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-language" content="pt" />
  <meta name="description" content=' - ' />
  <meta name="keywords" content=', ' />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="expires" content="-1" />

  <title>Yeshiva Or Israel College</title>
  <script>
    document.createElement("myHero")
  </script>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <link rel="shortcut icon" href="logo.png" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="myStyle.css" />

  <!--[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]-->


</head>

<body>
  <div class="container">
    <a>
      <img src="tres_rgb.jpg" alt="Logo Da Yeshiva" width="1130" height="145" />
    </a>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">Nossa filosofia</a>
      </li>
      <li><a href="#">Os Rabinos</a>
      </li>
      <li><a href="#">Campus</a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Arquivos
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Videos</a>
          </li>
          <li><a href="#">Fotos</a>
          </li>
          <li><a href="#">Textos</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Links Associados
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Camp Hashivenu</a>
          </li>
          <li><a href="#">Site Rav Karaguilla</a>
          </li>
          <li><a href="#">Canal do Rav Passy</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Fa&ccedil;a Parte</a>
      </li>
      <li><a href="#">Contato</a>
      </li>
    </ul>


    <p> <b> Yeshiv&#225; Or Israel College. </b><i> Educando com amor.</i>
    </p>


    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="carrosel_danca.jpg" alt="Dan&ccedil;a dos Bachurim" />
          <div class="carousel-caption">
            <h3>Uni&atilde;o</h3>
            <p>Alunos da Yeshiv&#225; dan&ccedil;ando no p&#225;teo.</p>
          </div>
        </div>

        <div class="item">
          <img src="carrosel_shabat.jpg" alt="Um Shabat Especial" />
          <div class="carousel-caption">
            <h3>Um Shabat Especial</h3>
            <p>A experiencia de Shabatot na Yeshiv&#225; eh algo especial.</p>
          </div>
        </div>

        <div class="item">
          <img src="carrosel_havdala_rs.jpg" alt="Havdala" />
          <div class="carousel-caption">
            <h3>Alegria no Judaismo</h3>
            <p>Momentos especiais e inesqueciveis</p>
          </div>
        </div>

        <div class="item">
          <img src="carrosel_estudo_fora.JPG" alt="Estudo ao ar livre" />
          <div class="carousel-caption">
            <h3>Estudo da Tor&#225;</h3>
            <p>Estudo da Tor&#225; em alto nivel.</p>
          </div>
        </div>
      </div>


      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <div class="tres-colunas">
      <div class="col-sm-3 col-md-6 col-lg-4">
        <img src="revista.png" alt="Revista Chai Or Israel" width="100" height="150" />
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8">
        <h3> Revista Chai </h3>
        <p>A cada ano s&atilde;o lan&ccedil;adas novas revistas da Yeshiv&#225; ricas em conteudo e qualidade. Clique aqui para assinar a sua:</p>
      </div>
      <button class="button-home">Assinar</button>

    </div>
    <div class="tres-colunas">
      <div class="col-sm-3 col-md-6 col-lg-4">
        <img src="calendario.png" alt="calendario" width="100" height="150" />
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8">
        <h3> Novidades por aqui </h3>
        <p>Fique por dentro dos novos eventos e acontecimentos.</p>
        <span style="padding:25px"> </span>
      </div>
      <button class="button-home">Confira</button>

    </div>
    <div class="tres-colunas">
      <div class="col-sm-3 col-md-6 col-lg-4">
        <img src="livro-dessler.jpg" alt="Livros da Yeshiv&#225;" width="100" height="150" />
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8">
        <h3> Livros da Yeshiv&#225; </h3>
        <p>A Yeshiv&#225; j&#225; publicou dezenas de livros. Venha conhecer quais!</p>
        <span style="padding:25px"> </span>
      </div>
      <button class="button-home">De uma olhada</button>

    </div>

  </div>


</body>

</html>

, im not loading the images, if its necessary tell me...

Solution

  • Can you check the same thing on server cause respond.js works only on server.