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 6 of 6
  1. #1
    MJo
    MJo is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    footer floats to left in IE, overflow issue?

    I'm trying display a footer on the bottom of my page. On some pages it floats properly and on others it floats to the left. I've compared pages and checked DIVs for errors and tried some fixes through my css file but can't seem to find the problem. It seems to only be a problem in IE 8, not Firefox.


    Here's the first page (home)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Distribution" content="Global"/>
    <meta name="Robots" content="index,follow"/>
    
    
    <title> Northwest Sports Center in Eureka, Montana</title>
    <meta name="keywords" content="fishing supplies in Eureka Montana, eureka montana sporting supplies, eureka montana hunting, fish and game in Eureka Montana, Eureka Montana fishing, Eureka Montana Sports, Eureka Montana Outfitters, Eureka Montana Paintball supply, Northwest Sports Eureka, hunting in Eureka Montana" />
    <meta name="description" content="Northwest Sports Center in Eureka is your source for fishing and hunting supplies." />
    
    
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
    <meta name="google-site-verification" content="4o8Ko_n7rCvrrx7bcF6IjEhz86XAQh9t9aLB3H9X_Jc" />
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-17696218-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    </head>
    
    
    <body>
    
    <div id="fixed"> <!--liquid layout outline --> <br /><br /><br /><br /><br /><br />
    
    <div id="header">
         <?php include("header_nav.inc.php"); ?>	
    	</div>
    
    <div class="colmask leftmenu">
    	<div class="colleft">
    		<div class="col1">
    			<!-- Column 1 start -->
    	<div id="main">
    						
    						<h2>Welcome!</a></h2>
    <br />
    			<strong>Northwest Sports Center in Eureka, Montana</strong> is a family-owned business specializing in fishing and hunting supplies. Owners Tammy and Lonny  Owen have owned the business for 9 years. Over the years, a few things have changed and the building has just recently been remodeled. Stop in for some small-town service and local fishing tips.  </p>  
    				<br /><br />
    			<br /><br />
    			<div align="center">
    			<img src="nwscimages/NWS_photo_.jpg" width="650" height="300" alt="photo of Northwest Sports in Eureka" /><br />
    				 </div>
    	
    				
    				
    				  <?php include("storeinfo.inc.php"); ?>
    				
    		
    
    		</div>
     
    </div><!-- col1 end -->
    
    		
    		
    		
    		<div class="col2">
    			<!-- Column 2 start -->
     
      <?php include("quote1.inc.php"); ?> 
    		
     <br />
    			<?php include("knowus.inc.php"); ?>
    	<h3>Try Our Custom Search!</h3>	
    			<p>. . . for fishing, hunting, camping supplies . . .</p>
    			<form action="#" class="searchform"/>
    				<p>
    				<input name="search_query" class="textbox" type="text"/>
      				<input name="search" class="button" value="Search" type="submit"/>
    				</p>			
    			
    			
    	
    				
    			
    			<!-- Column 2 end -->
    		
    	</div> 
    </div><!-- colleft end -->
       
    
     
    
    <?php include("footer.inc.php"); ?>
    </div><!-- colmask end -->
    
    <!-- end of liquid layout outline  -->
      
     </div>
    </body>
    </html>
    And the second page (products)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Distribution" content="Global"/>
    <meta name="Robots" content="index,follow"/>
    
    <title>Products for sale by Northwest Sports Center in Eureka, Montana</title>
    
    
    <meta name="keywords" content="fishing supplies in Eureka Montana, eureka montana sporting supplies, eureka montana hunting, fish and game in Eureka Montana, Eureka Montana fishing, Eureka Montana Sports, Eureka Montana Outfitters, Eureka Montana Paintball supply, Northwest Sports Eureka, hunting in Eureka Montana" />
    
    
    
    
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
    <meta name="google-site-verification" content="4o8Ko_n7rCvrrx7bcF6IjEhz86XAQh9t9aLB3H9X_Jc" />
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-17696218-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    </head>
    
    
    <body>
    
    <div id="fixed"> <!--liquid layout outline --> <br /><br /><br /><br /><br /><br />
    
    <div id="header">
         <?php include("header_nav.inc.php"); ?>	
    	</div>
    
    <div class="colmask leftmenu">
    	<div class="colleft">
    		<div class="col1">
    			<!-- Column 1 start -->
    	<div id="main">
    		
    		
    					
    			
    	
    				
    		<h2>We are preparing to sell products online.  </h2>
    				
    					<p> Check back soon! </p>
    				
    					
    		</div>		
    
    			</div>
    
    <br /> <br /><br /> 
    </div>
    				  
    
    		
    						<!-- Column 1 end -->
    		
    		
    		
    		<div class="col2">
    			<!-- Column 2 start -->
     
     
    				 
    				
    		
     <br /><br />
    
    			
    			
    	
    		
    			<!-- Column 2 end -->
    		
    	</div>
    </div>
    
    
      <?php include("footer.inc.php"); ?>
    </div>
    
    
    <!-- end of liquid layout outline  -->
     </div>
    </body>
    </html>
    And the css I'm using:
    Code:
    body {
    	margin:0;
    	padding:0;
    	border:0;			/* This removes the border around the viewport in old versions of IE */
    	width:100%;
    		background: #336666;
    	min-width:600px;    	/* Minimum width of layout - remove line if not required */
    					/* The min-width property does not work in old versions of Internet Explorer */
    	font-size:90%;
    	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
    	color: #000000; 
    	text-align: center;
    }
    
    	a, a:visited {	
    	color: #336666;
    	background: inherit;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #000000;
    	background: inherit;
    	text-decoration:none;
    }
    h1, h2, h3 {
    	margin:.8em 0 .2em 0;
    	padding:0;
    	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
    	font-weight: Bold;
    	color: #663300;
    }
    
    h1 {
    	font-size: 190%;	
    	font-weight: normal;
    	color: #663300;
    }
    h2 {
    	font-size: 130%;
    	text-transform: uppercase;
    	color: #88ac0b;
    }
    h3 {
    	font-size: 130%;	
    }
    p {
    	margin:.4em 0 .8em 0;
    	padding:0;
    }
    img {
    	margin:10px 0 5px;
    }
    #ads img {
    	display:block;
    	padding-top:10px;
    }
    
    
    /* search form */
    .searchform {
    	background-color: transparent;
    	border: none;	
    	margin: 0 0 0 3px; padding: 5px 0 10px 0;	
    	width: 220px;	
    }
    .searchform p { margin: 0; padding: 0; }
    .searchform input.textbox { 
    	width: 130px;
    	color: #777; 
    	height: 18px;
    	padding: 2px;	
    	border: 1px solid #E5E5E5;
    	vertical-align: top;
    }
    .searchform input.button { 
    	width: 60px;
    	height: 24px;
    	padding: 2px 5px;
    	vertical-align: top;
    }
    
    
    /* Header styles */
    #header {
    	clear:both;
    	width:100%;
    	background-color: #cc9966;
    }
    #header img
    {
    	border-style: none;
    }
    
    #header {
    	border-bottom:1px solid #cc9966;
    	text-align: center;
    }
    #header p,
    #header h1,
    #header h2 {
    	padding:.4em 15px 0 15px;
    	margin:0;
    }
    #header ul {
    	clear:left;
    	width:100%;
    	list-style:none;
    	margin:10px 0 0 0;
    	padding:0;
    }
    #header ul li {
    	display:inline;
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    #header ul li a {
    	display:inline;
    	margin:0 0 0 1px;
    	padding:3px 10px;
    	text-align:center;
    	background-color: #cc9966;
    	color:#000;
    	text-decoration:none;
    	position:relative;
    	left:15px;
    	line-height:1.3em;
    }
    
    #header ul li a.active,
    #header ul li a.active:hover {
    	color:#fff;
    	background:#000;
    	font-weight:bold;
    }
    #header ul li a span {
    	display:block;
    }
    /* 'widths' sub menu */
    #layoutdims {
    	clear:both;
    	background:#eee;
    	border-top:4px solid #000;
    	margin:0;
    	padding:6px 15px !important;
    	text-align:right;
    }
    /* column container */
    .colmask {
    	position:relative;	/* This fixes the IE7 overflow hidden bug */
    	clear:both;
    	float:left;
    	width:100%;			/* width of whole page */
    	overflow:hidden;		/* This chops off any overhanging divs */
    }
    /* common column settings */
    .colright,
    .colmid,
    .colleft {
    	float:left;
    	width:100%;
    	position:relative;
    }
    .col1,
    .col2,
    .col3 {
    	float:left;
    	position:relative;
    	padding:0 0 1em 0;
    	overflow:hidden;
    }
    /* 2 Column (left menu) settings */
    .leftmenu {
    	background: #eee8aa;		/* right column background colour */
    }
    .leftmenu .colleft {
    	right:75%;			/* right column width */
    	background: #eee8aa;	/* left column background colour */
    }
    .leftmenu .col1 {
    	width:71%;			/* right column content width */
    	left:102%;			/* 100% plus left column left padding */
    }
    .leftmenu .col2 {
    	width:21%;			/* left column content width (column width minus left and right padding) */
    	left:6%;			/* (right column left and right padding) plus (left column left padding) */
    }
    /* Footer styles */
    #footer {
    	clear: both;
    	position: relative;
    	background-color: #336666;
    	width:100%;
        text-align: center;
    	overflow: auto;
    	font-weight: bold;
    	
    	
    }
    #footer p {
    	clear: both;
    	margin:0;
    	border: dashed;
    	overflow: auto;
    
    }
    
    #footer a, a:visited {	
    	color: #000000;
    	background: inherit;
    	text-decoration: none;
    }
    #fixed  {
         margin:0 auto;
    	 width:90%;  
    	 text-align:left;
    	 background: #336666;
     }
    
     /* Main Column */
    #main {
    	float: left;
    	
    	padding: 0px 0 0 0; margin: 0 0 0 2px;
    	display: inline;
    	
    }
    #main h2 {
    	font: normal 1.9em 'Trebuchet MS', Tahoma, Sans-serif;
    	color: #330000; 
    	text-transform: none;
    	padding: 10px 0 0px 10px; 			
    }
    #main h2 a {
    	color: #330000;
    	text-decoration: none;	
    }
    #main ul li {
    	list-style-image: url(nwscimages/bullet.gif);
    }
    #storeinfo  {
       text-align: center;
       }
    Can someone help?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Here's the first page (home)
    We can't parse the php code to generate the final HTML. Please post the html code taken from browser's view source option. Or a link to your site would be much better!

    PS: Validate your markup and fix the errors in it, if any.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    MJo (08-23-2010)

  • #3
    MJo
    MJo is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's the link to the site: http://www.northwestsportscenter.com

    I validated code and fixed couple of errors (random </a>, </p>, codes) in the index page and an extra </div> (just before the body tag) on the products page... but yet as I view my site with IE 7, my six main pages all have the footer in a different location! aarrgg! I'm just missing something about floats or spacing or ..?.

    And the html code for the original index file..
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> -->
    <meta name="Distribution" content="Global"/>
    <meta name="Robots" content="index,follow"/>
    
    
    <title> Northwest Sports Center in Eureka, Montana</title>
    <meta name="keywords" content="fishing supplies in Eureka Montana, eureka montana sporting supplies, eureka montana hunting, fish and game in Eureka Montana, Eureka Montana fishing, Eureka Montana Sports, Eureka Montana Outfitters, Eureka Montana Paintball supply, Northwest Sports Eureka, hunting in Eureka Montana" />
    <meta name="description" content="Northwest Sports Center in Eureka is your source for fishing and hunting supplies." />
    
    
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
    <meta name="google-site-verification" content="4o8Ko_n7rCvrrx7bcF6IjEhz86XAQh9t9aLB3H9X_Jc" />
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-17696218-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    </head>
    
    
    <body>
    
    <div id="fixed"> <!--liquid layout outline --> <br /><br /><br /><br /><br /><br />
    
    <div id="header">
         		<br />
    		 <img src="nwscimages/nws_newheader2.gif" height="400px" width="980" alt="Northwest Sports Center logo, Eureka, Montana"/> <br />
    
    <!-- navigation starts-->	
    		<ul class="float-middle">
    			<li id="current"><a href="index.php"> <img src="nwscimages/fish_home.gif" height="50px" width="150px" alt="fishing montana, Northwest Sports info"/> </a></li>
    			<li><a href="nwscaboutus.php"> <img src="nwscimages/fish_aboutus.gif" height="50px" width="150px" alt="about Northwest Sports in Eureka Montana"/> </a></li>
    			<li><a href="nwscservices.php"> <img src="nwscimages/fish_services.gif" height="50px" width="150px" alt="services offered at Northwest Sports Center"/> </a></li>
    
    		    <li><a href="eurekainfo.php" > <img src="nwscimages/fish_localinfo.gif" height="50px" width="150px" alt="local info for Eureka Montana"/></a></li>
    
    			<li><a href="nwscproducts.php"> <img src="nwscimages/fish_products.gif" height="50px" width="150px" alt="products for sale at Northwest Sports in Eureka Montana"/></a></li>
    			<li><a href="nwsclinks.php"> <img src="nwscimages/fish_links.gif" height="50px" width="150px" alt="Links recommended by Northwest Sports Center Eureka Montana"/> </a></li>
    
    		</ul>
    	<!-- navigation ends-->	
    	</div>
    
    <div class="colmask leftmenu">
    	<div class="colleft">
    
    		<div class="col1">
    			<!-- Column 1 start -->
    	<div id="main">
    						
    						<h2>Welcome!</h2>
    <br />
    			<p><strong>Northwest Sports Center in Eureka, Montana</strong> is a family-owned business specializing in fishing and hunting supplies. Owners Tammy and Lonny  Owen have owned the business for 9 years. Over the years, a few things have changed and the building has just recently been remodeled. Stop in for some small-town service and local fishing tips.  </p>  
    				<br /><br />
    			<br /><br />
    
    			<div>
    			<img src="nwscimages/NWS_photo_.jpg" width="650" height="300" alt="photo of Northwest Sports in Eureka" /><br />
    				 </div>
    	
    				
    				
    				  <div id="storeinfo"><br /><br /><br />
    				<hr style="width:55%;"/>
    				442 Highway 93 North <br />
    				Our Mailing Address:  P.O. Box 1664, Eureka, Montana  59917<br /><br /><br />
    
    			
    			<h1>Our Store Hours</h1> 
    				
    					 Monday - Friday 8:00 - 5:30 <br />
    					Saturday - 9:00 - 4:00 <br />
    				Sunday - Closed<br />
    				</div> 				
    		
    
    		</div>
     
    </div><!-- col1 end -->
    
    		
    		
    		
    		<div class="col2">
    			<!-- Column 2 start -->
     
      <br />
    	
    			<p>&quot;Your Connection to the GREAT OUTDOORS&quot; </p>
    			<br /> 
    		
     <br />
    			<br />
    			
    			<h3>Getting to Know Us</h3>
    
    						<ul class="sidemenu">
    				<li><a href="nwscmonthlynews.php">Monthly News</a></li>
    				<li><a href="nwscremodel.php">Our Recent Remodel</a></li>
    				
    			</ul>	
    				
    		<br />	<h3>Try Our Custom Search!</h3>	
    			<p>. . . for fishing, hunting, camping supplies . . .</p>
    			<form action="#" class="searchform"/>
    
    				<p>
    				<input name="search_query" class="textbox" type="text"/>
      				<input name="search" class="button" value="Search" type="submit"/>
    				</p>			
    			
    			
    	
    				
    			
    			<!-- Column 2 end -->
    		
    	</div> 
    </div><!-- colleft end -->
       
    
     
    
    <div id="footer"> 
    	<!-- footer starts -->		
    						<br /><br />	
    					<strong>
    
    			&copy; 2010 Northwest Sports Center</strong> | 
    			
    						<a href="nwscprivacypolicy.php">Our Privacy Policy</a>&nbsp;|&nbsp;
       		<a href="nwsccontactus.php">Contact Us</a>&nbsp;|&nbsp;
    	   
    	   	<a href="nwsccontactus.php">Contact Webmaster</a>
       			<br /><br />
    
    	
    
    <!-- footer ends--> 
    </div>   </div><!-- colmask end -->
    
    <!-- end of liquid layout outline  -->
      
     </div>
    </body>
    </html>
    Last edited by MJo; 08-21-2010 at 07:46 AM. Reason: (I'm adding explanation for the few errors I fixed.)

  • #4
    MJo
    MJo is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Footer still misplaced in IE8 but correct in IE7 using clear: both; command

    So I partially resolved my problem. I added {clear: both;} to my css for a couple of my div containers. The footer positions correctly in IE7 but not IE8. In IE8 the text floats to the left and stacks up (as though the div container is not very wide) instead of being one long line at the bottom of the page. BUT, this only happens on some of the pages --"home" "about us" "services" and "links." The "local info" and "products" pages has the footer positioned correctly.. Is this an IE8 issue? The footer div is in the same spot on these pages. Strange! --Hope this post helps others and perhaps someone out there has a thought for me about on what's going on in IE8.
    Here's the link to my page again (so you don't have to scroll back up):
    http://www.northwestsportscenter.com
    Thanks!

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    If everything works well in IE7 and not in IE8, then perhaps adding the following meta tag inside the head tag would fix it for you.
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    MJo (08-23-2010)

  • #6
    MJo
    MJo is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE 8 Compatibility Mode isn't forced with "IE=EmulateIE7" command

    Interestingly enough, adding <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > to my header tag did nothing. However, I notice if I go into >Tools>Compatibility Settings and change my IE 8 browser to "run in compatibility mode," all is well except for a small overflow of color (most likely a border/size of container difference) along the right side of the index page's footer... I'm going to stop fussing with IE8, perhaps drop a small link somewhere on my footer to indicate people can change IE8 to compatibility mode if they wish to view the site correctly, and get back to adding content to the site.

    THANK YOU so much for all the input. I'll be back to this forum because I've learned as much from reading other's questions and answers as I have my own. Hopefully this post can do the same for someone else.


  •  

    Tags for this Thread

    Posting Permissions

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