Only one External css not loading in website - html

Question

I am facing a weird problem with my external css files. I am creating jSP website where i have 3 external CSS files for Mobile, Tablet and Desktop respectively. The css files are loading fine in the Local development environment. Their include statments are below.
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" media="only screen and (min-width:769px)">
The JSTL statements are working fine and in in source code the statements are
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" />
<link rel="stylesheet" type="text/css" href="/ns/css/mobile_eng.css" media="only screen and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="/ns/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)">
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" media="only screen and (min-width:769px)">
Now my problem is that the tablet_eng.css file is not loading. Even though the file is there in the view source. In chrome i noticed that the tablet_eng.css losses the code format and appears as a single string.
#charset "utf-8"; /* CSS Document */ body { font-size:.75em; } /*HeaderDiv */ .phoneMenu { display:none; } .LogImage { display:none; } .ArabicHome a { background-color:#e9ecef; position:absolute; top:45px; right:30px; font-size:1.3em; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; width:25px; height:25px; background:url(../image/arabic_icon2.PNG) no-repeat center; background-size:20px 20px; border:solid #bfc7cf 1px; } .HeaderDivWrapper { border-bottom:solid #2a4660 4px; width:100%; position:relative; overflow:hidden; } .HeaderDiv { max-width:768px; background:url(../image/head_back.png) no-repeat; background-size:auto 100%; background-position:right top; padding:18px; height:100px; } #headerLogo p { background:url(../image/logo_mun_tab.png) no-repeat; padding-left:80px; padding-top:37px; } #menuDiv ul li { background:url(../image/arrow_down_tab.PNG) no-repeat center right; margin-left:15px; padding-right:10px; } #menuDiv { /*float:right; */ margin-top:100px; } /*end HeaderDiv */ /*Roll CSS*/ #rollDivWrapper { width:100%; position:relative; } #rollDiv { position:relative; max-width:768px; } #rollText { width:99.5%; max-width:768px; background:rgb(255,24,26); background-color:rgba(255,24,26, .8); padding:8px; color:#FFF; position:relative; left:0%; right:0; bottom:0; top:auto; font-size:.8em; border:none; -webkit-border-top-right-radius:0em; -webkit-border-bottom-left-radius:0em; -moz-border-radius-topright:0em; -moz-border-radius-bottomleft:0em; border-top-right-radius:0em; border-bottom-left-radius:0em; } #rollText a { position:relative; left:50%; line-height:2em; padding:.2em; -webkit-border-radius:.15em; -moz-border-radius:.15em; border-radius:.15em; } .bx-wrapper .bx-prev { display:none; } .bx-wrapper .bx-next { display:none; } #rollText h2 { font-size:2em; font-weight:bold; margin-bottom:.5em; margin-right:15px; width:100px; float:left; } #rollText p { font-size:1em; margin-bottom:.5em; } #rollText span { font-weight:bold; float:right; } #changeimg1 { display:none; } #changeimg2 { display:block; } #Bullet { position:absolute; top:55%; right:5%; } #Bullet ul li { display:inline; margin-left:20px; } #Bullet ul li img { width:15px; height:15px; } /*End of Roll CSS*/ /*followLink CSS*/ #followUS h2 { display:none; } #pclink { display:none; } #smartlink { display:block; float:right; } #smartlink ul li { display:inline; } #demo2 { margin-top:0px; } #Projects { width:30%; margin-left:3%; float:left; } .Projects1 { } .Projects2 { } .Projects3 { } #followLink { max-width:1000px; margin:0 auto; padding:18px; position:relative; } #followUSWrapper { width:100%; position:relative; float:right; bottom:0; margin-top:18px; } #shareThis { width:25%; position:relative; float:left; display:none; } #followUS { width:50%; position:relative; float:right; bottom:0; } #likeNet { float:right; width:50%; position:relative; } #likeNet #likeNetIn { float:left; width:66px; background:url(../image/share_box.png) no-repeat center top; margin-right:10px; margin-bottom:0px; padding-top:5px; } #likeNet ul li span { margin-left:20px; font-size:.9em; color:#0195f8; } #likeNet ul li img { margin-top:11px; } #likeNet ul li { display:inline; } /* End followLink CSS*/ /*news And Event CSS*/ /*End of news And Event CSS*/ /*Advertisement Roll*/ #AdvWrapper { display:none; } /*End of Advertisement Roll*/ /*footer CSS*/ #footerWrapper { background-color:#2a4660; } #footer { max-width:1000px; margin:0 auto; padding:25px; position:relative; overflow:hidden; } .footerOne { float:left; width:25%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; } .footerTwo { float:left; width:25%; margin-left:3%; border-right:solid #FFF 1px; height:100%; padding-right:10px; padding-bottom:400px; margin-bottom:-400px; } .footerThree { float:left; width:28%; margin-left:3%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; display:none; } .footerThreeMob { background-color:#09F; position:fixed; bottom:0; right:0%; padding:5px; display:block; width:80px; } .footerThreeMob p a { color:#2a4660; } .footerThreeMob p a:link { color:#FFF; text-decoration:none; } .footerThreeMob p a:visited { color:#FFF; text-decoration:none; } .footerThreeMob p a:hover { color:#bfc7cf; text-decoration:none; } .footerThreeMob p a:active { color:#2a4660; text-decoration:none; } .footerThreeMobIn { margin-top:10px; display:none; } .footerFour { float:left; width:25%; margin-left:3%; padding-bottom:400px; margin-bottom:-400px; } #Copyright { float:left; width:100%; margin-top:15px; margin-bottom:0px; padding-bottom:400px; margin-bottom:-400px; background-color:#2a4660; padding-top:15px; z-index:1; } /*End of footer CSS*/ #ContactMap { margin-top:145px; margin-left:20px; } .LoginMenuIn { margin-left:0%; }
Update: i have used web developer plugin and it is catching an error "Timestamp: 2/8/2014 5:26:42 PM
Error: The stylesheet http://websrv.municipality.gov.bh/ns/css/tablet_eng.css was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://websrv.municipality.gov.bh/ns/indexEn.jsp
Line: 0"

Answer 1

What is your browser's width? Because notice the media="only screen and (min-width:481px) and (max-width:768px)"> on it? It has a max-width:768px which will only take effect on view size with width of 481 - 768 pixels. Out of those ranges, css will load but will not be implemented.

Answer 2

A few things to try:
Run your css through a validator to make sure it isn't a simple syntax error.
Make sure it's not a caching issue – if you can't change the server settings, try a cachebuster by writing a version parameter to the .css file.
Concatenate your CSS files – you should do this anyways, along with minification, for optimized performance. Grunt is a good JavaScript taskrunner you can put into your deployment strategy that can handle this for you. GitHub example.
Switch to Sass (cleaner than regular CSS), and use Compass which concatenates and minifies for you.
Otherwise it's a little difficult to pinpoint the problem without more information.

Answer 3

Solved by Writing a Java Filter and adding text/css to all requests with .css extension.
if(request.getHeader("accept")!=null && request.getHeader("accept").indexOf("css") != -1){
response.setHeader("Content-Type", "text/css");
}