How can I get around this IE6/7 behaviour?

Discussion in 'General Web Coding' started by antic, Jan 10, 2010.

  1. antic

    antic Perch

    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.

        <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 }
        <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 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>
    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!
  2. antic

    antic Perch

  3. Stephen

    Stephen US Operations Staff Member

    Behold, the awesomeness of IE6/7! ;)

    IE8 did a great job breaking many sites as well, since it actually renders better, people just looking for 'ie' and throwing out specific fixes would have MORE bugs...

Share This Page

JodoHost - 26,000 hosting end-users in 100 countries
Plesk Web Hosting
VPS Hosting
H-Sphere Web Hosting
Other Services