Float Bug: Affects IE6/7. Is it Pixel Jog?

I have a demo site and I’m having trouble figuring out why, at the very bottom, two floated elements are not side by side, as they should be. Is this a Pixel Jog issue? This only occurs in IE 6 & 7.

U: demo
P: demo

Thank you for your help!

Hi,
No, it’s not a pixel jog. You have floats hanging on one another due to the various amounts of content making the heights slightly different.

It is not exclusive to IE6/7. Just zoom the text in FF and you will see that same bottom float hang.

To see what is going on just add a BG color to those divs.

.group div {background:lime;}

The best way to handle these divs is with [FONT=Courier New]display:inline-block;[/FONT] instead of floats. That will allow them to sit beside each other without dynamic heights causing a problem.

By the way, all that inline css needs to be removed in order to get the floats off of there.
It should have been in the stylesheet to begin with. :wink:

Here is how to fix it -


.group div{
width:460px;
display:-moz-inline-box;/* FF2 & under */
display:inline-block;/* for modern browsers */
margin-bottom:1em;
background:lime;
vertical-align:top;
}
* html .group div {display:inline;}/*IE6 inline-block trigger*/
*+html .group div {display:inline;}/*IE7 inline-block trigger*/

.group div .picl {
width:auto;
float:left;
margin-left:28px
}
.group div p {
margin:0 0 0 128px;
padding:0 !important;
}

.group:after { /* for browsers that support :after */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}

* html .group { 
height: 1%; 
overflow:visible;
} /*for IE6 */

*:first-child+html .group {
min-height: 1px;
} /* for IE7 */

And here is the html with the inline css removed -


<div id="content-box">
<div class="padding">
<h1>Board Members </h1>
<h3>Staff</h3>

<div class="group">
    <p><strong>Executive Director:&nbsp;Dorothy Booth</strong><br />
    <strong>Voice:&nbsp;</strong>(209) 599.7519<br /><strong>Fax:&nbsp;</strong>(209) 599.2286<br /><strong>Email:&nbsp;</strong><a href="mailto:dbooth@clearwire.net">dbooth@clearwire.net</a><br /></p>
</div>
<div class="group">
    <p><strong>Executive Assistant:&nbsp;Sam Carhart</strong><br />
    <strong>Voice:&nbsp;</strong>(209) 599.7519<br /><strong>Fax:&nbsp;</strong>(209) 599.2286<br /><strong>Email:&nbsp;</strong><a href="mailto:slcarhart@clearwire.net">slcarhart@clearwire.net</a><br /></p>
</div>
<div class="group">
    <p><strong>Administrative Assistant:&nbsp;Lauren Bitters</strong><br />
    <strong>Voice:&nbsp;</strong>209-599-7519<br /><strong>Fax:&nbsp;</strong>209-599-2286<br /></p>
</div>

<h3>Executive Board</h3>
<div class="group">
    <div>
        <div class="picl"><img src="images/board/Red_Nutt-President.jpg" width="90" height="109" alt="" /></div><p><strong>President:&nbsp;Elden "Red" Nutt</strong><br />
        President<br /><strong>Voice:&nbsp;</strong>(209) 599.6660<br /><strong>Email:&nbsp;</strong><a href="mailto:erednutt@aol.com">erednutt@aol.com</a><br />
        </p>
    </div>
    <div>
    <div class="picl"><img src="images/board/Ron_Douma-VicePresident.jpg" width="90" height="109" alt="" /></div><p><strong>Vice President:&nbsp;Ron Douma</strong><br />
        <strong>Business:&nbsp;</strong>Ocean One Travel Center<br />Vice President<br /><strong>Voice:&nbsp;</strong>(209) 599.9986<br /><strong>Fax:&nbsp;</strong>(925) 520.4860<br /><strong>Email:&nbsp;</strong><a href="mailto:ron_douma@verizon.com">ron_douma@verizon.com</a><br />
        <strong>Web:&nbsp;</strong><a href="http://www.oceanone.com" target="_blank">www.oceanone.com</a>,<br /><a href="http://www.ripontravel.vacation.com" target="_blank">www.ripontravel.vacation.com</a><br /></p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Marge_Imfeld-Treasurer.jpg" width="90" height="109" alt="" /></div><p><strong>Treasurer:&nbsp;Marge Imfeld</strong><br />
        <strong>Business:&nbsp;</strong>Ability Mortgage<br />Re/Max Executive<br /><strong>Voice:&nbsp;</strong>(209) 599.2253<br /><strong>Fax:&nbsp;</strong>(209) 599.2273<br /><strong>Email:&nbsp;</strong><a href="mailto:remaxmom@juno.com">remaxmom@juno.com</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Danielle_Pierce-Secretary.jpg" width="90" height="109" alt="" /></div><p><strong>Secretary:&nbsp;Danielle Pierce</strong><br />
        <strong>Business:&nbsp;</strong>Bank of Stockton<br />Assistant Vice President<br /><strong>Voice:&nbsp;</strong>(209) 254.2100<br /><strong>Fax:&nbsp;</strong>(209) 254.2110<br /><strong>Email:&nbsp;</strong><a href="mailto:daniellepierce@bankofstockton.com">daniellepierce@bankofstoc<br />kton.com</a><br />
        </p>
    </div>
