html - Only one External css not loading in website -

i facing weird problem external css files. creating jsp website have 3 external css files mobile, tablet , desktop respectively. css files loading fine in local development environment. include statments 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 , (max-width:480px)"> <link rel="stylesheet" type="text/css" href="<c:out value="${pagecontext.request.contextpath}"/>/css/tablet_eng.css" media="only screen , (min-width:481px) , (max-width:768px)"> <link rel="stylesheet" type="text/css" href="<c:out value="${pagecontext.request.contextpath}"/>/css/style_eng.css" media="only screen , (min-width:769px)"> 

the jstl statements working fine , in in source code 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 , (max-width:480px)"> <link rel="stylesheet" type="text/css" href="/ns/css/tablet_eng.css" media="only screen , (min-width:481px) , (max-width:768px)"> <link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" media="only screen , (min-width:769px)"> 

now problem tablet_eng.css file not loading. though file there in view source. in chrome noticed tablet_eng.css losses code format , appears single string.

@charset "utf-8"; /* css document */ body { font-size:.75em; } /*headerdiv */ .phonemenu { display:none; } .logimage { display:none; } .arabichome { 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 { 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 , event css*/ /*end of news , 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 { 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: have used web developer plugin , catching error "timestamp: 2/8/2014 5:26:42 pm error: stylesheet http://websrv.municipality.gov.bh/ns/css/tablet_eng.css not loaded because mime type, "text/html", not "text/css". source file: http://websrv.municipality.gov.bh/ns/indexen.jsp line: 0" 

what browser's width? because notice media="only screen , (min-width:481px) , (max-width:768px)"> on it? has max-width:768px take effect on view size width of 481 - 768 pixels. out of ranges, css load not implemented.