April 18th, 2013, 05:00 PM
-
White Space at top of Page
Hi guys, I am new here. I am struggling with some CSS stuff. When applying the following CSS sheet, and I remove the header section, the main container still doesnt sit at the top of the page. There is what looks like a few pixels gap. It is really frustrating. Any ideas what I can do to make the white space go away? Thanks in advance...
Code:
@charset "utf-8";
/* CSS Document */
/* Resets */
ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}
h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}
p {
padding:0;
margin:0 0 20px 0;
}
a:link, a:visited {
text-decoration:underline;
color:#000;
}
a:hover {
text-decoration:none;
}
ul li {
padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
width:200px;
}
/* Headers */
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
.logo {
font:2em Arial;
margin:0 0 10px 0;
padding:0;
width:200px;
color:#fff;
}
/* Containers */
body {
background:lightslategray;
font-family:Arial;
font-size:0.8em;
}
#container, footer {
background:#fff;
width:920px;
margin:0 auto;
padding:20px;
}
header {
width:940px;
padding:10px;
margin:0 auto 10px auto;
}
#container {
min-height:500px;
border-radius:5px 5px 0 0;
}
footer {
border-radius:0 0 5px 5px;
}
.widget {
margin-bottom:20px;
}
.widget h2 {
margin:0 0 10px 0;
padding:0 5px;
font-weight:normal;
border-bottom:1px solid #ddd;
}
.widget .inner {
margin:0 10px;
}
/* Navigation */
nav {
float:left;
}
nav ul {
margin:0;
}
nav ul li {
display:inline;
margin-right:10px;
}
nav ul li a {
text-decoration:none;
}
nav ul li.current {
font-weight:bold;
}
nav ul li a.last {
border-right:0;
}
/* Aside */
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-left:15px;
}
/* Login */
#login li.link {
margin-top:5px;
}
/* Footer */
footer {
border-top:1px dashed #ddd;
color:#999;
}
/* Misc */
.clear {
clear:both;
}
/* CSS Document */
Last edited by Kravvitz; April 18th, 2013 at 06:01 PM.
Reason: reformatted the code
April 19th, 2013, 03:45 PM
-
I can probably fix it but I need the html code too.
April 19th, 2013, 03:55 PM
-
All browsers have their own "default" css style.
To reset this, just use body{padding:0;margin:0;} .
That should fix it for you.