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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Google Chrome DIV position problem

    Hi, need some help here, I've been building my website using a template I liked, it's all working fine and how I want it to until i look at it in Chrom (my main browser).

    It looks how it should in both IE and Firefox, I had a friend conform this also.

    The issue is with the footer div being in the wrong place. (see attatched image).

    here is a link to the site for you to have a look at my problem: www.paulcliff.com

    and my css:
    I've highlightes the specific code in the css that deals with the footer.
    Code:
    /*
    Credit: http://www.templatemo.com
    */
    
    body {
    	margin: 0;
    	padding: 0;
    	line-height: 1.5em;
    	font-family: "Times New Roman", Times, serif;
    	font-size: 14px;
    	color: #ffffff;
    	
    }
    		
    a:link, a:visited { color: #f1de42; text-decoration: underline; font-weight: normal; } 
    a:active, a:hover { text-decoration: none; }
    
    p { margin: 0px; padding: 0px; }
    
    img { margin: 0px; padding: 0px; border: none; }
    
    .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
    
    .cleaner_h10 { clear: both; width:100%; height: 10px; }
    .cleaner_h20 { clear: both; width:100%; height: 20px; }
    .cleaner_h30 { clear: both; width:100%; height: 30px; }
    .cleaner_h40 { clear: both; width:100%; height: 40px; }
    .cleaner_h50 { clear: both; width:100%; height: 50px; }
    .cleaner_h60 { clear: both; width:100%; height: 60px; }
    
    .fl { float: left; }
    .fr { float: right; }
    
    .margin_r50 { margin-right: 50px; }
    
    .button_01 a {
    	display: block;
    	width: 115px;
    	height: 30px;
    	padding: 20px 0 0 45px;
      	background:  url(images/templatemo_button.png) no-repeat;
    	
    	text-align: center;
    	color: #fff;
    	font-size: 16px;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .button_01 a:hover {
    	color: #FFFF00;
    }
    
    h1 {
    	margin: 0 0 20px 0;
    	font-size: 30px;
    	font-weight: normal;
    	color: #e0cd4b;
    }
    
    h2 {
    	margin: 0 0 20px 0;
    	padding: 3px 0;
    	font-size: 28px;
    	font-weight: bold;
    	color: #303025;
    }
    
    h3 {
    	margin: 0 0 5px 0;
    	padding: 2px 0;
    	font-size: 16px;
    	font-weight: bold;
    	font-weight: bold;
    	color: #fcfa81;
    }
    
    .image_wrapper {
    	border: 1px solid #93856c;
    	padding: 5px;
    	margin-top: 3px;
    	margin-bottom: 5px;
    	background: #62543d;
    }
    
    .fl_image { float: left; margin-right: 15px }
    
    .fr_image { float: right; margin-left: 15px }
    
    .image_wrapper img { border: 1px solid #534733; }
    
    #templatemo_wrapper_outer {
    	width: 100%;
    	/*background: url(images/templatemo_body_top_outer.jpg) top center no-repeat; */
    }
    
    #templatemo_wrapper_inner {
    	width: 900px;
    	margin: 0 auto;
    }
    
    /* site title */
    
    #templatemo_header {
    	width:  900px;
    	height: 50px;
    	margin: 0 auto;
    }
    
    #templatemo_header  #site_title {
    	text-align: center;
    	padding-top: 10px;
    }
    
    #site_title a {
    	font-size: 24px;
    	color: #FFFFFF;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    #site_title a:hover {
    	font-weight: bold;	
    	text-decoration: none;
    }
    
    /* end of site title bar */
    
    /* content */
    
    #templatemo_content {
    	width: 900px;
    	height: 700px;
    	background: url(images/templatemo_content.png) no-repeat center top;
    }
    
    .em {
    	color: #f1de42;
    	font-style: italic;
    }
    
    #templatemo_content p {
    	text-align: justify;
    }
    
    .section_w320 {
    	width: 320px;
    }
    
    .section_w320 .w320_content {
    	float: right;
    	width: 180px;
    }
    
    #templatemo_content p {
    	margin-bottom: 10px;
    }
    
    .service_list {
    	margin: 0 0 20px 30px;
    	padding: 00;
    	list-style: none;
    }
    
    .service_list li {
    	margin: 0 0 15px 0px;
    	padding: 0 0 0 30px;
    	color: #d6b85b;
    	background: url(images/templatemo_list.png) top left no-repeat;
    }
    
    .portfolio_box {
    	float: left;
    	width: 190px;
    	margin-bottom: 20px;
    }
    
    .port_img {
    	width: 180px;
    	margin: 0 0 10px 0;
    	border: 5px solid #62543d;
    }
    
    .port_content {
    	clear: both;
    	width: 200px;
    }
    
    .portfolio_box .port_content p {
    	margin-bottom: 0;
    	padding-bottom: 0px;
    }
    
    #contact_form {
    	float: left;
    	width: 380px;
    	padding: 20px 0 0 0;
    }
    
    #contact_form form {
    	margin: 0px;
    	padding: 0px;
    }
    
    #contact_form form .input_field {
    	height: 18px;
    	width: 230px;
    }
    
    #contact_form form label {
    	float: left;	
    	display: inline-block;
    	width: 100px;
    	text-align: right;
    	margin-right: 10px;
    	font-size: 14px;	
    }
    
    #contact_form form textarea {
    	width: 230px;
    	height: 100px;
    }
    
    #contact_form form .submit_btn {
    	margin-left: 108px;
    }
    
    .address_info {
    	float: right;
    	padding: 10px 0 0 0;
    	width: 300px;
    	font-size: 14px;
    	line-height: 30px;
    }
    
    .address_info h3 {
    	border-bottom: 1px solid #ffffff;
    }
    
    /* footer */
    #templatemo_footer {
    	position: relative;
    	width:  829px;
    	height: 142px;
    	padding: 20px 50px;
    	color: #6d5d45;
    	text-align: left;
    	background: url(images/templatemo_footer.png) no-repeat;
    	left: 0px;
    	top: 0px;
    	overflow: hidden;
    }
    
    #templatemo_footer .bottom_img {
    	position: absolute;
    	width: 300px;
    	height: 198px;
    	top: -20px;
    	right: -80px;
    	background: url(images/coffee_cup.png) no-repeat;
    }
    
    #templatemo_footer a {
    	font-weight: bold;
    	color: #90816a;
    	text-decoration: none;
    }
    
    /* end of footer */
    
    	.stripViewer .panelContainer .panel ul {
    		text-align: left;
    		margin: 0 15px 0 30px;
    		padding: 0;
    	}
    	
    	.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
    		margin: 0;
    		position: relative;
    		width: 900px;
    		height: 550px;
    	}
    
    	/* These 2 lines specify style applied while slider is loading */
    	.csw { width: 100%; height: 550px; background: none; overflow: hidden; }
    	.csw .loading { margin: 200px 0 0 100px; text-align: center; width:900px; height: 460px; }
    
    	.stripViewer { /* This is the viewing window */
    		position: relative;
    		overflow: hidden; 
    		margin: auto;
    		width: 860px; /* Also specified in  .stripViewer .panelContainer .panel  below */
    		height: 420px;
    		margin: 0 20px;
    		clear: both;
    	}
    	
    	.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    		position: relative;
    		left: 0; top: 0;
    		width: 100%;
    		list-style-type: none;
    		/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
    	}
    	
    	.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
    		float:left;
    		height: 100%;
    		position: relative;
    		width: 860px; /* Also specified in  .stripViewer  above */
    		height: 420px;
    	}	
    	
    	.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
    		overflow: hidden;
    		margin: 40px 50px 10px 50px;
    		width: 750px;
    	}
    	
    	.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
    			display: block;
    			height: 80px;
    			margin: 0 50px; 
    			padding-top: 47px;
    			}
    		
    		.stripNav ul { /* The auto-generated set of links */
    			height: 58px;
    			width: 800px;
    			margin: 0;
    			padding: 35px 0 0 50px; /* adjust the position of top nav. menu items */
    			list-style: none; 
    		}
    		
    		.stripNav ul li {
    			float: left;
    			margin-right: 40px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
    			background: url(images/templatemo_menu_divider.png) top right no-repeat;
    		}
    		
    		.stripNav a { /* The nav links */
    			display: block;
    			height: 40px;
    			width: 110px;
    			padding: 18px 0 0 0;
    			
    			font-size: 18px;
    			font-weight: bold;
    			text-align: center;
    			color: #dac8a9;
    			
    			background: #c6e3ff;
    			text-decoration: none;
    			outline: none;
    		}
    	
    	.stripNav li a { background: none; }
    	/*
    	.stripNav li.tab2 a { background: #60c }
    	.stripNav li.tab3 a { background: #63f }
    	.stripNav li.tab4 a { background: #63c }
    	.stripNav li.tab5 a { background: #00e } */
    	
    	.stripNav li a:hover  {
    		color: #1f1910;
    		background: url(images/templatemo_menu_hover.png) bottom center no-repeat;
    	}
    	
    	.stripNav li a.current {
    		color: #1f1910;
    		background: url(images/templatemo_menu_hover.png) bottom center no-repeat;
    	}
    	
    	.stripNavL, .stripNavR { /* The left and right arrows */
    		position: absolute;
    		top: 230px;
    		text-indent: -9000em;
    	}
    	
    	.stripNavL a, .stripNavR a {
    		display: block;
    		height: 0px;
    		width: 0px;
    	}
    	
    	.stripNavL {
    		left: 0;
    	}
    	
    	.stripNavR {
    		right: 0;
    	}
    	
    	.stripNavL {
    		background: url("images/arrow-left.gif") no-repeat center;
    	}
    	
    	.stripNavR {
    		background: url("images/arrow-right.gif") no-repeat center;
    	}
    If anyone can offer any help it would be greatly appreciated,

    Thanks.
    Attached Thumbnails Attached Thumbnails Google Chrome DIV position problem-chromeissue.jpg  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The validator result shows a couple of mismatched div tags - that could well be your problem - try fixing these first.

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    But why should those mismatched tags be a problem only for Chrome?

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    But why should those mismatched tags be a problem only for Chrome?
    Because different browsers use different rendering engines and hence may well will render invalid code differently. In any case we need to rule out the invalid code and mismatched tags before looking for something more complex.

    For info, the problem manifests in Safari as well - since Chrome and Safari are both based on webkit.

    Here it looks like the problem is this invalid code here (which is one of the mismatches that the validator picks up):

    Code:
    <h3>&nbsp;</h3>
                            <form id="form1" name="form1" method="post" action="">
                              <label>
                              <div>
                              </label>
                            </form></div>
                            <p class="style1">&nbsp;</p>
    Get rid of both of those div tags and the footer gets aligned. Presumably Chrome is parsing the </div> but not the <div>, resulting in the footer being outside the wrapper and not centred. IE and FF behave differently.

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thanks for your help, that has fixed the problem, I'm some what a novice when it comes to web design (hence the template).

    Ive had a look at the validator and will go through and correct the errors later tonight.

    Thanks again!


  •  

    Posting Permissions

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