content problem in IE6

**Manna** · Sep 28, 2007 21:24

I am finishing a design that has one major problem. I am using the overflow:hidden in my content class and that makes the content of my footer look correct in IE7 and FF. The content container "sticks" to the bottom of the screen and the footer content stays within the footer. BUT in IE6 this makes most of my content hidden. When I take is (overflow:hidden) away IE6 displays correctly but in IE7 the footer content overflows the footer and the container no longer "sticks" to the bottom of the viewport.

How can this problem be fixed to make bothe browsers happy?

link to site
www.mrcleanandgreen.com

Thank you so much for any advice.
Dotty

**markbrown4** · Sep 29, 2007 03:34

If IE needs specific styles then you can use the * html hack

Code:

#example { overflow: auto; }
* html #example { overflow: visible }

Hope it helps

**Paul O'B** · Sep 30, 2007 04:23

Hi,

You seem to be using an unhealthy number of methods there that are all fighting against each other. You should not use min-height:100% and height :100% on the same element as that will fix the page to 100% only. Also you can't set 100% height and then add 20px borders as that will make the element 100% + 20px which is too big.

If you are trying for the footer at the bottom of the window (or document if longer) technique then this is explained in the faq.

I have recoded some of the relevant items to do what I think you wanted but in order to overlap the header borders I have used position absolute on the header and then maintained the flow using some padding to accomodate. The header could be ut back into the flow if required but you would lose the inset border effect.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mr. Clean 'n Green your Residential and Commercial Landscaper and House Cleaner for Vancouver Washington</title>
<meta name="description" content="Mr. Clean 'n Green is the premier landscaper and janitorial service for Vancouver Washington and Clark County.  They provide lawn care year around as well as cleaning the interior of houses.  They also provide power washing and exterior cleaning too. Contact our company for all your cleaning and maintenance needs..including Housecleaning, Carpet cleaning, Landscape Maintenance, Pressure Washing, and Handyman referral services"/>
<meta name="keywords" content="Mr. Clean 'n Green, House Cleaning, janitorial, lawn care, landscaping, pressure washing, power washing, cleaning,  handyman referal, carpet cleaning, ,maintenance, Vancouver Washington, vancouver WA, Portland Oregon, Portland OR, Clark County, maid service, cleaning service " />
<meta name="robots" content="index, follow" />
<meta name="copyright" content="Copyright by Mr. Clean 'n Green 2007." />
<style type="text/css">
* {
margin:0;
padding:0;
}
html,body{height:100%}

body {
    text-align:center;/*center layout in IE5 and 5.5*/
    background-color:#000099;
}
body { behavior: url('csshover.htc');}

#content {
    min-height:100%;
    position: relative;    
    width:780px;
    margin-left:auto;
    margin-right:auto;
    border:10px ridge #339933;
    border-bottom:none;
    border-top:none;
    text-align:left;
    background-image:url(http://www.mrcleanandgreen.com/images/bgcontent.jpg);
    background-repeat:repeat-y;    
}
/* mac hide \*/
* html #content{height:100%}
/* en hide */
#contentblue {
 min-height:100%;
    position: relative;    
    width:780px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:ridge #339933 10px;
    text-align:left;
    background-color:#000099;
}
#contentgreen {
 min-height:100%;
    position: relative;    
    width:780px;
    height:100%;
    margin:0px;
    margin-left:auto;
    margin-right:auto;
    border:ridge #339933 10px;
    text-align:left;
    background-color:#339933;
}
#header {
    height: 190px;
    width: 780px;
    margin: 0px;
    padding: 0px;
    z-index:999;
    position:relative;
    overflow:hidden;
    position:absolute;
    left:-10px;
    top:-0px;
    border:10px ridge #339933;
    border-bottom:none;
}
#nav {
display:block;
position: relative;
 width: 780px;
 height: 1.2em;
background-color: #fff;
text-align: center;
padding: 3px 0 0 0;
margin: auto;
margin-top:-5px;
}
#nav ul {
  font-family: Arial, Helvetica, sans-serif;
 font-size: small;
