'Cant link stylesheet

I’m setting up a new website. I launched an Amazon EC2 instance with LAMP using Bitnami and I’m now starting to build the site, however when I try to link my index file (or any other) to my CSS file using the <link> tag all my CSS gets “imported” to the PHP file instead of creating the link. I also get some <noscript> tags along my source code which I haven’t put there. Any idea were those are coming from?

This is my code so far:

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div id="page-wrap" class="home-page">

    <form id="compare" name="compare" method="get" action="compare.php">
        <input type="text" id="stocks" name="stocks" placeholder="Input Stocks Symbols to Compare">
    </form>

</div>

</body>

</html>

And this is the source code that the browser is outputting:

<html> 

<head> 

<style>#page-wrap{width:960px;margin:0 auto}.home-page #compare{text-align:center;margin-top:200px}.home-page #compare #stocks{width:750px;height:55px;border:1px solid #ddd;border-bottom:2px solid #ccc;font-family:'Open Sans',sans-serif;color:#aaa;font-size:18px;text-transform:uppercase;text-align:center}.column{float:left;width:300px}</style> 

</head> 

<body><noscript><meta HTTP-EQUIV="refresh" content="0;url='http://wellmadestocks.com/?ModPagespeed=noscript'" /><style><!--table,div,span,font,p{display:none} --></style><div style="display:block">Please click <a href="http://wellmadestocks.com/?ModPagespeed=noscript">here</a> if you are not redirected within a few seconds.</div></noscript> 

<div id="page-wrap" class="home-page"> 

<form id="compare" name="compare" method="get" action="compare.php"> 
<input type="text" id="stocks" name="stocks" placeholder="Input Stocks Symbols to Compare"> 
</form> 

</div> 

<script pagespeed_no_defer="" type="text/javascript">//<![CDATA[
(function(){var e=encodeURIComponent,f=window,h=document,m="width",n="documentElement",p="height",q="length",r="prototype",s="body",t="&",u="&ci=",w="&n=",x="&rd=",y=",",z="?",A="Content-Type",B="Microsoft.XMLHTTP",C="Msxml2.XMLHTTP",D="POST",E="application/x-www-form-urlencoded",F="img",G="input",H="load",I="oh=",J="on",K="pagespeed_url_hash",L="url=",M=function(a,c,d){if(a.addEventListener)a.addEventListener(c,d,!1);else if(a.attachEvent)a.attachEvent(J+c,d);else{var b=a[J+c];a[J+c]=function(){d.call(this);b&&b.call(this)}}};f.pagespeed=f.pagespeed||{};var N=f.pagespeed,O=function(a,c,d,b,g){this.d=a;this.f=c;this.g=d;this.a=g;this.c={height:f.innerHeight||h[n].clientHeight||h[s].clientHeight,width:f.innerWidth||h[n].clientWidth||h[s].clientWidth};this.e=b;this.b={}};O[r].j=function(a){a=a.getBoundingClientRect();return{top:a.top+(void 0!==f.pageYOffset?f.pageYOffset:(h[n]||h[s].parentNode||h[s]).scrollTop),left:a.left+(void 0!==f.pageXOffset?f.pageXOffset:(h[n]||h[s].parentNode||h[s]).scrollLeft)}};O[r].i=function(a){if(0>=a.offsetWidth&&0>=a.offsetHeight)return!1;a=this.j(a);var c=a.top.toString()+y+a.left.toString();if(this.b.hasOwnProperty(c))return!1;this.b[c]=!0;return a.top<=this.c[p]&&a.left<=this.c[m]};O[r].l=function(){for(var a=[F,G],c=[],d={},b=0;b<a[q];++b)for(var g=h.getElementsByTagName(a[b]),k=0;k<g[q];++k){var v=g[k].getAttribute(K);v&&g[k].getBoundingClientRect&&this.i(g[k])&&!(v in d)&&(c.push(v),d[v]=!0)}b=!1;a=I+this.g;this.a&&(a+=w+this.a);if(0!=c[q]){a+=u+e(c[0]);for(b=1;b<c[q];++b){d=y+e(c[b]);if(131072<a[q]+d[q])break;a+=d}b=!0}this.e&&(d=x+e(JSON.stringify(this.h())),131072>=a[q]+d[q]&&(a+=d),b=!0);N.criticalImagesBeaconData=a;if(b){var c=this.d,b=this.f,l;if(f.XMLHttpRequest)l=new XMLHttpRequest;else if(f.ActiveXObject)try{l=new ActiveXObject(C)}catch(P){try{l=new ActiveXObject(B)}catch(Q){}}l&&(l.open(D,c+(-1==c.indexOf(z)?z:t)+L+e(b)),l.setRequestHeader(A,E),l.send(a))}};O[r].h=function(){for(var a={},c=h.getElementsByTagName(F),d=0;d<c[q];++d){var b=c[d],g=b.getAttribute(K);if("undefined"==typeof b.naturalWidth||"undefined"==typeof b.naturalHeight||"undefined"==typeof g)break;if("undefined"==typeof a[b.src]&&0<b[m]&&0<b[p]&&0<b.naturalWidth&&0<b.naturalHeight||"undefined"!=typeof a[b.src]&&b[m]>=a[b.src].n&&b[p]>=a[b.src].m)a[g]={renderedWidth:b[m],renderedHeight:b[p],originalWidth:b.naturalWidth,originalHeight:b.naturalHeight}}return a};N.k=function(a,c,d,b,g){var k=new O(a,c,d,b,g);M(f,H,function(){f.setTimeout(function(){k.l()},0)})};N.criticalImagesBeaconInit=N.k;})();pagespeed.criticalImagesBeaconInit('/mod_pagespeed_beacon','http://wellmadestocks.com/','O-_tWHm2s1',false,'BwP-b7zi7Po');
//]]></script></body> 

</html>

Any idea were all this might be coming from?

htmlcssnoscript


Solution 1:[1]

The most likely reason for this would be because Amazon is reading the CSS files with the wrong MIME type, and the Content-Type attribute is set incorrectly for the files, thus they are being read as another file type, probably simple .txt files, which are imported by the PHP script rather than displayed in the page as a <link> tag. To fix this, you'll need to set a custom header/metadata on the files specifying the correct MIME type.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 andrewgu

Related Questions