Menu
This is the second time I have encountered an unnecessary scrollbar, and the first time I fixed it by adding body{margin:0;}; however, I have no idea what is going on this time. Any ideas?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="Style-Sheets/ie.css" /><![endif]-->
<!--[if !IE 7]><link rel="stylesheet" type="text/css" href="Style-Sheets/!ie7.css" /><![endif]-->
<!--[if OPERA]><link rel="stylesheet" type="text/css" href="Style-Sheets/opera.css" /><![endif]-->
<link rel="icon" href="Favicons/favicon.jpg" />
<!--<base target="_blank" />-->
<title>Home</title>
</head>
<body>
<div id="wrap">
<div id="header">
<p class="title">Title</p>
<p class="nav-down"><span class="verticle-bar">|</span> <a class="navigation" href="index.html">Home</a> <span class="verticle-bar">|</span> <a class="navigation" href="about.html">About</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah/index.html">blah</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah2.html">blah2</a> <span class="verticle-bar">|</span></p>
</div>
<div id="body">
</div>
</div>
<div id="footer">
<div class="footer">
<span class="verticle-bar">|</span> 
<a class="footer-link" href="">About The Developer</a> 
<span class="verticle-bar">|</span>
</div>
</div>
</body>
</html>
CSS: (from style.css, which is (or should be) the only style sheet affecting the page)
html {
height:100%;
margin:0;
padding:0;
background-color:#FFFFFF;
text-align:center;
font-family:arial;
line-height:1.5;/*test*/
color:black;
}
body {
margin:0;
height:100%;
}
p {
margin:0;
padding:0;
}
#wrap {
min-height:100%;
}
#header {
z-index:2;
position:fixed;
top:0;
left:0;
right:0;
height:4.25em;
background-color:#6D8CE7;
font-family:gabriola;
line-height:1em;
letter-spacing:0.2em;
}
.title {
font-size:3em;
line-height:1.0em;
color:white;
}
#body {
margin-left:5em;
margin-right:5em;
padding-top:4.25em;
overflow:auto;
padding-bottom:4em; /* must be same height as footer */
}
#footer {
position:relative;
margin-top:-4em; /* negative value of footer height */
height:4em;
clear:both;
}
.footer {
position:absolute;
left:0;
right:0;
bottom:0;
}
.verticle-bar {
color:black;
font-family:gabriola;
}
a.navigation:link {
text-decoration:none;
color:black;
}
a.navigation:visited {
text-decoration:none;
color:black;
}
a.navigation:hover {
text-decoration:underline;
color:black;
}
a.navigation:active {
text-decoration:underline;
color:black;
}
.footer-link {
font-family:gabriola;
}
a.footer-link:link {
text-decoration:none;
color:#CC5500;
}
a.footer-link:visited {
text-decoration:none;
color:#CC5500;
}
a.footer-link:hover {
text-decoration:underline;
color:#CC5500;
}
a.footer-link:active {
text-decoration:underline;
color:#CC5500;
}
738
A quick fix is to add overflow: hidden to the CSS for your #footer.
Note: A scrollbar will still appear if your #body content flows out of the the viewport.
Fiddle
#footer {
overflow:hidden;
position:relative;
margin-top:-4em;
/* negative value of footer height */
height:4em;
clear:both;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
