How can I get around this IE6/7 behaviour?

Hi all, hope someone can help em here, I'm at a loss.

IE is at sixes and sevens again. ho ho.

I'm getting the following strange margins on either side of these floating DIVs, where no margins have been set for them or their children. See screenshot thingy below. Note the green and red borders are just to illustrate the margin problem:



The code is very simple.

Code:

    <style type="text/css">
      
      .bookingform { font: normal 12px verdana,arial,sans-serif }
      .bookingform .subtitle { color: #404040; margin-bottom: 10px; font-weight: bold; font-size: 13px; text-decoration:underline }
      .bookingform .subsectn { margin-left: 20px; margin-right: 20px }
      .bookingform .row { }
      .bookingform .lblcol { float:left; width: 120px; margin-top: 2px; border:1px solid red }
      .bookingform .fldcol { float:left; border:1px solid green }
      .bookingform .rowgap { height: 5px }
      .bookingform .clear { clear:both }
      .bookingform .inptext { border: 1px solid #404040; background-color: #FFFFF0; font-size: 12px; padding: 3px; margin: 0px }
      
    </style>

    <div class="bookingform">

      <div class="subtitle">Booking Details:</div>
      <div class="subsectn">
      
        <div class="row">
          <div class="lblcol">First Name:</div>
          <div class="fldcol"><input class="inptext" type="text" name="firstname" size="40" maxlength="100"/></div>
          <div class="clear"></div>
        </div>

        <div class="rowgap"></div>

        <div class="row">
          <div class="lblcol">Last Name:</div>
          <div class="fldcol"><input class="inptext" type="text" name="lastname" size="40" maxlength="100"/></div>
          <div class="clear"></div>
        </div>
      
      </div>
    </div>

Notice the style ".subsectn" with 20px margins on left and right.
It seems, in IE6 and 7, the input boxes are inheriting the margins! :/
However I can't override it. Tried setting margins to 0px on everything I can think of, no luck.

Can anyone suggest a way I can do this without the discrepancy between FF and IE6/7? I just want those margins in the floats to go away.

Many thanks!

After all that... discovered it's the "margin inheritance" bug:
http://stackoverflow.com/questions/955142/ie6-and-7-weird-margin-inheritance

Fixed it by adding "; zoom:1" to the "subsectn" style.