IE inherited margin bug: form elements and hasLayout

Internet Explorer on Windows has a wide variety of rendering bugs. Many of these bugs can be worked around by giving affected elements the IE-specific "hasLayout" property and an extensive analysis of how and when this works is available. This article describes the opposite situation: an IE rendering bug that is triggered by elements having layout for which the workaround is to remove the hasLayout property.

The bug is that certain form input elements whose containing box has layout inherit the sum of the margins of all of their containing boxes. Unlike the the well known IE doubled float-margin bug, this one does not involve floats. There is a workaround but, so far, no magic-bullet CSS-only solution.

The Seven C's Border Technique

Continuously Changing Curved Clear Corners Containing Content

Screenshot of client designA client presented me with an existing visual design for their new web site. They had the layered image in Photoshop from their graphic artists and wanted me to convert it to working HTML/CSS. Among other elements, the design featured boxed regions with transparent large-radius curved corners on a gradient background.