When using the materialize framework, I've noticed that adding <!DOCTYPE html> causes my CSS to not be recognized. However, everything works fine without <!DOCTYPE html>. Any suggestions on how to resolve this issue?
Update :
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Material</title>
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
</script>
<style>
body{background-color:#fcfcfc;}
.logo{
height:70%;
margin-top:10px;
margin-left:10px;
}
@media only screen and (max-width: 992px){
.logo{
margin-left:0px;
}
}
.button-collapse{
margin-left:5px;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue lighten-1">
<div class="nav-wrapper">
<a href="index.php" class="brand-logo"><img src="images/logo.png" class="logo" /></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="index.php" class="waves-effect waves-light">Home</a></li>
<li><a href="#" class="waves-effect waves-light">Login</a></li>
<li><a href="#" class="waves-effect waves-light">Signup</a></li>
<li><a href="#" class="waves-effect waves-light">Contact Us</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="index.php" class="waves-effect waves-light">Home</a></li>
<li><a href="#" class="waves-effect waves-light">Login</a></li>
<li><a href="#" class="waves-effect waves-light">Signup</a></li>
<li><a href="#" class="waves-effect waves-light">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
<div class="row header-img">
</div>
</body>
</html>