I cannot figure this problem out, I used a template theholygrail sure some of you are familiar with it. I have 3 col fixed width, equal height I have background images in each of the 3 col they display great in FF and IE7 but IE6 is a different story, seems like the right column background just takes over and repeats itself over the other divs. I attached screen shots of it in ff and in IE6
Here is my CSS (sorry its a bit messy, please ignore the ids without index on them) for they are for the other pages that do not require background images)
/* CSS Document */
/*Div layout start*/
body {
background:#606060 none repeat scroll 0 0;
border:0 none;
font-size:90%;
margin:0;
min-width:600px;
padding:0;
text-align:center;
width:100%;
}
#fixed {
margin:0 auto;
text-align:left;
width:875px; /*changes border*/
}
#fixedindex {
margin:0 auto;
text-align:left;
width:900px; /*changes border*/
}
h1, h2, h3 {
margin:0.8em 0 0.2em;
padding:0;
}
p {
margin:0.4em 0 0.8em;
padding:0;
}
#header {
margin-top:2em;
background-color:#e1e1e1;
clear:both;
float:left;
width:100%;
}
#header p, #header h1 {
margin:0;
padding:0.4em 0 0;
padding-left:0;
font-size:3em;
text-align:center;
line-height:.2em;
}
#header h2 {
font-size:2em;
text-align:center;
line-height:1em;
}
#header h3 {
margin:0;
padding:0.4em 12px 0;
padding-left:0;
font-size:1.5em;
text-align:center;
padding-bottom:1em;
}
#header img {
position:relative;
float:left;
padding:.4em;
}
#layoutdims {
background:#EEEEEE none repeat scroll 0 0;
border-top:4px solid #000000;
clear:both;
margin:0;
padding:6px 15px !important;
text-align:right;
}
.colmask {
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%;
}
.holygrail {
background:#710000; /*Right col background color*/
}
.holygrailindex {
background-image:url(photos/rightcolbackground.jpg); /*Index Right col background color*/
background-position: 700px top;
background-repeat:no-repeat;
}
.colmid {
background:#FFFFFF none repeat scroll 0 0; /*mid col background color except homepage*/
float:left;
margin-left:-200px;
position:relative;
right:100%;
width:200%;
}
.colmidindex { /*index background color*/
background-color: #601011;
background-image: url(photos/midindexbackground1.jpg);
background-position: right top;
background-repeat: no-repeat;
float: left;
margin-left: -200px;
position: relative;
right: 100%;
width: 200%;
}
.colleft {
float:left;
left:400px;
margin-left:-50%;
position:relative;
width:100%;
background-color:#710000;
}
.colleftindex { /*Index background left col*/
background-image:url(photos/navbackground.jpg);
float:left;
left:400px;
margin-left:-50%;
position:relative;
width:100%;
}
.col1wrap {
float:left;
padding-bottom:1em;
position:relative;
right:200px;
width:50%;
}
.col1 {
left:200%;
margin:0 215px;
overflow:hidden;
position:relative;
}
.col2 {
float:right;
position:relative;
right:15px;
width:170px;
}
.col3 {
float:right;
left:50%;
margin-right:45px;
position:relative;
width:170px;
}
#footer {
margin-bottom:2em;
clear:both;
float:left;
width:100%;
text-align:center;
background-color:#e1e1e1;
}
#footer p {
margin:0;
padding:10px;
font-size:1.8em;
}
/*Div Layout End*/
/*Navigation Start*/
ul.nav {
display:block;
padding:0;
margin: 1em -10px 0 10px;
list-style:none;
font-size:1.3em;
}
li.nav {
padding:.25em 0 .25em 0;
}
a.nav:link {
color: #000000; text-decoration: none;
}
a.nav:active {
color: #0000ff; text-decoration: none;
}
a.nav:visited {
color: #000000; text-decoration: none;
}
a.nav:hover {
color: #c5b023; text-decoration: none;
}
/*Navigation End*/
/*Testimonials Start*/
#table1 {
padding:.5em .5em .5em .5em;
margin:.8em;
text-align:center;
border: solid 1px;
font-weight:bold;
}
#table2 {
margin-top:2em;
padding:.5em .5em .5em .5em;
border: solid 1px;
font-style:italic;
font-weight:bold;
}
#table3 {
margin-top:2em;
}
#table4 {
margin-top:2em;
margin-bottom:2em;
padding:.5em .5em .5em .5em;
border: solid 1px;
font-weight:bold;
}
a.testim:link {
color: #000000; text-decoration: none;
}
a.testim:active {
color: #0000ff; text-decoration: none;
}
a.testim:visited {
color: #000000; text-decoration: none;
}
a.testim:hover {
color: #c5b023; text-decoration: none;
}
/*Testimonials End*/
/*Index Content*/
.indexcontent {
}
/*FAQ Links Start*/
ul.faq {
display:block;
list-style:none;
margin-left:-15px
}
li.faq {
padding:1em 0 1em 0;
}
a.faq:link {
color: #000000; text-decoration: none;
}
a.faq:active {
color: #0000ff; text-decoration: none;
}
a.faq:visited {
color: #000000; text-decoration: none;
}
a.faq:hover {
color: #c5b023; text-decoration: none;
}
p.answer {padding:0 1em 0 1em;
}
h1.title {
text-align:center;
}
/*About Us Start*/
h2 {
text-align:center;
font-size:2em;
}
h3.about {
margin-top:114px;
margin-left:2em;
}
p.about {
float:left;
margin:1em 0 0 1em;
}
span.underline {
text-decoration:underline;
font-style:italic;
text-align:center;
}
h3.about2 {
margin-top:325px;
margin-left:2em;
}
h3.about3 {
margin-top:250px;
margin-left:2em;
}
/*About Us End*/
/*Services Start*/
ul.services {
}
li.services {
padding:.5em;
}
h2.services {
font-size:2em;
text-align:left;
}
span.services {
font-style:italic;
font-size:.8em;
text-decoration:underline;
}
/*Services End*/
/*Form Start*/
form.form {
margin-top:2em;
}
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
/*Form Start*/
#formid div {
width:45%;
float:left;
margin: .5em 1em 0 .5em
}
.clear {
clear:both;
}
.red {
color:red;
}
.fieldname {
font-size:1em;
text-align:left;
}
.button {
width:90px;
}
.error { border: 1px solid red;
}
.highlight { background-color: yellow;
}
/*Form End*/
/*Direction Start*/
.map {
margin:2em 10px 2em 10px;
}
/*Direction End*/
/*Images start*/
img.about {
float:right;
margin-top:1em;
}
/*General Start*/
p.general {
text-align:left;
margin:0 2em 0 2em;
font-style:italic;
}
span.why {
text-align:center;
font-style:italic;
text-decoration:underline;
font-size:80%;
margin:1em;
}
span.office {
font-size:2em;
font-style:normal;
}
And here is the HTML
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<title>Lincoln Home Health Care</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="The Holy Grail 3-column fixed-width layout. Pixel widths. Cross-Browser. Equal Height Columns." />
<meta name="keywords" content="The Holy Grail 3-column fixed-width layout. Pixel widths. Cross-Browser. Equal Height Columns." />
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="css.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style media="screen" type="text/css">
.col1 {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="fixedindex">
<div id="header">
<!--Header Starts-->
<img src="photos/pat.jpg">
<h1>Welcome to Lincoln Home Care</h1><br />
<h2>Home Health Care With a <i>“LOVING TOUCH”</i></h2>
<!--Header Ends-->
</div>
<div class="colmask holygrailindex">
<div class="colmidindex">
<div class="colleftindex">
<div class="col1wrap">
<div class="col1">
<!-- Column 1 (mid/content) start -->
<div class="indexcontent"> </div>
<!-- Column 1 (mid/content) end -->
</div>
</div>
<div class="col2">
<!-- Column 2 (left/navigation sidebar)start -->
<ul class="nav">
<li class="nav">
<a class="nav" href="index.html">HOME</a> </li>
<hr />
<li class="nav">
<a class="nav" href="about.html">ABOUT US</a> </li>
<hr />
<li class="nav">
<a class="nav" href="services.html">OUR SERVICES</a> </li>
<hr />
<li class="nav">
<a class="nav" href="why.html">WHY LINCOLN HOME CARE?</a> </li>
<hr />
<li class="nav">
<a class="nav" href="faq.html">FAQ</a> </li>
<hr />
<li class="nav">
<a class="nav" href="testimonials.html">TESTIMONIALS</a> </li>
<hr />
<li class="nav">
<a class="nav" href="contact.html">CONTACT US</a> </li>
<hr />
<li class="nav">
<a class="nav" href="directions.html">HOW TO FIND US?</a> </li>
<hr />
</ul>
<!-- Column 2(left/navigation sidebar) end -->
</div>
<div class="col3">
<!-- Column 3 (right sidebar)start -->
<div id="table1">
What our clients say </div>
<div id="table2">
"Maria has become my best friend. She does everthing for me . It’s a pleasure to have her in my home." </div>
<div id="table3">
<img src="photos/mom.jpg" /> </div>
<div id="table4">
<a class="testim" href="testimonials.html">
More Testimonials </a> </div>
<!-- Column 3 (right sidebar)end -->
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Footer Starts -->
<p>
At Lincoln Home care we can provide our <i>Customized Care</i> Plan that will we tailor to your needs and ensure you can
maintain the quality of life in your own home
</p>
40520 Hayes, Clinton Township, MI 48038<br />
586-416-0900<br />
586-416-0901 fax
<!-- Footer Ends -->
</div>
</div>
</body>
</html>
If someone could please help this is driving me crazy
Thanks for your time
