.HTML File not rendering properly over intranet server

Question

I am very new to writing HTML. This is my first project and it is all self taught so my knowledge on correct layouts/techniques are very limited. I am using Dreamweaver to complete this project and my knowledge of it is as well limited. I am making this site using Dreamweaver's built-in bootstrap framework.

I took this project at my current job as an extra duty with no knowledge on how to go about doing it. Over the last few months I have been teaching myself since I enjoy learning.

My issue is probably simple, when I open the .html file from the folder it is contained in it loads perfect See example 1. When loaded from the plant intranet all the bootstrap seems to not be working at all. (See example 2) as well as my transform CSS.

I have stopped styling with CSS until I get this issue resolved so please excuse the alignment.

Producing the finish product is currently on hold until I can get some clarity on the solution to my issue and would greatly appreciate any feedback.

Example 1 Example 2. The css for bootstrap.css is not included in this so if you would like to see that as well let me know. It is inside dreamweaver and as far as I know should require no editing.

This is my HTML as of now.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maintenance</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/stylez.css" rel="stylesheet" type="text/css">

    <!-- 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]-->
  </head>
  <body>

  <div class="container">
    <nav class="navbar navbar-default">
  <div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <a class="navbar-brand" href="#">Home</a></div>
<!-- Brand and toggle get grouped for better mobile display -->
      <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="defaultNavbar1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Training </a></li>
            <li class="active"></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
</form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
      <!-- /.container-fluid -->
  </nav>
<div class="jumbotron"><img src="Maintenance.png" class="img-responsive" alt="Placeholder image"> <br>
</div>
  </div>

  <div class="container piccontrol">
    <div class="row">
      <div class="col-sm-4 a1control">
      <div class="A1">
      <div class="A1back"></div>
      <div class="A1front"></div>
     </div>
     </div>
      <div class="col-sm-4 tubcontrol">
      <div class="tub3d">
      <div class="Tubback"></div>
      <div class="TubFront"></div>
      </div>
      </div>
      <div class="col-sm-4 StkPControl">
      <div class="StkP">
      <div class="StkPback"></div>
      <div class="StkPfront"></div>
      </div>
      </div>
      <div class="row">
      <div class="col-sm-6 midleftcontrol">
       <div class="midleft">
        <div class="midleftBack"></div>
        <div class="midleftFront"></div>
        </div>
      </div>
      <div class="col-sm-6 midrightcontrol">
      <div class="midright">
        <div class="midrightBack"></div>
        <div class="midrightFront"></div>
      </div>
      </div>
      <div class="row">
      <div class="col-lg-4 TR3Dcontrol">
        <div class="TR3D">
        <div class="TRback"></div>
        <div class="TRFront"></div>
        </div>
      </div>

      <div class="col-lg-4 CUR3Dcontrol">
        <div class="CUR3D">
          <div class="CURback"></div>
          <div class="CURfront"></div>
          </div>
      </div>
      <div class="col-lg-4 Finalcontrol">
        <div class="Final">
        <div class="Finalback"></div>
        <div class="Finalfront"></div>
        </div>
      </div>
    </div>
      <div class="row">
          <div class="col-lg-12 bottomcontrol">
          <div class="Bottom">
          <div class="bottomfront"></div>
          <div class="bottomback"></div>
          </div>
        </div>
        </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    </div>
    </div>
  </body>
</html>

And this is my css as of current.

    @charset "utf-8";
.jumbotron {
    background-image: url(../Background1.jpg);
    height: 30em;
    background-position: left 33%;
    background-size: cover;

}
.piccontrol {
    width: 1150px;
    height: 1094px;
    max-width: 1150px;
}
.a1control {
    height: 247px;
    width: 251px;
}


.A1 {
    width: 100%;
    height: 100%;

}

.A1 .A1front {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #B33790;
    background-repeat: no-repeat;
    background-image: url(../_assets/Sitespecific/topleft.png);
    background-position: 100% 100%;
}
.A1 .A1back {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    list-style: inside;
    font-size: 25px;
}
.A1:hover .A1front {
    transform: perspective( 600px ) rotateY( -180deg );
}
.A1:hover .A1back {
    transform: perspective( 600px ) rotateY( 0deg );
}
.tubcontrol {
    height: 247px;
    width: 251px;
}
.tub3d {
    width: 100%;
    height: 100%;

}

.tub3d .TubFront {
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #23D1B4;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(../_assets/Sitespecific/topmid.png);
}

.tub3d .Tubback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    list-style: inside;
    font-size: 25px;
}

.tub3d:hover .TubFront {
    transform: perspective( 600px ) rotateY( -180deg ); 
}

.tub3d:hover .Tubback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.StkPControl {
    height: 247px;
    width: 251px;
}
.StkP {
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
}

.StkP .StkPfront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #D17A0A;
    background-image: url(../_assets/Sitespecific/topright.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

.StkP .StkPback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    list-style: inside;
}
.StkP:hover .StkPfront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.StkP:hover .StkPback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.midleftcontrol {
    width: 510px;
    height: 375px;
}
.midleft {
    width: 100%;
    height: 100%;
}

.midleft .midleftFront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-image: url(../_assets/Sitespecific/midleft.png);
    background-color: #635B5B;
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
.midleft .midleftBack {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    list-style: inside;
}
.midleft:hover .midleftFront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.midleft:hover .midleftBack {
    transform: perspective( 600px ) rotateY( 0deg );
}
.midrightcontrol {
    width: 530px;
    height: 375px;
}
.midright {
    width: 100%;
}

