Not sure if this is the best solution for this page (UN and PW: guest). Each header has to start to the right of the image so I chose to repeat a container div to hold left and right column divs. IE 5 and 6 won’t recognize the divs so they just spew down the page (IE 6 large top image starts way down - not sure why). And, I need to add about 4 more images down the page.
Thanks so much in advance!
IE5?! Wow, that’s beyond the call of duty. I don’t even bother with IE6 any more. 
I wonder what would happen if you removed the right margin from #mainContent and floated it left? That’s what I prefer, and it seems to work better with IE6. Don’t see why those inner divs would be playing up. Perhaps it’s the margin on the left one, so try adding display: inline to those divs (via conditional comments).
HI,
You have a number of logic errors in that page.
First of all in a two column layout you should float both columns and avoid the 3px jog in IE6 and under and it also cures any clearing problems as your content is clearing the right column before it will start.
.twoColFixRtHdr #mainContent {
[B]/* margin: 0 219px 0 0; t[/B]he right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding:0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position:relative;
[B] float:left;
width:717px[/B]
}
The other two problems are firstly the double margin bug on floated elements and you need to add display:inline to any floats whose side edge are adjacent to the containing block and have margins specified on the side.
The other problem is that .lcol is 244px wide but you have an image that is 224px wide inside a p element that has 70px horizontal padding making it much too big.
If you make that add up correctly then you can remove the negative margin you applied to your imnage to try and make it fit.
Try something like this:
.lcol {
margin:0 0 0 25px;
padding:0;
width:244px;
float:left;
[B] display:inline
}[/B]
[B].lcol p{padding:0 10px!important;}[/B]
.lcol img {
[B] margin:5px auto 12px 0;[/B]
padding:0;
float:left;
}
Thanks! Got the large image on top to work - thank you both. However, IE 6 and 7 aren’t displaying the maincontent bg img now - no yellow right column. See screenshot.
Paul, I can’t see how not to use a negative left margin on the right column so I can reduce the space between the img and text.
Still missing something though b/c the container holding each img and text next to it – #columncont – isn’t displaying the yellow bg on any browser.
And, IE 5 and 6 still spewing the info down and body bg starting to repeat. I just uploaded the changes.
The code I gave above is fully working based on your original site.
Luckily I still have it here:
This is working in IE6. I will not test IE5 as that is just a step too far for sanity.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equine Assisted Learning | Leadership Development</title>
<meta name="Description" content="Equine Assisted Learning from an Epona approved instructor offering programs on leadership development, personal growth, and enhancing recovery near Asheville, NC." />
<meta name="Keywords" content="equine experiential Learning,equine facilitated learning,intuitive horsemanship,self-discovery with horses" />
<meta name="author" content="" />
<meta name="copyright" content="2011 Equinection.org, Equine Assisted Learning | Equine Facilitated Learning near Asheville, NC" />
<meta name="revisit-after" content="14 days" />
<meta name="google-site-verification" content="gGLIFvID8iZkZ8GJ_ZmjaJF-CXjrT7JjdqkwWLpWqMg" />
<meta name="y_key" content="f06d2791d98aac04" />
<link rel="canonical" href="http://www.equinection.org/" />
<link href="../css/default1.css" rel="stylesheet" type="text/css" />
<style>
@charset "utf-8";
/* CSS Document */
body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: 805d57;
background: #873414 url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/bg.jpg) repeat;
}
.twoColFixRtHdr #container {
width: 956px; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #fff7e8;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRtHdr #header {
position:relative;
width:956px;
height:165px;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/header-bg.jpg) no-repeat;
}
/* ----- Header ----- */
.logo2, .logo2 a, .logo2 em {
margin:0;
width:478px;
height:153px;
position:relative;
display:block;
text-decoration:none;
overflow:hidden;
float:left;
z-index:0;
}
.logo2 em {
position:absolute;
left:-9px;
top:0px;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/logo4.jpg) no-repeat 0 0;
z-index:0;
}
h1.logo2 {
margin: 0 0 0 10px;
font-size:9px;
}
h2, #header h2 {
position:absolute;
top:45px;
right:50px;
letter-spacing:.5px;
font-family:Arial, Helvetica, sans-serif;
color:#FFCB65;
font-size:1em;
font-weight:normal;
}
/*==== Begin Nav Styles ====*/
ul#nav-top1 {
margin:27px auto 30px 213px;
list-style-type:none;
font-size:.9em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
position:absolute;
padding:0;
z-index:1;
}
ul#nav-top1 li{
display:inline;
list-style-type:none;
}
ul#nav-top1 a {
display:inline;
padding:0 5px;
text-decoration:none;
color:#330000;
}
ul#nav-top2 {
margin:0;
padding:0;
top:127px;
right:110px;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
letter-spacing:1px;
float:left;
position:absolute;
}
ul#nav-top2 li{
display:inline;
list-style-type:none;
}
ul#nav-top2 a {
display:inline;
padding:0 20px;
text-decoration:none;
color: #650000;
}
ul#nav-top2 .current a {
color: #FFCB65;
}
ul#nav-top2 a:focus {
outline:0;
color: #650000;
}
ul#nav-top2 li#dropnav:hover, ul#nav-top2 li#dropnav.sfhover {
margin: -3px;
}
ul#nav-top2 li#dropnav:hover a, ul#nav-top2 li#dropnav.sfhover a {
z-index: 1;
margin-bottom: -3px;
padding-bottom: 3px;
background: #b06210 url(imges2/dropdown-bg.jpg) no-repeat;
}
ul#nav-top2 li#dropnav:hover li a, ul#nav-top2 li#dropnav.sfhover li a:active {
margin-bottom: 0;
padding: 8px 16px 0 32px;
color:#0;
}
ul#nav-top2 li#dropnav li a:hover {
color:0;
}
/* ----- Columns ----- */
#inner{
width:956;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/content-bg.jpg) repeat-y 0 0;
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 219px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
padding: 15px 10px;
}
.twoColFixRtHdr #sidebar1 ul{
margin:0;
padding:0;
list-style:none;
text-align:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 1.1em;
padding-top: 15px;
line-height:2em;
}
.twoColFixRtHdr #sidebar1 ul li{}
.twoColFixRtHdr #sidebar1 ul li a{
padding:0 10px;
text-decoration:none;
color:#990000;}
.twoColFixRtHdr #sidebar1 p, .twoColFixRtHdr #sidebar1 p.quote, .twoColFixRtHdr #sidebar1 p.author{
padding:0 20px 0 10px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height:1.8em;
}
.twoColFixRtHdr #sidebar1 p.quote{
font-style:italic;
}
.twoColFixRtHdr #sidebar1 p.author{
font-size:.8em;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
padding:15px 0 15px 0;
}
.twoColFixRtHdr #mainContent {
/* margin: 0 219px 0 0; the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding:0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position:relative;
float:left;
width:717px
}
.twoColFixRtHdr #mainContent h1{
top:6px;
left:15px;
color:#ffffcc;
font-size:1.25em;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:1px;
font-weight: normal;
position:absolute;
}
.twoColFixRtHdr #mainContent h3, .twoColFixRtHdr #mainContent h3.mission {
padding:6px 40px 0px 30px;
color:#990000;
font-size:1.1em;
}
.twoColFixRtHdr #mainContent h3.mission{
padding-left: 30px;
}
.twoColFixRtHdr #mainContent p, .twoColFixRtHdr #mainContent p.mission{
padding:0px 40px 0 30px;
color:#330000;
font-size:.78em;
line-height:1.7em;
}
.twoColFixRtHdr #mainContent p.mission {
font-size:1.1em;
padding-bottom:60px;
}
/* ----- 2 columns for main content ----- */
#columncont {
width:710px;
}
.lcol {
margin:0 0 0 25px;
padding:0;
width:244px;
float:left;
display:inline
}
.lcol p{padding:0 10px!important;}
.lcol img {
margin:5px auto 12px 0;
padding:0;
float:left;
}
.rcol {
margin:0;
padding:0;
width:445px;
float:left;
}
.rcol ul{
list-style-image:url("../images2/bullet-black-disc.gif");
list-style-position: outside;
font-size:0.813em;
color:#330000;
}
.rcol li{
margin-left:-25px;
}
.rcol p{
margin:0px 20px 12px -28px;
font-size:0.7em;
}
.rcol h3 {
margin:10px auto 0px -28px;
color:#990000;
font-size:1.1em;
}
/* ----- Footer ----- */
#footer {
margin:0 auto;
text-align:center;
color:#FFFFCB;
font-family:Tahoma, Geneva, sans-serif;
width:956px;
padding-top:10px;
padding-bottom:20px;
position:relative;
}
.footer-decoration {
float:right;
text-align:center;
width:85px;
height:45px;
margin-top:15px;
margin-left: -85px;
}
.social{
float:left;
margin:10px auto 10px 10px;
border:none;
}
#footer ul{
margin:0;
padding:0;
list-style:none;
text-align:center;
width:100%;
font-size: 0.9em;
padding-top: 23px;
}
#footer ul li{display:inline;}
#footer ul li a{padding:0 7px;text-decoration:none;color:#FFFFCB;}
/* ----- Floats ----- */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 15px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*==== Pages ====*/
/*==== Mission ====*/
/*==== Styles ====*/
.red {
color: #650000;
}
.copy {
padding:0px;
font-size:.7em;
}
.copy a{
color:#FFFFCB;
}
.small {
font-size:.7em;
}
.header {
margin-top:-244px ;
}
</style>
<style type="text/css"></style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<!--[if lte IE 6]><script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("top-navi").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
} } }
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script><![endif]-->
<!--[if lt IE 8]>
<style>
ul#nav-top1 { margin-left:-235px; }
#header h2 { padding-top:10px; }
</style>
<![endif]-->
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<h1 class="logo2"><a href="/index.html">Equinection....Self discovery through the peace, power and wisdom of the horse<em></em></a></h1>
<ul id="nav-top1">
<li><a href="">Apprenticeship</a>|</li>
<li><a href="">Private Lessons</a>|</li>
<li><a href="">Leadership</a>|</li>
<li><a href="">Awakening</a>|</li>
<li><a href="">One Day at a Time</a>|</li>
<li><a href="">Helping Professionals</a></li>
</ul>
<h2>Call 828-682-9157 to begin the experience today</h2>
<ul id="nav-top2">
<li><a href="../index.html">home</a><span class="red">|</span></li>
<li class="current"><a href="index.html">about</a><span class="red">|</span></li>
<li><a href="#">programs</a><span class="red">|</span></li>
<li><a href="#">register</a><span class="red">|</span></li>
<li><a href="#">news</a><span class="red">|</span></li>
<li><a href="#">contact</a></li>
</ul>
<!-- end #header -->
</div>
<div id="inner">
<div id="sidebar1">
<ul>
<li><a href="">Event Calendar</a></li>
<li><a href="">Directions</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Registration</a></li>
</ul>
<img src="../images2/sidbar-bar.gif" width="193" height="1" class="center" alt="Sidebar line" />
<p class="quote">“Through the years I have been to many, many trainings, seminar sessions and workshops and have led many of them myself. You are one of the best facilitators I have ever experienced.” </p>
<p class="author">- Joy B., North Carolina</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff-header.jpg" width="717" height="244" alt="Meet the Staff at Equinection" />
<h1>Meet the Staff</h1>
<h3>The Equinection Staff</h3>
<p>Pictured above from right to left: Karen Head, Executive Director; Kenneth Johnson Jr.; <br />
Kim Bentley, Barn Manager; Kenneth Johnson, Foreman</p>
<div id="#columncont">
<div class="lcol">
<p><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/karen1.jpg" width="224" height="338" alt="Karen Head, Excecutive Director, Equinection" /></p>
<p><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/karen2.jpg" width="224" height="319" alt="Another image of Karen Head, Exceutive Director of Equinection" /></p>
</div>
<!-- end lcol -->
<div class="rcol">
<h3>Executive Director, Karen Head</h3>
<ul>
<li>M.Ed. Creative Arts Education </li>
<li>Advanced Epona Facilitator</li>
<li>Consummate Teacher Training from Nierika Sol</li>
</ul>
<p>Karen has studied and practiced experiential education for thirty years. Her background and training in experiential arts education is a strong foundation for her work at Equinection. The expressive arts techniques she offers anchor and enrich clients’ experiences.</p>
<p>Horses have always been vital to Karen. Her experiences with horses are rich and diversified. She grew up riding horses and has been a trail guide, riding teacher, and ranch hand. In the mid 70’s Karen graduated from an English riding academy and went on to study with several professional trainers. Equine facilitated learning (EFL) combines Karen’s love for horses and experiential learning to help people come to a deeper awareness of themselves and their lives. </p>
<p>She studied for 4 years at The Epona Center in Arizona. After completing the advanced Epona facilitator-training program, Karen sought to further improve her teaching skills. She began a concentrated study of teaching and facilitating at Nierika Sol where self-awareness is a major focus. Karen has over 25 years in a 12-step program and is committed to living the principles of the program. </p>
<p>She has developed a workshop specifically designed to support people in recovery where the horses serve as anchors for compassion and acceptance. She has served on the board for the National Association for Children of Alcoholics (NACoA), an organization devoted to serving the children and families affected by alcoholism.</p>
<p>Karen values the challenge of self-discovery, and the courage it takes to look within for answers. As a result of her extensive and ongoing training, Karen developed a specialized EFL program at Equinection that uses awareness as a guide to self-discovery and personal transformation. She is a dedicated and gifted teacher.</p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<br class="clearfloat" />
<div id="#columncont">
<div class="lcol">
<p><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff1.jpg" width="226" height="153" alt="kkk" /></p>
<p> </p>
</div>
<!-- end lcol -->
<div class="rcol">
<h3>Kenneth Johnson, Foreman</h3>
<p>Kenneth Johnson was the first to join Karen and together they planned, dreamed and developed Equinection. Kenneth has lived just over the hill most all of his life. He began as an excavator and since then has become foreman and valued advisor. He is an expert horseman, craftsman, and heavy equipment operator.</p>
<p class="quote">Kevin in the process of building the gazebo, pictured at left.</span></p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<br class="clearfloat" />
<div id="#columncont">
<div class="lcol">
<p><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff2.jpg" width="226" height="175" alt="Equinection Barn Manager, Kimberly Bentley" /></p>
<p> </p>
</div>
<!-- end lcol -->
<div class="rcol">
<h3>Kimberly Bentley, Barn Manager</h3>
<p>Kimberly is Kenneth’s daughter; she started helping her dad with excavation and clean up, staying on to become our barn manager. She brings tenderness and compassion to the everyday horse care.</p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<br class="clearfloat" />
</div>
<!-- end #mainContent -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
</div>
<!-- end #inner -->
</div>
<!-- end #container -->
<div id="footer">
<div class="footer-decoration"> <a href="http://www.facebook.com/home.php#!/pages/Equinection-LLC/125311030875693" target="_blank"><img src="../images2/facebook.png" width="32" height="32" class="social" alt="Find us on Facebook" /></a> <a href="http://www.linkedin.com/pub/diannah-beauregard/7/2b6/b2" target="_blank"><img src="../images2/linkedin.png" width="32" height="32" class="social" alt="Connect with us on Linkedin" /></a> </div>
<!-- footer-decoration -->
<ul>
<li><a href="../index.html">home </a><span class="small">•</span></li>
<li> <a href="index.html">about</a><span class="small">•</span></li>
<li><a href="">programs</a><span class="small">•</span></li>
<li><a href="">register </a><span class="small">•</span></li>
<li><a href=""> news </a><span class="small">•</span></li>
<li><a href=""> contact</a></li>
</ul>
<p class="copy">@ 2011 Equinection, LLC. All Rights Reserved. 561 Piercy Road, Green Mountain, NC 28740 828-682-9157 </p>
<p class="copy">Site by <a href="http://www.charlotteswebservices.com" target="_blank">Charlotte’s Web</a></p>
<p class="copy">Photography credit: <a href="http://www.silverspiritsphotography.com/" target="_blank">Max Popper</a>, <a href="http://www.barnwellphoto.com" target="_blank">Tim Barnwell</a>, <a href="http://www.blueridgemarketinganddesign.com" target="_blank">Jeanne Toporek</a></p>
<!-- end #footer -->
</div>
</body>
</html>
You don;t need the negative margin if you negate the padding on the p unless you want it further left than it is.
Remember that when you have two floats you will need to ensure they are cleared either with overflow:hidden on the parent or some other clearing mechanism.
e.g. your columncount would need to have haslayout (a width perhaps) and then overflow:hidden.
The same applies for the main container that holds the left and right main floats.
Huh, okay, copied yours and it works. Looks like the only difference was you commented out the margin in .twoColFixRtHdr #mainContent?
Only issue now is the yellow bg isn’t showing on any browser except IE 5 :-).
So no need to bother with overflow:hidden or haslayout?
You can’t use an id more than once so use a class and you have it wrong anyway:)
id="[B]#[/B]columncont"
The hash shouldn’t be there
You will still need a width and overflow:hidden to contain the pairs of floats that you have.
Another stupid mistake. Okay, changed it to id=“class”.
I just discovered the other difference with my CSS and yours. I had changed the lcol and rcol margins to be cleaner with no negative margins. The text is beside image except in IE 5 and 6??
However, yellow on sidebar still not showing in most browsers.
.lcol {
margin:0 0 0 25px;
padding:0;
width:224px;
float:left;
display:inline;
background-color:red;
}
.lcol p{padding:0px;}
.lcol img {
margin:5px auto 12px 0;
padding:0;
float:left;
}
.rcol {
margin:0px;
padding:0;
width:458px;
float:left;
background-color:pink;
}
.rcol ul{
list-style-image:url("../images2/bullet-black-disc.gif");
list-style-position: outside;
font-size:0.813em;
color:#330000;
}
.rcol li{
margin-left:0px;
}
.rcol p{
margin:0px 10px 12px 0px;
font-size:0.7em;
}
.rcol h3 {
margin:0px;
color:#990000;
font-size:1.1em;
}
I set the overflow:hidden to the parent containers:
#inner{
width:956;
background:url(../images2/content-bg.jpg) repeat-y 0 0;
overflow:hidden;
}
.columncont {
width:710px;
overflow:hidden;
}
Silly mistakes again.
ul#nav-top2 a:focus {
outline:0;
color: #650000;
}
[B]}[/B]
/* ----- Columns ----- */
There’s an extra bracket above the comments that will corrupt the next rule.
You also missed the px off 956 but that looks like a cut and paste error here as the site is ok
Gosh…argh on the simple mistakes.
Sorry for the confusion, Paul. I had copied your CSS and HTML and uploaded it and it worked and just copied and uploaded mine after you showed me the stupid mistakes. The yellow on sidebar shows but the image and text next to each other still won’t work in IE 5 and 6. Also, the body bg is repeating itself near the bottom…??
Fixed the IE 5 and 5 issue. Yea. Now, just the body bg thing. Not sure why it’s repeating near bottom?
BTW The code I posted in post#5 is still fully working in all browsers.
You seemed to have changed the left column now (lcol) and made an inline image run into an empty p tag.
<div class="lcol"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff1.jpg" width="224" height="153" alt="kkk" />
[B] <p> </p> [/B]
</div>
IE hates that and it’s what is causing the problem now so remove it.
<div class="lcol"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff1.jpg" width="224" height="153" alt="kkk" /></p>
If you want a bigger gap then just add a bottom margin to either the image or .lcol.
For your body background you would be better off using fixed positioning to avoid the repeat issues.
body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: 805d57;
[B] background: #873414 url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/bg.jpg) no-repeat fixed;[/B]
}
Here is the whole code I was working with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equine Assisted Learning | Leadership Development</title>
<meta name="Description" content="Equine Assisted Learning from an Epona approved instructor offering programs on leadership development, personal growth, and enhancing recovery near Asheville, NC." />
<meta name="Keywords" content="equine experiential Learning,equine facilitated learning,intuitive horsemanship,self-discovery with horses" />
<meta name="author" content="" />
<meta name="copyright" content="2011 Equinection.org, Equine Assisted Learning | Equine Facilitated Learning near Asheville, NC" />
<meta name="revisit-after" content="14 days" />
<meta name="google-site-verification" content="gGLIFvID8iZkZ8GJ_ZmjaJF-CXjrT7JjdqkwWLpWqMg" />
<meta name="y_key" content="f06d2791d98aac04" />
<link rel="canonical" href="http://www.equinection.org/" />
<link href="../css/default1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: 805d57;
background: #873414 url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/bg.jpg) repeat fixed;
}
.twoColFixRtHdr #container {
width: 956px; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #fff7e8;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRtHdr #header {
position:relative;
width:956px;
height:165px;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http//images2/header-bg.jpg) no-repeat;
}
/* ----- Header ----- */
.logo2, .logo2 a, .logo2 em {
margin:0;
width:478px;
height:153px;
position:relative;
display:block;
text-decoration:none;
overflow:hidden;
float:left;
z-index:0;
}
.logo2 em {
position:absolute;
left:-9px;
top:0px;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http//images2/logo4.jpg) no-repeat 0 0;
z-index:0;
}
h1.logo2 {
margin: 0 0 0 10px;
font-size:9px;
}
h2, #header h2 {
position:absolute;
top:45px;
right:50px;
letter-spacing:.5px;
font-family:Arial, Helvetica, sans-serif;
color:#FFCB65;
font-size:1em;
font-weight:normal;
}
/*==== Begin Nav Styles ====*/
ul#nav-top1 {
margin:27px auto 30px 213px;
list-style-type:none;
font-size:.9em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
position:absolute;
padding:0;
z-index:1;
}
ul#nav-top1 li {
display:inline;
list-style-type:none;
}
ul#nav-top1 a {
display:inline;
padding:0 5px;
text-decoration:none;
color:#330000;
}
ul#nav-top2 {
margin:0;
padding:0;
top:127px;
right:110px;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
letter-spacing:1px;
float:left;
position:absolute;
}
ul#nav-top2 li {
display:inline;
list-style-type:none;
}
ul#nav-top2 a {
display:inline;
padding:0 20px;
text-decoration:none;
color: #650000;
}
ul#nav-top2 .current a {
color: #FFCB65;
}
ul#nav-top2 a:focus {
outline:0;
color: #650000;
}
/* ----- Columns ----- */
#inner {
width:956px;
background:url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/content-bg.jpg) repeat-y 0 0;
overflow:hidden;
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 219px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
padding: 15px 10px;
}
.twoColFixRtHdr #sidebar1 ul {
margin:0;
padding:0;
list-style:none;
text-align:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 1.1em;
padding-top: 15px;
line-height:2em;
}
.twoColFixRtHdr #sidebar1 ul li {
}
.twoColFixRtHdr #sidebar1 ul li a {
padding:0 10px;
text-decoration:none;
color:#990000;
}
.twoColFixRtHdr #sidebar1 p, .twoColFixRtHdr #sidebar1 p.quote, .twoColFixRtHdr #sidebar1 p.author {
padding:0 20px 0 10px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height:1.8em;
}
.twoColFixRtHdr #sidebar1 p.quote {
font-style:italic;
}
.twoColFixRtHdr #sidebar1 p.author {
font-size:.8em;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
padding:15px 0 15px 0;
}
.twoColFixRtHdr #mainContent {
margin:0;
padding:0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position:relative;
float:left;
width:717px
}
.twoColFixRtHdr #mainContent h1 {
top:6px;
left:15px;
color:#ffffcc;
font-size:1.25em;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:1px;
font-weight: normal;
position:absolute;
}
.twoColFixRtHdr #mainContent h3, .twoColFixRtHdr #mainContent h3.mission {
padding:6px 40px 0px 30px;
color:#990000;
font-size:1.1em;
}
.twoColFixRtHdr #mainContent h3.mission {
padding-left: 30px;
}
.twoColFixRtHdr #mainContent p, .twoColFixRtHdr #mainContent p.mission {
padding:0px 40px 0 30px;
color:#330000;
font-size:.78em;
line-height:1.7em;
}
.twoColFixRtHdr #mainContent p.mission {
font-size:1.1em;
padding-bottom:60px;
}
/* ----- 2 columns for main content ----- */
.columncont {
width:710px;
overflow:hidden;
}
.lcol {
margin:0 0 0 25px;
padding:0;
width:234px;
float:left;
display:inline;
}
.lcol p {
padding:0 10px!important;
}
.lcol img {
margin:0;
padding:5px 5px 12px 5px;
float:left;
}
.rcol {
margin:0;
padding:0;
width:451px;
float:left;
}
.rcol ul {
list-style-image:url("../images2/bullet-black-disc.gif");
list-style-position: outside;
font-size:.78em;
color:#330000;
}
.rcol li {
margin-left:0px;
}
.rcol p {
margin:0px 10px 12px 0px;
font-size:0.7em;
}
.rcol h3 {
margin:0px;
color:#990000;
font-size:1.1em;
}
/* ----- Footer ----- */
#footer {
margin:0 auto;
text-align:center;
color:#FFFFCB;
font-family:Tahoma, Geneva, sans-serif;
width:956px;
padding-top:10px;
padding-bottom:20px;
position:relative;
}
.footer-decoration {
float:right;
text-align:center;
width:85px;
height:45px;
margin-top:15px;
margin-left: -85px;
}
.social {
float:left;
margin:10px auto 10px 10px;
border:none;
}
#footer ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
width:100%;
font-size: 0.9em;
padding-top: 23px;
}
#footer ul li {
display:inline;
}
#footer ul li a {
padding:0 7px;
text-decoration:none;
color:#FFFFCB;
}
/* ----- Floats ----- */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
/ float: left;
margin-right: 15px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*==== Pages ====*/
/*==== Mission ====*/
/*==== Styles ====*/
.red {
color: #650000;
}
.copy {
padding:0px;
font-size:.7em;
}
.copy a {
color:#FFFFCB;
}
.small {
font-size:.7em;
}
.header {
margin-top:-244px;
}
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<!--[if lt IE 8]>
<style>
ul#nav-top1 { margin-left:-235px; }
#header h2 { padding-top:10px; }
</style>
<![endif]-->
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<h1 class="logo2"><a href="/index.html">Equinection....Self discovery through the peace, power and wisdom of the horse<em></em></a></h1>
<ul id="nav-top1">
<li><a href="">Apprenticeship</a>|</li>
<li><a href="">Private Lessons</a>|</li>
<li><a href="">Leadership</a>|</li>
<li><a href="">Awakening</a>|</li>
<li><a href="">One Day at a Time</a>|</li>
<li><a href="">Helping Professionals</a></li>
</ul>
<h2>Call 828-682-9157 to begin the experience today</h2>
<ul id="nav-top2">
<li><a href="../index.html">home</a><span class="red">|</span></li>
<li class="current"><a href="index.html">about</a><span class="red">|</span></li>
<li><a href="#">programs</a><span class="red">|</span></li>
<li><a href="#">register</a><span class="red">|</span></li>
<li><a href="#">news</a><span class="red">|</span></li>
<li><a href="#">contact</a></li>
</ul>
<!-- end #header -->
</div>
<div id="inner">
<div id="sidebar1">
<ul>
<li><a href="">Event Calendar</a></li>
<li><a href="">Directions</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Registration</a></li>
</ul>
<img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images2/sidbar-bar.gif" width="193" height="1" class="center" alt="Sidebar line" />
<p class="quote">“Through the years I have been to many, many trainings, seminar sessions and workshops and have led many of them myself. You are one of the best facilitators I have ever experienced.” </p>
<p class="author">- Joy B., North Carolina</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff-header.jpg" width="717" height="244" alt="Meet the Staff at Equinection" />
<h1>Meet the Staff</h1>
<h3>The Equinection Staff</h3>
<p>Pictured above from right to left: Karen Head, Executive Director; Kenneth Johnson Jr.; <br />
Kim Bentley, Barn Manager; Kenneth Johnson, Foreman</p>
<div class="columncont">
<div class="lcol"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/karen1.jpg" width="224" height="338" alt="Karen Head, Excecutive Director, Equinection" /><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/karen2.jpg" width="224" height="319" alt="Another image of Karen Head, Exceutive Director of Equinection" /> </div>
<!-- end lcol -->
<div class="rcol">
<h3>Executive Director, Karen Head</h3>
<ul>
<li>M.Ed. Creative Arts Education </li>
<li>Advanced Epona Facilitator</li>
<li>Consummate Teacher Training from Nierika Sol</li>
</ul>
<p>Karen has studied and practiced experiential education for thirty years. Her background and training in experiential arts education is a strong foundation for her work at Equinection. The expressive arts techniques she offers anchor and enrich clients’ experiences.</p>
<p>Horses have always been vital to Karen. Her experiences with horses are rich and diversified. She grew up riding horses and has been a trail guide, riding teacher, and ranch hand. In the mid 70’s Karen graduated from an English riding academy and went on to study with several professional trainers. Equine facilitated learning (EFL) combines Karen’s love for horses and experiential learning to help people come to a deeper awareness of themselves and their lives. </p>
<p>She studied for 4 years at The Epona Center in Arizona. After completing the advanced Epona facilitator-training program, Karen sought to further improve her teaching skills. She began a concentrated study of teaching and facilitating at Nierika Sol where self-awareness is a major focus. Karen has over 25 years in a 12-step program and is committed to living the principles of the program. </p>
<p>She has developed a workshop specifically designed to support people in recovery where the horses serve as anchors for compassion and acceptance. She has served on the board for the National Association for Children of Alcoholics (NACoA), an organization devoted to serving the children and families affected by alcoholism.</p>
<p>Karen values the challenge of self-discovery, and the courage it takes to look within for answers. As a result of her extensive and ongoing training, Karen developed a specialized EFL program at Equinection that uses awareness as a guide to self-discovery and personal transformation. She is a dedicated and gifted teacher.</p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<br class="clearfloat" />
<div class="columncont">
<div class="lcol"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff1.jpg" width="224" height="153" alt="kkk" />
</p>
</div>
<!-- end lcol -->
<div class="rcol">
<h3>Kenneth Johnson, Foreman</h3>
<p>Kenneth Johnson was the first to join Karen and together they planned, dreamed and developed Equinection. Kenneth has lived just over the hill most all of his life. He began as an excavator and since then has become foreman and valued advisor. He is an expert horseman, craftsman, and heavy equipment operator.</p>
<p class="quote">Kevin in the process of building the gazebo, pictured at left.</span></p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<div class="columncont">
<div class="lcol"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff2.jpg" width="224" height="175" alt="Equinection Barn Manager, Kimberly Bentley" /> </div>
<!-- end lcol -->
<div class="rcol">
<h3>Kimberly Bentley, Barn Manager</h3>
<p>Kimberly is Kenneth’s daughter; she started helping her dad with excavation and clean up, staying on to become our barn manager. She brings tenderness and compassion to the everyday horse care.</p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<div class="columncont">
<div class="lcol"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff3.jpg" width="224" height="264" alt="Justin Gurley, Jack of All Trades" /> </div>
<!-- end lcol -->
<div class="rcol">
<h3>Justin Gurley, Jack of All Trades</h3>
<p>Justin has taken on many projects at Equinection; he is a first class horseman. He is also handy with a hammer and a paint brush, although he would rather you not know this. </p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<div class="columncont">
<div class="lcol"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff4.jpg" width="224" height="148" alt="Georgette Cressend, Volunteer" /> </div>
<!-- end lcol -->
<div class="rcol">
<h3>Georgette Cressend, Volunteer</h3>
<p>Georgette is our first volunteer horse handler. After attending many workshops, Georgette gives the horses care and tending; she also helps to prepare for workshops and finds ways to support Equinection in many ways. </p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<div class="columncont">
<div class="lcol"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff5.jpg" width="224" height="182" alt="Georgette Cressend, Volunteer" /> </div>
<!-- end lcol -->
<div class="rcol">
<h3>Polly Knowles, Office Manager</h3>
<p>Polly handles all of the administrative duties for the Equinection office. She loves horses and is happy to be working where she can get a little dirty every now and again. </p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
<div class="columncont">
<div class="lcol"> <img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images/staff6.jpg" width="224" height="256" alt="Georgette Cressend, Volunteer" />
<!-- <p> </p> -->
</div>
<!-- end lcol -->
<div class="rcol">
<h3>Kenny Martin</h3>
<p>Kenny has helped us build the meeting space as well as been support staff for workshops. He is an asset to Equinection as he is good with a hammer, calm with our horses, and pleased to help our participants when he can. </p>
</div>
<!-- end #rcol -->
</div>
<!-- end #columncont -->
</div>
<!-- end #mainContent -->
<br class="clearfloat" />
</div>
<!-- end #inner -->
</div>
<!-- end #container -->
<div id="footer">
<div class="footer-decoration"> <a href="http://www.facebook.com/home.php#!/pages/Equinection-LLC/125311030875693" target="_blank"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images2/facebook.png" width="32" height="32" class="social" alt="Find us on Facebook" /></a> <a href="http://www.linkedin.com/pub/diannah-beauregard/7/2b6/b2" target="_blank"><img src="http://www.charlotteswebservices.com/temp/http-equinection/http/about/images2/linkedin.png" width="32" height="32" class="social" alt="Connect with us on Linkedin" /></a> </div>
<!-- footer-decoration -->
<ul>
<li><a href="../index.html">home </a><span class="small">•</span></li>
<li> <a href="index.html">about</a><span class="small">•</span></li>
<li><a href="">programs</a><span class="small">•</span></li>
<li><a href="">register </a><span class="small">•</span></li>
<li><a href=""> news </a><span class="small">•</span></li>
<li><a href=""> contact</a></li>
</ul>
<p class="copy">@ 2011 Equinection, LLC. All Rights Reserved. 561 Piercy Road, Green Mountain, NC 28740 828-682-9157 </p>
<p class="copy">Site by <a href="http://www.charlotteswebservices.com" target="_blank">Charlotte’s Web</a></p>
<p class="copy">Photography credit: <a href="http://www.silverspiritsphotography.com/" target="_blank">Max Popper</a>, <a href="http://www.barnwellphoto.com" target="_blank">Tim Barnwell</a>, <a href="http://www.blueridgemarketinganddesign.com" target="_blank">Jeanne Toporek</a></p>
<!-- end #footer -->
</div>
</body>
</html>
I must have fixed the extra <p> </p> right as you were looking at it. I had caught that. Believe it or not.
Ah…that took care of the bg. It’s working in all browsers beautifully now. Thanks Paul!!
Can I have your brain?
Any idea why the top image and header bg bar is jumping down in IE 6 on this page (UN and PW: guest)? Fine in every other browser even IE5.
Its the italic bug in IE6 that stretches the wrapper and breaks the floats.
Try this fix:
* html p.quote{margin:0 5px 0 0}
My gosh, IE 5 and 6 and even 7 be gone!
So interesting b/c I didn’t do that on the first page and IE 6 was fine.
Any clue about the space between the header bg and that top horse pic - happening in IE 5-7?
You probably need to set the image to display:block to cure the gaps or remove the whitespace from the html.
Got it!
Hey Paul, what am I missing? I copied a file that is working perfectly in all versions of IE, and just changed out the photos and text but when I upload the [URL=“http://www.charlotteswebservices.com/temp/http-equinection/http/programs/apprenticeship.html”]new page, IE6 is still starting the top main image much lower than it should. Don’t get it b/c it’s the same file and we fixed the italic bug in IE6:
* html p.quote{margin:0 5px 0 0}
HI,
I’m not sure why that one has changed but a smaller with for the quote should do the trick.
* html p.quote {
width:180px;
}