2 Replies Latest reply on Sep 2, 2008 7:31 PM by Rock_Artist

    Double Float Margin Bug "error"

    Rock_Artist
      I did a browser compatibility check on one of the pages that I am building and got this error.............

      "Line 112, Double Float Margin Bug 'error'
      When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
      Affects: Internet Explorer 6.0
      Likelihood: Very Likely"

      I have many thumbnails for a gallery page in their own divs, within the content div, and they are floated in there.
      When I viewed solutions, they suggested:

      "When a margin is applied to a floated box on the same side as the direction the box is floated AND the floated box is the first one inside its containing box, the margin is doubled. (In other words, a left-floated box with margin-left set to move it away from its containing box will be twice as far away from the left edge of the containing box as intended.)
      SOLUTION

      Specify display: inline; for the affected float.
      DETAILED DESCRIPTION

      This bug only reproduces when the floated element's margin extends in the same direction as the float itself, and is between the float and the container box's inside edge. Subsequent floats with similar margins won't reproduce this bug- just the first float in any row of floated elements."

      Does anyone have any solutions, suggestions as how to fix this? I will attach my code. And if anyone has a better solution as to laying my thumbnail divs in another div container, please say so. The reason I am putting them in separate divs is because that is what someone suggested to use them with Lightbox2. He said they needed some kind of special CSS to enable some of the functions and they (the thumbnails) were easier to style if they were in their own separate divs. I'm open for any suggestions.

      Thanks!