.midright .midrightFront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #A69999;
    background-image: url(../_assets/Sitespecific/midright.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
.midright .midrightBack {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    list-style: inside;
}
.midright:hover .midrightFront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.midright:hover .midrightBack {
    transform: perspective( 600px ) rotateY( 0deg );
}
.TR3Dcontrol {
    width: 292px;
    height: 250px;
}

.TR3D {
    text-align: center;
    float: left;
    width: 100%;
}


.TR3D .TRFront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 292px;
    height: 250px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-repeat: no-repeat;
    background-color: #204FBD;
    background-image: url(../_assets/Sitespecific/botleft.png);
}
.TR3D .TRback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 292px;
    height: 250px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    background-size: cover;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    font-size: 25px;
}
.TR3D:hover .TRFront {
    transform: perspective( 600px ) rotateY( -180deg );
}
.TR3D:hover .TRback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.CUR3Dcontrol {
    width: 291px;
    height: 250px;
}
.CUR3D {
    float: left;
    text-align: center;
    width: 100%;
}

.CUR3D .CURfront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 291px;
    height: 250px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #A839CC;
    background-image: url(../_assets/Sitespecific/botmid.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

.CUR3D .CURback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 291px;
    height: 250px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    list-style: inside;
    font-size: 25px;

}

.CUR3D:hover .CURfront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.CUR3D:hover .CURback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.ASRS {
    width: 175px;
    height: 175px;
    float: left;
    text-align: center;
}
.ASRS .ASRSfront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 175px;
    height: 175px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #EFEE22;
}

.ASRS .ASRSback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 175px;
    height: 175px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    list-style: inside;
    font-size: 25px;
}

.ASRS:hover .ASRSfront {
    transform: perspective( 600px ) rotateY( -180deg );
}
.ASRS:hover .ASRSback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.Finalcontrol {
    width: 333px;
    height: 250px;
}
.Final {
    width: 100%;
    float: left;
    text-align: center;
}

.Final .Finalfront {
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    color: #FCFCFC;
    background-color: #4824DC;
    background-image: url(../_assets/Sitespecific/botright.png);
    background-repeat: no-repeat;
}

.Final .Finalback {
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width: 100%;
    height: 100%;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
    font-family: bitter;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    list-style: inside;
    font-size: 25px;
}
.Final:hover .Finalfront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.Final:hover .Finalback {
    transform: perspective( 600px ) rotateY( 0deg );
}
.bottomcontrol {
    width: 747px;
    height: 148px;
}
.Bottom {
    width: 100%;
}
.Bottom .bottomfront {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    border: thick solid #0A0909;
    background-color: #AFF11A;
    background-image: url(../_assets/Sitespecific/last.png);
}
.Bottom .bottomback {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
    background-color: #C53133;
    border: thick groove #2A2323;
    background-repeat: no-repeat;
}




.Fac3d {
    width: 747px;
    height: 148px;
}

.Fac3d .Fac3dfront {

    width: 100%;
    height: 100%;
    border-radius: 7px;

}
.Fac3d .Fac3dback {



}

.Fac3d:hover .Fac3dfront {
    transform: perspective( 600px ) rotateY( -180deg );
}

.Fac3d:hover .Fac3dback {
    transform: perspective( 600px ) rotateY( 0deg );
}

What does the URL look like when "loaded from the plant intranet"? Apparently the browser doesn't know hat the location of the css files is when you do. — Mr Lister, Oct 05 '16 at 05:59
"http://wilweb2.wilson.com/maintsite/maint123/index1.html" is the address. All the css is in a separate folder inside maint123 folder. I also copied them out of the css folder and into the maint123 folder and I get the same results. — MrEggnormous, Oct 05 '16 at 06:01
Are there any errors in the browser console about not able to load resources? — Mr Lister, Oct 05 '16 at 06:04
No Errors or warnings. There is however 4 messages. This is the contents of the messages. HTML1300: Navigation occurred. File: index1.html HTML1122: Internet Explorer is running in Enterprise Mode emulating IE8. HTML1300: Navigation occurred. File: index1.html HTML1122: Internet Explorer is running in Enterprise Mode emulating IE8. — MrEggnormous, Oct 05 '16 at 06:07
ah ha, think I got it. There is actually a code in the HTML that is auto generated by dreamweaver. that I needed to include in the head of the document. However the CSS isn't rendering now, but the bootstrap is. thank you for the help. — MrEggnormous, Oct 05 '16 at 06:21
Oh, so Intranet is causing IE to emulate IE8, which means that all the newer CSS features won't be recognised (transition, transform etc). Open the developer tools with F12 and see what mode IE is in. — Mr Lister, Oct 05 '16 at 06:21
Is there anything I can do to bypass the IE8 emulation? I kinda have transform and transition code in my css. — MrEggnormous, Oct 05 '16 at 06:24
Does [this question](http://stackoverflow.com/questions/3449286/force-ie-compatibility-mode-off-using-tags) help? — Mr Lister, Oct 05 '16 at 06:44
It does to some degree. Now just trying to figure a way around it defaulting into enterprise mode without having to go through the IT department. At my company it is usually a large headache to get them to even listen to you. The upper management for them is pretty difficult. isn't doing anything. Its still defaulting to IE8 in enterprise browser profile. If I change to EDGE with desktop profile. Works perfect. Thanks for all the help. Mr. Lister. — MrEggnormous, Oct 05 '16 at 08:21
The issue ended up being the server that they had me hosting the intranet site on was outdated and did not support HTML5 or CSS3. Moved it to another server and it all worked out fine. — MrEggnormous, Dec 14 '16 at 13:48

.HTML File not rendering properly over intranet server

0 Answers0