footer floats to left in IE, overflow issue?

MJo

08-20-2010, 03:07 AM

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)

<!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">  <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">

<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>

<div class="col2">


<?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>



</div>
</div>

<?php include("footer.inc.php"); ?>
</div>



</div>
</body>
</html>

And the second page (products)

<!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">  <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">

<div id="main">

<h2>We are preparing to sell products online. </h2>

<p> Check back soon! </p>

</div>

</div>

<br /> <br /><br />
</div>



<div class="col2">


<br /><br />



</div>
</div>

<?php include("footer.inc.php"); ?>
</div>


</div>
</body>
</html>

And the css I'm using:

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?

abduraooft

08-20-2010, 07:15 AM

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 (http://validator.w3.org/#validate_by_input) and fix the errors in it, if any.

MJo

08-21-2010, 07:34 AM

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..

<!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 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">  <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 />


<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>

</div>

<div class="colmask leftmenu">
<div class="colleft">

<div class="col1">

<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>

<div class="col2">


<br />

<p>"Your Connection to the GREAT OUTDOORS" </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>



</div>
</div>

<div id="footer">

<br /><br />
<strong>

© 2010 Northwest Sports Center</strong> |

<a href="nwscprivacypolicy.php">Our Privacy Policy</a> | 
<a href="nwsccontactus.php">Contact Us</a> | 

<a href="nwsccontactus.php">Contact Webmaster</a>
<br /><br />


</div> </div>



</div>
</body>
</html>

MJo

08-23-2010, 01:45 AM

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!

abduraooft

08-23-2010, 08:48 AM

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. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

MJo

08-23-2010, 12:31 PM

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.