IE Input and Inheriting the Parent Margin
If you can't figure out why some of your Web page margins don't quite work in Internet Explorer, the hasLayout property may be the cause. HasLayout, found only in older versions of IE, allows those browsers to style elements on a Web page. The hasLayout margin problem only affects some HTML elements, such as input text boxes that inherit properties from parent controls. However, you need to know how to resolve the issue if you want to create consistent page layouts that appear the same in all browsers.
Other People Are Reading
-
Inheritance and Relationships
-
Inheritance refers to the acquisition of something from something else. In CSS, objects on a Web page can inherit attributes from a parent object. A parent object is usually a page element, such as div, that holds the object in question. The code below illustrates a simple parent and child relationship:
<div>
<input type="text">
</div>The child input box resides in a parent div. No inheritance occurs in this example because the input does not acquire any properties that the div possesses.
Margins
-
Margins, as seen in magazines and textbooks, inject aesthetic white space into documents. When you use CSS to add a 10-pixel top margin to a div, for example, a browser ensures that no other element above the div comes within 10 pixels of it. You can also add margins to child element that reside in parent elements, as follows:
<div class="parent">
<input class="child" type="text">
</div>The parent element, div, references a CSS class named "parent" that may set its margin. The input element, which is a child, references a different class that may set its margin to another value.
-
IE HasLayout Problem
-
Imagine a situation where an input element lies inside a div that resides in another div, as shown in the following example:
<div id="element1" class="element1Class">
<div id="element2" class="element2Class">
<input id="element3 class="element3Class" type="text">
</div>
</div>The element1 div has layout and contains element2, which also has layout. Element1 references a CSS class that sets its left margin to 10 pixels. Element3, which resides in element2, references a class that sets its left margin to 5. When viewing this page in browsers other than IE7 or IE6, you see a text box that sits five pixels from the browser's left edge; in IE7 or IE6, it sits 15 pixels from the edge because it inherited the margin of its grandparent container.
Solution
-
This IE problem does not occur unless a parent element's hasLayout value is "true." This read-only property is specific to Internet Explorer, and has a default value of "false" for some elements. When an element's hasLayout value is "false," that element relies on its parent to manage its layout. Resolve the input margin problem by giving the element that contains the input control a value for width or height. In the above example, you would set those values in the element2Class. You could also give the element other property values as well, such as position:relative and zoom. Because zoom is specific to IE, code your logic so that the CSS only applies zoom in IE browsers.
-