color: #FFF;
 white-space: nowrap;
 margin:1em .5em 0 .5em;
}
#nav li{
list-style-type: none;
display: inline;
font-weight:bold;
background-color:#000099;
border:thick outset #339933;
padding: .3em;
margin-left: .3em;
margin-right: .3em;
margin-bottom: .3em;
 height:1.3em;
 text-align:center;
}
#nav li a{
  text-decoration: none;
color: #fff;
width:100%;
}
#nav li:hover, #nav li:active {
  background-color: #339933;
  color: #fff;
  font-weight:bold;
  border:#FFFFCC thick inset;
}

.tag{
display:inline;
width:780px;
margin: 1.5em 0 0 0;
padding:0;
background-color:#FFFFFF;
}
.blueinfo {
position: relative;
display:block;
width: 380px;
height:100%;
color:#FFFFFF;
padding:5px;
float:left;
}
.blueinfo a{
color:#FFFFCC;
}
.greeninfo {
position: relative;
display:block;
width:380px;
color:#000000;
float:right;
padding:5px;
margin-left:-1px;/*makes border line up with blueinfo*/
}
.greeninfo a{
color:#FFFFCC;
}

.green{
padding-left:1em;
}
.photo{
position:relative;
float:right;
margin-left:8px;
margin-bottom:3px;
}
#footer {
position:relative;
height:70px;
width: 780px;
clear:both;
text-align:center;
border-top:3px #999999 solid;
border-bottom:10px ridge #339933;
margin:0 auto;
padding-top:3px;
margin-top:-86px;
z-index:999;
}
#footer ul {
position:relative;
    list-style: none;
    font: normal .8em Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align:center
}

#footer li {
    display: inline;
    padding-right: 3px;
    text-align: left;
}
#footer a {
    color: #fff;
    margin-right: 2px;
    text-align: center;
}
#footerblue {
position:relative;
height: 80px;
width: 780px;
clear:both;
text-align:center;
border-top:#999999 medium solid;
margin-top:0;
padding-top:3px;
background-color:#000099;
}
#footerblue ul {
    position:relative;
    top:1em;
    list-style: none;
    font: normal .8em Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin:;
    padding-top:1em;
    text-align:center
}
#footerblue li {
    display: inline;
    padding-right: 3px;
    text-align: left;
}
#footerblue a {
    color: #fff;
    margin-right: 2px;
    text-align: center;
}
#footergreen {
position:relative;
height: 80px;
width: 780px;
clear:both;
text-align:center;
border-top:#999999 medium solid;
margin-top:0;
padding-top:3px;
background-color:#339933;
}
#footergreen ul {
position:relative;
top:-1em;
    list-style: none;
    font: normal .8em Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-left: 100px;
    width: 560px;
    padding-top:1em;
}
#footergreen li {
    display: inline;
    padding-right: 3px;
    text-align: left;
    width: 600px;
    
}
#footergreen a {
    color: #fff;
    margin-right: 2px;
    text-align: center;
}
.copyright {
    position:relative;
    font-size: 0.8em;
    margin-right: 100px;
    padding-top:1em;
    text-align:center
}
h1 {
    font: 1.5em Arial, Helvetica, sans-serif;
    padding: 1.5em 0 0 0;
    color:#000;
    text-align:center;
    background-color:white;
}
h2 {
    font: .9em Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align:center;
}
h3{
padding:6px;
}
.amx{
position:relative;
float:left;
margin-top:-.3em;
}
.mc{
position:relative;
float:right;
margin-right: 1em;
margin-top:-.3em;
}
.copyright {
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:.6em;
text-align:center;
color:#FFFFFF;
}
.phone {
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:1em;
font-stretch:extra-expanded;
color:#FF0000;
padding-top: 12px;
text-align:center;
}
.guarentee {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:.7em;
color:#FFFF66;
text-align:center;
margin: auto;
}
/*hides from IE5-mac\*/
* html .landscaping {height: 1%;}
/*End hide from IE5-mac*/
.landscaping {
position:relative;
width:780px;
height:100%;
min-height:100%;
background-color:#339933;
color:#FFFFFF;
padding-top:10px;
float:left;
}
/*hides from IE5-mac\*/
* html .janitorial {height: 1%;}
/*End hide from IE5-mac*/
.janitorial {
position:relative;
width:780px;
height:100%;
min-height:100%;
background-color:#000099;
color:#FFFFFF;
margin-top:0;
margin-bottom:0;
}
.janitorial h3{
margin:auto;
width:auto;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
}
.janitorial ul{
text-align:center;
}
.janitorial p{
text-align:center;
}

