I’m not sure why but this dark grey div will not go all the way to the top of my page. I have tried setting the body margin and padding to 0, I have tried everything I can think of with margins, it still leaves a gap at the top. Why? P.S. I tried putting a CodePen link here, but when I put the code in, I kept getting errors and couldn’t seem to figure out why.
HTML:
<html>
<head>
<link href="\stylesheet.css" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="navbar-left" href="#"><img src="" alt="Browser does not support image."/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul id="navigationbar" class="nav navbar-nav">
<li><a id="homebutton">@Html.ActionLink("Home", "Index", "Home")</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
<li><a href="#">@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="#">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
<li><a href="#">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
<li><a href="#">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
<li><a href="#">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="#">Insurance Benefits Portal</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="#">Purchase Requests</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
<form id="searchbar" method="post">
<input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
<input type="submit" id="searchbutton" value="Go!" />
</form>
</div><!-- /.navbar-collapse -->
</nav>
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - SC2 MyLink</p>
</footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script type="text/javascript">
function active()
{
var search = document.getElementById('search');
if (search.value == "") {
search.value = "";
search.placeholder = "Search...";
}
}
function inactive()
{
var search = document.getElementById('search');
if (search.value == "Search...") {
search.value = "Search...";
search.placeholder = "";
}
}
</script>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
</body>
</html>
CSS:
#layoutBody {
background: #353c3e;
color: white;
}
#homebutton {
margin-bottom: 0;
margin-top: -30px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
#navigationbar {
height: 12em;
width: 60%;
}
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#searchbar {
float: right;
margin-top: 10%;
}