I have a stack of divs that will eventually contain info/content.
Above each is a div floated right
All of this is wrapped in a div for global margins
In FF, all divs are perfectly stacked with no top or bottom margins between
But IE6/7 adds an unintended bottom margin to the 1st floated div. only the 1st.
If i remove the float, the margin goes away.

Here's my CSS + HTML.

Any clue how to resolve this? I've tried so many tweeks & pinches i think i'm in that cant-see-the-forest-for-the-trees phase.

thanks...

CSS

.contwrap { margin:5px 10px 0px 10px; padding:0px; }
.btn_select { width:150px; margin:0px 10px 0px 0px; background-color:#999999; text-align:center; display:inline; float:right; }
.btn_select a, .btn_select a:hover { color:#FFFFFF; font-weight:bold; text-decoration:none; }
.infoblock { margin:0px 0px 0px 0px; border-top:1px solid #c2c1c0; border-bottom:1px solid #c2c1c0; background:#fcfcec; line-height:1.3em; clear:both; }

HTML

<div class="contwrap">

    <div class="btn_select"><a href="#">Select This Account</a></div>
    <div class="infoblock">test</div>

    <div class="btn_select"><a href="#">Select This Account</a></div>
    <div class="infoblock">test</div>

    <div class="btn_select"><a href="#">Select This Account</a></div>
    <div class="infoblock">test</div>

</div>

Have you zeroed out ALL margins and padding for all the elements on your page first, prior to putting them back on for each element as needed ?

How are you clearing your floats ?

i'm killing (o, resetting) all margins & paddings with:

 * { margin:0px; padding:0px }

the items that are floated right (.btn_select) are cleared by the contains directly below each of them (.infoblock) using clear:both;. Or, do i misunderstand your question?

No, you understood the question
Ok, chalk up another one for the Holly Hack !
If you add height: 1%; on .infoblock, the extra space goes away. However you'll have to do this with conditional comments and a separate css file just for the 'hacks' to make IE behave.