I have 2 different background images for the home and about pages. The about page bg’s height is greater than the home page (#content). When i specify the height for the about page (#content2), it shifts the entire site a few pixels to the left! I’ve never had this issue before and have Googled and searched on here unsuccessful. I tried changing the heights to 100%, that didn’t seem to work either. Can someone show me what the issue is? Thanks!
My CSS:
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
margin-top: -2px;
height: 100%;
}
#lft {
background-image: url(images/lft.jpg);
background-repeat: repeat-y;
background-position: left;
width: 8px;
}
#rt {
background-image: url(images/rt.jpg);
background-repeat: repeat-y;
background-position: right;
width: 8px;
}
#top {
background-image: url(images/hdr_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 148px;
width: 900px;
}
/*NAVIGATION*/
#nav {
height: 39px;
width: 100px;
background-image: url(images/nav_bg.jpg);
background-repeat: repeat;
background-position: left top;
}
.home {
width: 101px;
height: 39px;
margin: 0 0 0 20px;
float: left;
}
.home a {
display: block;
width: 101px;
height: 39px;
background-image:url(images/home.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.home a:hover {
width: 101px;
height: 39px;
background-image:url(images/home2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.home2 {
width: 101px;
height: 39px;
margin: 0 0 0 20px;
background-image:url(images/home2.jpg);
float: left;
}
.about {
width: 101px;
height: 39px;
float: left;
}
.about a {
display: block;
width: 101px;
height: 39px;
background-image:url(images/about.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.about a:hover {
width: 101px;
height: 39px;
background-image:url(images/about2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.about2 {
width: 101px;
height: 39px;
background-image:url(images/about2.jpg);
float: left;
}
.rm {
width: 152px;
height: 39px;
float: left;
}
.rm a {
display: block;
width: 152px;
height: 39px;
background-image:url(images/rm.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.rm a:hover {
width: 152px;
height: 39px;
background-image:url(images/rm2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.rm2 {
width: 152px;
height: 39px;
background-image:url(images/rm2.jpg);
float: left;
}
.contact {
width: 101px;
height: 39px;
float: left;
}
.contact a {
display: block;
width: 101px;
height: 39px;
background-image:url(images/contact.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.contact a:hover {
width: 101px;
height: 39px;
background-image:url(images/contact2.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.contact2 {
width: 101px;
height: 39px;
background-image:url(images/contact2.jpg);
float: left;
}
/*NAVIGATION END*/
#content {
background-image: url(images/body_bg2.jpg);
background-repeat: no-repeat;
height: 454px;
width: 900px;
}
#content2 {
background-image: url(images/about_bg.jpg);
background-repeat: no-repeat;
height: 782px;
}
#home_image {
float: left;
margin: -197px 0px 0px 461px;
}
#home_details {
float: left;
}
h3 {
font: Helvetica;
font-size: 20px;
color: #3c2d23;
font-weight: 100;
}
#home_heading {
float: left;
margin: 35px 0px 0px 80px;
}
#divider {
background-image: url(images/divider.png);
width: 281px;
height: 1px;
margin: 78px 0px 0px 95px;
}
#home_text {
float: left;
width: 346px;
height: 240px;
margin: 20px 0px 0px 80px;
font: Helvetica;
font-size: 12.5px;
color: #3c2d23;
font-weight: 200;
}
#about_details {
float: left;
}
#about_heading {
float: left;
margin: 35px 0px 0px 140px;
}
#about_text {
float: left;
width: 730px;
height: 542px;
margin: 20px 0px 0px 80px;
font: Helvetica;
font-size: 12.5px;
color: #3c2d23;
font-weight: 200;
}
#copy_insert {
float: left;
margin: -110px 0px 0px 240px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #736357;
text-decoration: none;
padding-top: 15px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
height: 50px;
width: 920px;
margin-top:-8px;
}
.footer_link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}