straight to the point; there is a margin border in my site and I can't seem to remove it... I'v tried everything, disabling some of the css,.. I really don't know what that border is doing there.
image:
the index code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XylCro Home</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// grab the initial top offset of the navigation
var stickyNavTop = $('.nav ul').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var stickyNav = function(){
var scrollTop = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scrollTop > stickyNavTop) {
$('.nav ul').addClass('sticky');
} else {
$('.nav ul').removeClass('sticky');
}
};
stickyNav();
// and run it again every time you scroll
$(window).scroll(function() {
stickyNav();
});
});
</script>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<!-- div socialbar and logo -->
</div>
<div class="nav">
<ul>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</div>
<!-- other divs -->
<div id="content">
<!-- content here -->
<p>Content comes here</p>
</div>
<div id="footer">
<!-- copyright here -->
</div>
</div>
</div>
</body>
</html>
css code:
@charset "utf-8";
/* CSS Document */
hr{
display:block;
}
html{
background-image:url(img/static/bg.jpg);
background-repeat:repeat;
background-position:top center;
}
body{
font-family:helvetica;
font-size:1em;
line-height:1.4;
}
#wrapper{
background-color:#C00;
background-image:url(img/static/headertest.fw.png);
background-position:top center;
background-repeat:no-repeat;
padding:0;
}
#header{
height:260; /* need to change */
}
/* social and logo */
.sticky {
position:fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
/* content and other divs */
.nav ul{
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li{
display: inline-block;
margin-right: -4px;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a:active {
background-color: #fff;
color: #444;
cursor: default;
}
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
bodytag has default margin. To prevent it, addSee fiddle with your code with fix.