- This topic is empty.
-
AuthorPosts
-
February 12, 2013 at 12:11 am #42666millersgarageMember
Hi all,
I’m unable to get rid of the blank space before the header of the site begins:
[dev.msl.org](http://dev.msl.org “dev.msl.org”)
Relevant segment of stylesheet below (I apologize for the long segment, but I’m really not sure where the issue is:
body {
margin:0px;
padding:0px;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:80%;
background-image:url(‘images/background.jpg’);
background-repeat:no-repeat;
background-position:top center;
background-color:#3073b4;
}
h1, h2, h3, h4 {
margin-top:0px;
}
h2.pagetitle {
color:#003366;
padding-bottom:5px;
margin-bottom:10px;
border-bottom:1px solid #003366;
font-size:2em;
}
a {
color:#3073b4;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#8C0003;
}
a:visited {
color:#003366;
}
a:visited:hover {
text-decoration:underline;
color:#8C0003;
}
img {
border:none;
}
pre {
margin:0px;
padding:0px;
font-family:”Times New Roman”, Times, serif;
font-size:14px;
}
ul {
list-style-position:inside;
}
/* Structure */#wrapper {
width:1000px;
margin:0px;
padding:0px;
margin:auto;
position:relative;
right:-55px;
}
#header {
float:left;
width:890px;
margin:0px;
padding:15px;
padding-bottom:10px;
background-image:url(‘images/msl-header-left.png’);
background-repeat:no-repeat;
background-position:top center;
margin-top:10px;
margin-left:-63px;
padding-left:150px;
padding-top:20px;
z-index:10;
!important
}
#header h1 {
margin:0px;
padding:0px;
width:100%;
color:#FFFFFF;
font-size:3em;
}
p.tagline {
margin:0px;
padding:0px;
font-style:italic;
color:#DEE7FE;
font-size:1.7em;
text-align:center;
}
.header-left {
float:left;
width:590px;
}
#header a {
margin:0px;
padding:0px;
text-decoration:none;
color:#FFFFFF;
}
#main {
float:left;
width:900px;
margin:0px;
padding:15px;
padding-bottom:0px;
background-image:url(‘images/body-bg.png’);
background-repeat:repeat-y;
background-position:center;
}
#sidebar {
float:right;
width:220px;
margin:0px;
padding:0px;
margin-right:15px;
padding-left:20px;
border-left:1px solid #999999;
}
#content {
float:left;
background-color:#FFFFFF;
width:610px;
padding-left:15px;
}
#footer {
float:left;
padding-right:15px;
padding-left:15px;
height:50px;
width:907px;
margin:auto;
background-image:url(‘images/footer-bg.png’);
background-position:center bottom;
background-repeat:no-repeat;
}
#footer-bottom {
float:left;
padding-right:15px;
padding-left:15px;
width:907px;
margin:auto;
}
.footer-p {
margin:0px;
padding:5px;
text-align:center;
width:750px;
margin:auto;
font-size:1.2em;
color:#FFFFFF;
}
.footer-p a {
color:#FFFFFF;
text-decoration:underline;
}
.footer-p a:hover {
color:#003366;
}Thanks to any and all who may help.
February 12, 2013 at 12:36 am #124155ChesterParticipantYou have set a
margin-top: 10px;
at your #header..February 12, 2013 at 4:15 am #124163JochimParticipantI don’t really know what you’re trying to do here..
#header {
float:left;
width:890px;
margin:0px;
padding:15px;
padding-bottom:10px;
background-image:url(‘images/msl-header-left.png’);
background-repeat:no-repeat;
background-position:top center;
margin-top:10px;
margin-left:-63px;
padding-left:150px;
padding-top:20px;
z-index:10; !important
}First you say padding: 15px then margin: 0px and at the bottom you write
margin-top: 10px;
margin-left:-63px;
padding-bottom:10px;
padding-left:150px;
padding-top:20px;The css will apply the last rules over the ones it reads first, so it’s kind of pointless to put the first margin and padding there..
I think it’s better to remove the -top,-right,-bottom,-left rules and put them all together in one margin/padding. This way you won’t make that mistake again :)
So you would do padding: 20px 15px 10px 150px; and margin: 10px 0px 0px -63px; but if you want no white space on top you replace margin 10px with 0pxThe order to put the 4 together is (if I’m correct) margin: top right bottom left;
I hope this helped you!
February 12, 2013 at 7:48 am #124189Paulie_DMemberThe page & header structure & CSS does seem a little odd…ll the divs etc seem to be floated left and I can’t figure out why.
Certainly removing
margin-top: 10px;
from #header will fix the basic issue.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.