Forum Moderators: not2easy
Firstly how do I make the white backgroun stretch to fill the gaps on this page:
Secondly, on the same page when I hit return or have content in some divs, for no apparent reason a space appears above the div, if you view the above link in IE 7 (i guess 6 too) you'll see - above "Content for id "content" Goes Here".
Am i going completely the wrong way about this?
My styles sheet is:
body {
margin: 0px;
background-image: url(../assets/layout_r1_c1.jpg);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: left top;
background-color: #2288ED;
padding: 0px;
}
#container {
width: 850px;
margin: auto;
position: relative;
}
#header {
background-attachment: scroll;
background-image: url(../assets/layout_r1_c3.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #2288ED;
height: 82px;
}
#header #form1 {
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
font-weight: normal;
font-variant: normal;
color: #3C2D00;
letter-spacing: 1px;
text-align: center;
padding-top: 42px;
padding-right: 43px;
padding-left: 435px;
padding-bottom: 15px;
}
#footer {
background-image: url(../assets/layout_r4_c3.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left bottom;
background-color: #FFFFFF;
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
height: auto;
text-align: center;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 11px;
letter-spacing: 2px;
color: #666666;
clear: both;
position: relative;
}
#leftnav {
width: 142px;
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
position: relative;
float: left;
}
#leftnavtop {
background-attachment: scroll;
background-image: url(../assets/green_r1_c1.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 9px;
width: 142px;
}
#leftnavbottom {
width: 142px;
background-attachment: scroll;
background-image: url(../assets/green_r3_c1.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-color: #A6E12D;
}
#content {
background-color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
margin-left: 157px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.fields {
background-color: #FFFFFF;
border: 1px solid #A47B00;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A47B00;
vertical-align: middle;
}
.buttons {
background-color: #C29301;
border: 1px solid #402C00;
color: #402C00;
margin-left: 5px;
font-size: 13px;
vertical-align: middle;
height: 19px;
}
What's wrong?
Thanks
NevyNev
[edited by: jatar_k at 8:58 pm (utc) on Aug. 2, 2007]
[edit reason] no urls thank you [/edit]
#container { background: #fff; }
p { margin-top: 0; }
the reason there was a gap above the content is because your browser is automatically applying a margin-top to the <p> tag. so you just have to override it and set it back to zero.
and you forgot to make the #container white. setting that to white clears up all the other gaps.
NevyNev
