1 Replies - 224 Views - Last Post: 17 November 2017 - 04:30 PM

#1 MichShell  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • Posts: 3
  • Joined: 09-November 17

css3 not showing up in Internet Explorer after move it to linux server

Posted 10 November 2017 - 07:45 AM

For some reason, when I look at the web page in chrome or IE on my pc, my web page looks good. When I hosted it on the Linux Server, it doesn't show images in the css. Any ideas? I can't find anything online about it. I checked, and the file names are referred to in correct case. Slashes are in the right direction for files. I tried moving the css file to the same dir as the index page but nothing changed. Last I checked, index.html validates. The css page validator says it's not sure about webkit, but I'm assuming that's ok.

The only clue I have is that the server log says:
"[error] [client 10.140.42.227] File does not exist: /opt/apps/html/catv2/media/globe_transp_gradation.png"), url("media, referer: http://ltrkarkvm391.mgmt.windstream.net/catv2/index.html"

The filename is correct as shown above and the file can be listed in that location. The file permissions:
drwxrwxr-x 3 e0169756 netsys-hpov 4096 Nov 9 10:29 FunStuff
-rwxrwxr-x 1 e0169756 netsys-hpov 2000 Nov 9 12:34 index.html
drwxrwxr-x 2 e0169756 netsys-hpov 4096 Nov 8 12:11 media
-rwxrwxr-x 1 e0169756 netsys-hpov 3232 Nov 9 12:34 catvStyles.css

media dir file:
-rwxrwxr-x 1 e0169756 netsys-hpov 327311 Nov 8 12:11 globe_transp_gradation.png

link to web page: web page

index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele , Adam ">

<style type="text/css">


</style>
<!--[if lt IE 9]>
   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
  <header  class="bgFun"><!--role="banner"-->
    <h1>Wi</h1>
    <h2 id="headerH2Pos">CATV Monitoring System</h2>
  </header>
  <div id="page">
  <nav  id="navBakImg"><!--role="navigation"-->
    <ul>
     <li><a href="FunStuff/ClusterMap.html">Map Home</a></li> <!--MapHome.html-->

	</ul>
   </nav>

   <main  id="middle"><!--role="main"-->
	<h2>Purpose</h2>
    <p>To provide CATV Monitoring to our internal customers</p>
     <!--</p>-->
    <h2>Mapping </h2>
    <p>Click the Map Home link on the left to see how the network is doing </p>
	<img class="imgFix" src="media/WIN_Vert_Green_Logo.png"  height="18" width="15" alt="Logo" title="Wi" >
     
    </main>
    <aside ><!--role="complementary" -->
      <img class="imgFix" src="media/WIN_Vert_Green_Logo.png"  height="18" width="15" alt="Logo" title="Wi" >
   	 <h2>How To Start</h2>
   	 <p>See directions</p>
   </aside>
   </div> <!-- end of flex container -->
   <footer ><!--role="contentinfo"-->
      <a href="https://www.linkedin.com/in/micheleturofcleary" target="_blank"><img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png"  height="50" width="50" alt="Tree" title="Created by Michele Cleary" ></a>
      <br>Copyright &copy; 2017
      <script>
        document.write('Last Modified: ' + document.lastModified);
      </script>
  <br>

   </footer>
</div>
</body>
</html>




catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
      background-color: #330000;
      background-image: url("media/green.gif");


}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper {  background-color: #F4E8BC;
	        width: 90%;
			margin: auto;
            color: #003300;
}
h1, h2 { color: #003300; }
header {
         background-repeat: no-repeat;
	    background-color:transparent;
}
.bgFun{background-image: url("media/globe_transp_gradation.png"),
		 url("media/windmill_transp_gradation.png"),url("media/MetalGalvanized0014_M.jpg");
		 background-position: left, right;
		 background-size:45%,30%,cover;
		 background-repeat:no-repeat;
		 background-color:transparent;}
h1 { text-align: center;
      font-size: 300%;
	 padding: 5% 0;
     text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside {  padding: 0 1em;
}
.imgFix { width: 25%;
      height: auto;
}
nav ul { list-style-type: none;
         font-size: 1.2em;
		 padding-left: 0;
}
nav a { text-decoration: none;
        background-color: #666666;
        display:block;
        text-align:center;
        width:100%;
        margin:1em auto;
        border:solid .08em #339900}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
              background-color:#000000;}
footer { text-align: center;
         font-size: 80%;
		 font-style: italic;
		 color: #003300;
		 padding: 2.5%;
}
#page{display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
    padding-right:1em;
    background-image: url("media/CardboardPlain0016_2_M.jpg");
    font-size:90%;}
nav{-webkit-flex: 1;
    flex: 1;
}
main{-webkit-flex: 7;
     flex:7;
}
aside{-webkit-flex: 2;
      flex: 2;
}
.tree { width:3em;
        height: auto;
        float:right;}

@media only screen and (max-width: 1024px) {
            body { margin: 0; padding: 0; }
            #wrapper { width: auto; margin: 0; }
		    h1 { font-size: 200%; }
			nav li { padding: 0 0.5em;
				     font-size: 1.2em;
                	}
		#page{-webkit-flex-direction: column;
                  flex-direction: column;
            }
            nav ul{display: -webkit-flex;
                   display: flex;
                   -webkit-flex-direction: row;
                   flex-direction: row;
                   webkit-justify-content: center;
                   justify-content: center;
            }
            .imgFix { width: 30%;
            height: auto;}


}
@media only screen and (max-width: 768px) {
         	nav{-webkit-order: 1;
                order: 1;
            }
            nav ul{-webkit-flex-wrap: wrap;
                   flex-wrap: wrap;
            }
            section{display:none;}
            .imgFix { width: 35%;
            height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
             left:26%;
             }




Is This A Good Question/Topic? 0
  • +

Replies To: css3 not showing up in Internet Explorer after move it to linux server

#2 OverloadedCore  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 9
  • Joined: 01-October 17

Re: css3 not showing up in Internet Explorer after move it to linux server

Posted 17 November 2017 - 04:30 PM

Could you give a directory tree structure of where your files are?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1