My HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Okmulgee Online</title>
<base href="/home.cshtml" />
<link href="/Styles/main.css" rel="Stylesheet" type="text/css" media="screen" />
<![if ! lte IE 8]><link href="/Styles/not_lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]>
<!--[if lte IE 8]><link href="/Styles/lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]-->
<link href="/Plugins/jquery-ui.css" rel="Stylesheet" type="text/css" />
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
<script src="/Resources/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Plugins/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
<script src="/Plugins/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Plugins/accounting.min.js" type="text/javascript"></script>
<script src="/Scripts/PluginConfigurations.js" type="text/javascript"></script>
<script src="/Scripts/main.js" type="text/javascript"></script>
</head>
<body>
<!-- HTML Content here -->
</body>
</html>
CSS Styling:
body
{
width: 100%;
margin: auto;
}
#topBar
{
width: 100%;
height: 8px;
background-color: #57bf2a;
margin: auto;
}
div#bannerBar
{
height: 150px;
width: 100%;
margin: auto;
height: 150px;
background-color: #fff;
}
/* Additional CSS code goes here */
JavaScript File:
jQuery(function ($) {
// JavaScript functions and event handlers go here
});
If you encounter any issues with white space or formatting across different browsers, consider adjusting the CSS properties such as margins, padding, and positioning elements to achieve a consistent look.