Float clearing issues - looks good in newer standards-compliant - broke in IE 6

I still have much to learn with CSS, so please speak slowly if you can help me.

I have a site that looks gorgeous on IE 7, Safari, Firefox, etc. - Most of the newer browsers. But in IE 6 something bizarre happens with the clearing of the right side <div>.

Site is located here: http://www.devaultquigley.com/ac

I have absolutely come to the end of my wits with this one. I simply don't know enough about CSS to figure out what of the million bugs has popped up this time. I'm trying. I'm trying reeeaal hard to not use my clunky old table layouts. Why do you have to do  this to us, Microsoft?

Can anyone help me? Thanks!
comparison.jpg
eric_quigleyAsked:
Who is Participating?
 
sajay_jConnect With a Mentor Commented:
<div class="twoColFixLtHdr"> <img image of teens> <div class="homePageCopy" style="float:left;"> block of text beneath it </div> </div>
0
 
sajay_jCommented:
Yes It looks beautiful in all browsers except ie6.

Please fill this lines in css sheet;

.twoColFixLtHdr

{

float: left;

width: 497px;

padding-top: 0pt;

padding-left: 11px;

padding-bottom: 0pt;

padding-right: 0pt;

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

}

and add this class to a div closing left side.... Hope you understood.

The div should cover image and the text block at its bottom of left side if you understand it clearly...

Check it. Regards
Sajay
0
 
David S.Connect With a Mentor Commented:
Removing the zoom declaration on ".twoColFixRtHdr #mainContent" might solve this.

Alternatively, you could replace your rule for it in the main stylesheet with this one:

.twoColFixRtHdr #mainContent {
  width: 480px;
  margin: 0 0 0 13px;
  padding: 0;
  float: left;
  display: inline; /* IE6 doubled float-margin fix */
}

By the way, [X]HTML comments (including IE's conditional comments) and elements should not be in a stylesheet.
0
All Courses

From novice to tech pro — start learning today.