.landscaping h3{
margin:auto;
width:auto;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
}
.landscaping ul{
text-align:center;
width:500px;
}
.landscaping p{
text-align:center;
}
.sig {
position:relative;
left: 60%;
display:block;
width:200px;
list-style-type:none;
list-style:none;
text-align:left;
font-family:"Monotype Corsiva", cursive;
font-style:italic;
font-size:1em;
list-style-type:disc;
text-indent:10em;
font-weight:bold;
margin-left:10em;
padding-bottom:.1em;

}
.test {
position:relative;
width:780px;
height:100%;
min-height:100%;
background-color:#339933;
color:#FFFFFF;
padding-top:3px;
}
.test ul li{
font-family:"Monotype Corsiva", cursive;
font-style:italic;
font-size:1.1em;
list-style-type:none;
text-indent:2em;
font-weight:bold;
padding:1em;
margin-left:.5em;
}
.referal{
display: list-item;
list-style:none;
list-style-type:none;
padding:1em;
margin:auto;
text-align:left;
width:85%;
}
.referal li a{
border:none;
color:#FFFFFF;
padding-right:2px;
}
.referal li{
padding:3px;
}
.referal li a img{
border:none;
float:left;
}
.clear {
clear:both;
}
.clearfooter{clear:both;height:90px;}
.sitemap{
position:relative;
width:780px;
height:100%;
min-height:100%;
background-color:#339933;
color:#FFFFFF;
margin-top:0;
margin-bottom:0;
text-align:center;
padding: 10px;
}
.sitemap ul li a{
color:#FFFFFF;
}
.sitemap ul li{
list-style:none;
list-style-type:none;
}
fieldset {
margin-left: 5em;
padding: 0;
float: left;
clear: left;
width: 80%;
}
legend {
margin-left: 1em;
color: #fff;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
float: left;
clear: left;
width: 100%;
}
fieldset.submit {
border-style: none;
float: none;
width: auto;
border: 0 none #FFF;
padding-left: 12em;
}
label {
display: block;
float: left;
width: 10em;
margin-right: 1em;
}
.submit {
padding:.5em;
}
.imageleft {
border:#FFFFCC medium solid;
margin:10px;
float:left;
}
.imageright {
border:#FFFFCC medium solid;
float:right;
margin:10px;
}
.listleft {
position:relative;
float:left;
width:780px;
text-align:center;
}
.listright{
position:relative;
float:right;
width:780px;
text-align:center;
}
.listright ul {
width:400px;
}
.listleft ul{
width:400px;
text-align:center;
float:left;
}
.listleft ul li{
margin-left:100px;
}
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
/* mac hide \*/
    * html .clearfix {height: 1%;}
     .clearfix {display: block;}
/* End hide */
.main{padding-top:200px;width:780px;}
#footer h2 {margin:0 0 5px 0}
</style>
<script type="text/javascript" src="/external.js">