</div>

<h3>Board Member</h3>
<div class="group">
    <div>
        <div class="picl"><img src="images/board/Pastor_Chuck_Roots-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Chuck Roots</strong><br />
        <strong>Business:&nbsp;</strong>Ripon Free Methodist Church<br />Pastor<br /><strong>Voice:&nbsp;</strong>(209) 599.4815<br /><strong>Email:&nbsp;</strong><a href="mailto:roots66@verizon.net">roots66@verizon.net</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Cliff_Jorgensen-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Cliff Jorgensen</strong><br />
        <strong>Business:&nbsp;</strong>Cliff Jorgensen Agency<br /><strong>Voice:&nbsp;</strong>(209) 239.4611<br /><strong>Fax:&nbsp;</strong>(209) 239.9122<br /><strong>Email:&nbsp;</strong><a href="mailto:cjorgensen@velociter.net">cjorgensen@velociter.<br />net</a><br />
        <strong>Web:&nbsp;</strong><a href="http://www.agent.allstate.com/cjorgensen" target="_blank">www.agent.allstate.com/cjor<br />gensen</a></p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Dean_Ueker-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Dean Uecker</strong><br />
        <strong>Business:&nbsp;</strong>Uecker Agency Farmers Insurance<br />Agent<br /><strong>Voice:&nbsp;</strong>(209) 599.6639<br /><strong>Fax:&nbsp;</strong>(209) 599.5421<br /><strong>Email:&nbsp;</strong><a href="mailto:uecker105@yahoo.com">uecker105@yahoo.com</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Fire_Chief_Dennis_Bitters-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Dennis Bitters</strong><br />
        <strong>Business:&nbsp;</strong>Ripon Fire District<br />Fire Chief<br /><strong>Voice:&nbsp;</strong>(209) 599.4209<br /><strong>Fax:&nbsp;</strong>(209) 599.2847<br /><strong>Email:&nbsp;</strong><a href="mailto:dbitters@riponfire.com">dbitters@riponfire.co<br />m</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/H_Thomas_Beck-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>H. Thomas Beck</strong><br />
        <strong>Business:&nbsp;</strong>H. Thomas Beck, Attorney at Law<br />Attorney at Law<br /><strong>Voice:&nbsp;</strong>(209) 599.5860 <br /><strong>Fax:&nbsp;</strong>(209) 599.5052<br /><strong>Email:&nbsp;</strong><a href="mailto:htbecklaw@gmail.com">htbecklaw@gmail.com</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Helen_Caetano-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Helen Caetano</strong><br />
        <strong>Business:&nbsp;</strong>The Tank House Gift Shoppe<br /><strong>Voice:&nbsp;</strong>(209) 599.7110<br /><strong>Email:&nbsp;</strong><a href="mailto:thetankhousegiftshoppe@msn.com">thetankhousegiftshopp<br />e@msn.com</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Kristine_Griesheimer-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Kristine Griesheimer</strong><br />
        <strong>Business:&nbsp;</strong>Oak Valley Community Bank<br /><strong>Voice:&nbsp;</strong>(209) 758.8034 <br /><strong>Fax:&nbsp;</strong>(209) 254.3301<br /><strong>Email:&nbsp;</strong><a href="mailto:kgriesheimer@ovcb.com">kgriesheimer@ovcb.com</a><br />
        </p>
    </div>
    <div>
        <div class="picl"><img src="images/board/Lori_Adams-Director.jpg" width="90" height="109" alt="" /></div>
        <p><strong>Lori Adams</strong><br />
        <strong>Business:&nbsp;</strong>Real Estate<br /><strong>Voice:&nbsp;</strong>(209) 599.5446<br /><strong>Email:&nbsp;</strong><a href="mailto:loriadams@lariadams.com">loriadams@lariadams.c<br />om</a><br />
        </p>
    </div>
</div>

<p style="text-align: right;"><a href="#top">return to top</a></p>
</div>
</div><!--End content-box-->