I run my project on localhost in IE8 and IE10, the page is first loaded without the CSS applied, and after a second it applies the CSS and renders it properly.However, when I run it in IE9 everything seems to work fine.
I wonder why is this happening. Can someone tell me what is wrong and how am I going to solve this matter? Thanks!
EDIT
html code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<?php
error_reporting(E_ALL ^ E_NOTICE);
$urls= explode("/",$_SERVER['PHP_SELF']);
$location=$urls[2];
?>
<title>GASS Security || <?php echo $header_title;?></title>
<link href="css/gass_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<script src="js/html5.js"></script>
<script src="js/jquery-1.10.1.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!-- Place in the <head>, after the three links -->
<script>
$(document).ready(function() {
/
$('#menu img').hover(function() {
var src = $(this).attr('src').substr(0, ($(this).attr('src').length - 4)) + 'Over.jpg';
$(this).attr('src', src)
}, function() {
var src = $(this).attr("src").replace('Over', '');
$(this).attr('src', src);
})
/
$('.sumTitle').click(function() {
$(this).next().slideToggle('slow')
$(this).toggleClass('show')
})
});
</script>
<script src="js/jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
/*
slideshowSpeed: 100, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 100,
controlNav: true,
directionNav: true,
pausePlay: true,
pauseText: 'Pause The Slide Show',
playText: 'Playing The Slide Show'
*/
});
});
</script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<a href="#" class="rg-image-nav-prev">Previous Image</a>
<a href="#" class="rg-image-nav-next">Next Image</a>
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
<script type="text/javascript" src="Chat.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43258818-1', 'gasssecurity.com');
ga('send', 'pageview');
</script>
</head>