</script>
</head>
<body>
<div id="content" class="clearfix">
    <div id="header"> <img src="http://www.mrcleanandgreen.com/images/logo2.jpg" alt="Mr Clean and Green Logo" title="Mr Clean and Green Janitorial Service Vancouver Washington" /> </div>
    <div class="main">
        <div class="tag">
            <div id="nav">
                <ul>
                    <li><a href="index.shtml" title="Mr Clean 'n Green Main Page" >Home</a></li>
                    <li><a href="janitorial.shtml" title="Cleaning services for Mr. Clean 'n Green" >Janitorial Services</a></li>
                    <li><a href="landscaping.shtml" title="Landscaping services for Mr. Clean 'n Green" >Landscaping Services</a></li>
                    <li><a href="contact.shtml" title="Contact information for Mr. Clean 'n Green" >Contact Us</a></li>
                    <li><a href="test.shtml" title="Testimonies for Mr. Clean 'n Green"  >Testimonies</a></li>
                    <li><a href="links.shtml" title="Links to favorite or useful sites">Links</a></li>
                    <li><a href="sitemap.shtml" title="Mr. Clean 'n Green Sitemap">Sitemap</a></li>
                </ul>
                <p class="phone"> Call: 3 6 0 . 6 1 9 . 8 1 9 6 </p>
            </div>
            <h1>The Janitorial Cleaning Company of Choice for both Residential and Commercial Cleaning and Landscaping.</h1>
        </div>
        <div class="blueinfo">
            <h2>The Best Janitorial Services Available</h2>
            <img class="photo" src="http://www.mrcleanandgreen.com/images/cabinet.jpg" alt="Mr. Clean n Green Cleaning Kitchens" title="Mr. Clean n Green Cleaning Kitchens"/>
            <p class="green">Arrive home to a sparkling clean house and a beautifully landscaped yard with the <a href="janitorial.shtml" title="CLeaning Service for Mr Clean n Green" rel="external">janitorial</a> and <a href="landscape.shtml" title="Landscaping Services Mr. Clean n Green" rel="external">landscaping</a> services of  Mr. Clean 'n Green. Our company provides a competitive package for maintaining your home as well as your yard. Mr. Clean 'n Green offers superior janitorial and lawn care services at affordable prices. From carpet cleaning and stain removal to mowing and pressure washing, we'll keep your home ready for company! <a href="contact.shtml" title="Contact information Mr. Clean n Green" rel="external">Contact</a> us today for our services in Vancouver and all cities in Clark County.</p>
        </div>
        <div class="greeninfo">
            <h2>The Best Landscaping Services Available</h2>
            <img class="photo" src="http://www.mrcleanandgreen.com/images/gals.jpg" alt="Mr. Clean N Green Cleaning Crew" title="Mr. Clean n Green Cleaning Crew" />
            <p class="green">With 15 years of experience, our family owned and operated company provides the best in janitorial and lawn care services. We have the same cleaning crew every time, so you can get to know us. <a href="contact.shtml" title="Mr Clean n Green Contact information" rel="external">Contact</a> us today for your free consultation. We serve Vancouver and all cities in Clark County.</p>
        </div>
        <div class="clearfooter"></div>
    </div>
</div>
<div id="footer">
    <h2 class="guarentee">Satisfaction guaranteed. If not happy or satisfied with any of our services, we'll return to clean to your satisfaction. </h2>
    <img class="amx" src="http://www.mrcleanandgreen.com/images/amxdis.gif" alt="Mr Clean n Green accepts American Express and Discover Cards" title="Mr Clean n Green accepts American Express and Discover Cards"/> <img class="mc" src="http://www.mrcleanandgreen.com/images/mcvisa.gif" alt="Mr Clean n Green accepts Mastercard and Visa" title="Mr Clean n Green accepts Mastercard and Visa"/>
    <p class="copyright">Website and content Copyrighted by Mr. Clean 'n Green 2007.  Website design by <a href="http://www.premiumwebsites.net" title="Premium Websites Website Design" rel="external">Premium Websites</a>. </p>
    <ul>
        <li><a href="index.shtml" title="Mr Clean 'n Green Main Page">Home</a></li>
        <li><a href="janitorial.shtml" title="Cleaning services for Mr. Clean 'n Green">Janitorial Services</a></li>
        <li><a href="landscaping.shtml" title="Landscaping services for Mr. Clean 'n Green">Landscaping Services</a></li>
        <li><a href="contact.shtml" title="Contact information for Mr. Clean 'n Green">Contact Us</a></li>
        <li><a href="test.shtml" title="Testimonies for Mr. Clean 'n Green" >Testimonies</a></li>
        <li><a href="links.shtml" title="Links to favorite or useful sites">Links</a></li>
        <li><a href="sitemap.shtml" title="Mr. Clean 'n Green Sitemap">Sitemap</a></li>
    </ul>
</div>
</body>
</html>

That should give you the general idea but there are multiple changes there I'm afraid which you will have to work through slowly.

User Tag List

Thread: content problem in IE6

Thread Tools

Display

Hybrid View

content problem in IE6

Bookmarks

Bookmarks

Posting Permissions