I have an HTML page that uses CSS and JavaScript to center the content of the page in the middle of the browser when the browser window is resized.
When I use the standard HTML5 Doctype declaration, all browsers completely ignore my CSS files. I have no clue why. When I remove the HTML5 Doctype, then they work just fine again. The page displays the same (incorrectly) in both Chrome, FF and IE. All wrong.
Here is the beginning of the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stylesheet-mobile.jsp" >
<link rel="stylesheet" type="text/css" href="/stylesheet-mobile-frontpage.jsp" >
<meta name="viewport" content="width=device-width" />
<script src="/javascript/jquery/jquery-1.8.3.min.js"></script>
<script src="/javascript/resize-fit.jsp"></script>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
Any clues?
Are you sure you’re sending the right content-type header for those files? I see you’re using Java to generate the CSS. Without the proper content type the browser may not understand or honor them.