Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background moving around on different pages

    Hi there,

    On this site: http://batesbeach.bc.ca

    The body has a background aligned right which is the column of images that starts below the weather thingy ma bob. As far as I can tell it should just sit nicely in the same spot on every page, since it's just the page background, but it seems to be moving around on each page. Can anyone explain why?

    CSS:

    Code:
    /*----*/
    /* Page layout divs */
    /*----*/
    #d1 {
    	background-color: #1F2935;
    	float: left;
    	background-image: url(images/header_image.jpg);
    	background-repeat: repeat-x;
    	height: 107px;
    
    }
    #d2 {
    	background-color: #1F2935;
    	float: right;
    	text-align:right;
    	width: 477px;
    	background-image: url(images/header_bg.gif);
    }
    #head_container {
    	background-color: #1F2935;
    	float: left;
    	background-image: url(images/headbar.jpg);
    	height: 107px;
    }
    #nav_container {
    	background-color: #1F2935;
    	float: left;
    	width: 100%;
    	background-image: url(images/nav_bar_bg.gif);
    	height: 30px;
    	z-index:100;
    }
    #nav_container img{
    	float:right;
    }
    #page_container {
    	margin: auto;
    	width: 99.99%;
    	min-width: 950px;
    	text-align: right;
    }
    #content_container {
    	min-width: 950px;
    	float: left;
    	width: 100%;
    	z-index:1;
    }
    
    #content {
    	background-color: #e4e4e4;
    	margin-right:253px;
    	padding-left: 2%;
    	padding-right: 2%;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: small;
    	z-index:2;
    	color:#000033;
    	margin-bottom: 4em;
    	position:relative;
    }
    #content ul {
    	margin: 0px 15px;
    }
    
    #right_column {
    	float: right;
    	width: 253px;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    }
    #footer {
    	padding-bottom: 1em;
    	text-align: center;
    	font-size: small;
    	position: fixed;
    	left: 5%;
    	right: 5%;
    	bottom: 0px;
    	margin-right: 255px;
    }
    
    /*----*/
    /*navigation styling*/
    /*----*/
    
    * {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */
    
    /* the horizontal menu starts here */
    div#nav {
    	width:600px; /* sizes the nav div at a fixed width */
    	float:left;
    	background-color:#CCF; /* colors the div */
    	background-image: url(images/nav_bar_bg.gif);
    	z-index:200;
    	}
    div#nav li {
    	float:left;	/* causes the list to align horizontally instead of stack */
    	position:relative; /* positioning context for the absolutely positioned drop-down */
    	list-style-type:none;	/* removes the bullet off each list item */
    	border:1px solid black; /* creates dividing lines between the li elements */
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: medium;
    	font-weight: bold;
    	min-width: 126px;
    	text-align:center;
    	height:26px;
    	z-index:300;
    	}
    div#nav li:first-child {
    	border-left:1px solid; /*the first vertial line on the menu */
    	}
    
    div#nav li:hover { 
    	background-color:#D1C9B9; /*sets the background of the menu items */
    	}
    div#nav a {
    	display:block;
    	padding:1px 6px; /*creates space each side of menu item's text */
    	text-decoration:none;	 /* removes the underlining of the link */
    	color:#D1C9B9;	/* sets the type color */
    	line-height: 24px;
    	font-size:small;
    	z-index:800;
    	}
    
    /* the menu ends here */
    /* the drop-down starts here */
    div#nav ul li ul {
    	margin:0; 
    	z-index:900; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
    	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
    	width:12em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
    	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
    	left:-1px; /*aligns the drop exactly under the menu */
    	}
    #pyt ul li {
    	background-color:#B3916B;
    }
    #h ul li {
    	background-color:#1F2935;
    }
    #ri ul li{
    	background-color: #827977;
    }
    #bn ul li{
    	background-color: #455D67;
    }
    
    
    div#nav ul li ul li {padding:0;
    	width:100%; /* makes the list items fill the list container (ul) */
    	border-left:1px solid; /*  three sides of each drop-down item */
    	border-bottom:1px solid;
    	border-right:1px solid;
    	z-index:1000;
    	height:auto;
    }
    div#nav ul li ul li a {
    	padding:.3em .5em;
    	font-size:small;
    	text-align:left;
    	color:#D1C9B9;	/* sets the type color */
    	line-height:normal;
    }
    
    
    div#nav ul li ul li:first-child {
    	border-top:3px solid; /*the top edge of the dropdown */
    	}
    /* make the drop-down display as the menu is rolled over */
    div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
    div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
    
    
    div#nav ul li:hover a {color:black;}
    div#nav ul li:hover a ul li a{
    	color:#D1C9B9;	/* sets the type color */
    }
    
    
    /* THE HACK ZONE - */
    /* hack for IE (all flavors) so the menu has a vertical line on the left */
    * html div#nav ul {
    	float:left; /* makes the ul wrap the li's */
    	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
    	}
    * html h3 hr {
    	margin-bottom: 1%;
    }
    
    /* add a top line to drops and pops in IE browsers - can't read :first-child */
    * html  div#nav ul li ul {
    	border-top:1px solid #069;
    	border-left:0px; /* stops the drop inheriting the ul border */
    	}
    
    /* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
    /* the first-level drop stays open for 100px below the bottom but at least it works */
    /* this can be reduced to as little as 22px if you don't have pop-outs */
    	@media all and (min-width: 0px){
       body div#nav ul li ul {padding-bottom:22px;}
       }
    /*end Opera hack */
    
    
    /* finally after feeding values to all others, we deal with MAc5 IE */
    /* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
    /* we present the drop down choices in a row and never show any second-level drops */
     /* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("   */
    @import("css/ie51_menu_hack.css"); 
    
    
    
    /* END OF HACK ZONE */
    /* the drop-down ends here */
    /* END OF LIST-BASED MENU */
    
    
    /*----*/
    /*Formatting Styles*/
    /*----*/
    
    #h {
    	background-color: #1F2935;
    }
    #ri {
    	background-color: #827977;
    }
    
    body {
    	background-color: #e4e4e4;
    	background-image:url(images/right_column_filler.jpg);
    	background-position:right;
    	background-repeat:repeat-y;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	behavior: url(csshover.htc);
    	min-width:950px;
    }
    #pyt {
    	background-color: #B3916B;
    }
    #bn {
    	background-color: #455D67;
    	}
    
    #content #flash_map {
    	text-align: center;
    	padding: 0px;
    	height: 490px;
    	width: 660px;
    	}
    #content div.regular {
    	margin-bottom: 3%;
    	overflow:hidden;
    }	
    #content div#map {
    	overflow:visible;
    }
    
    div#content div#map{
    	border-width: 1px 4px;
    	border-style: solid;
    	border-color: #000000 #827977;
    	margin: 15px auto;
    	background-color:white;
    	float:none;
    	width: 500px;
    	height: 300px;
    }
    
    div#content div#map div {
    	margin-bottom:0;
    }
    
    #content .content_div {
    	width: 80%;
    	padding: 2px 10px;
    	border-width: 1px 4px;
    	border-style: solid;
    	border-color: #000000 #827977;
    	margin: 15px auto;
    	text-align: center;
    	background-color:white;
    	float:none;
    }
    a:link {
    	color: #C64F00;
    	text-decoration: underline;
    }
    a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    a:visited {
    	color: #827977;
    }
    a:hover {
    	color: #1F2935;
    	text-decoration: none;
    }
    #content img {
    	border: 2px solid;
    	margin: 7px;
    }
    #content_container #content .content_div #reservation_form input {
    	margin: 2px;
    }
    h5 {
    	font-size:small;
    }
    
    h4 {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	color:#003366;
    	font-variant:small-caps;
    	font-size:large;
    }
    
    hr {
    	height: 2px;
    	color:#000033;
    	margin-bottom: 3%;
    }
    #content a {
    	font-family:Georgia, "Times New Roman", Times, serif;
    }	
    
    #content #amenities td {
    	color:white;
    	padding: .2em;
    }
    
    h3 {
    	font-size: x-large;
    	font-variant: small-caps;
    	color: #34343C;
    }
    #catch_info{
    	margin:auto;
    	text-align:center;
    }
    Thanks to anyone who can help me out here.

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man, everytime I give up and post something I magically solve it. The solution was to add a vertical position of 0 to the background position.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •