Welcome Guest, you are in: <root> • Login

Page History: hasLayout

Compare Page Revisions

2 1 0 Current 2 1 0

« Older Revision - Back to Page History - Newer Revision »

Page Revision: 2010/05/22 15:43

Default layout elements

The following elements appear to have layout by default.

* , * , ,

,

* * * , , , , <fieldset>, <legend> * <iframe>, <embed>, <object>, <applet> * <marquee><br /><br /> <a href="Edit.aspx?Page=hasLayout&Section=1" class="editsectionlink"></a><h1 class="separator">Properties<a class="headeranchor" id="Properties_1" href="#Properties_1" title="Link to this Section"></a></h1> The following CSS property/value pairs will, if applied, allow an element to gain layout.<br /><br /><div class="box">position: absolute Refers to its containing block, and that's where some problems begin.</div><br /><div class="box">float: left|right The float model has a lot of quirks due to some aspects of a layout element.</div><br /><div class="box">display: inline-block Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.</div><br /><div class="box">width: any value other than 'auto' This is often an implicit fix, more often the trigger when hasLayout does things wrong.</div><br /><div class="box">height: any value other than 'auto' height: 1% is used in the Holly Hack.</div><br /><div class="box">zoom: any value other than 'normal' (<a class="externallink" href="http://msdn.microsoft.com/en-us/library/ms531189.aspx" title="MSDN" target="_blank">MSDN</a>) MS proprietary, does not validate. zoom: 1 can be used for debugging.</div><br /><div class="box">writing-mode: tb-rl (<a class="externallink" href="http://msdn.microsoft.com/en-us/library/ms531187.aspx" title="MSDN" target="_blank">MSDN</a>) MS proprietary, does not validate.</div><br />As of IE7, overflow became a layout-trigger.<br /><br /><div class="box">overflow: hidden|scroll|auto This property did not apply in prior versions, unless “layout” was added to the box by other triggers.</div><br /><div class="box">overflow-x|-y: hidden|scroll|auto As part of the CSS3 box model module, overflow-x and -y are not widely implemented yet. They did not trigger hasLayout in prior versions of IE.</div><br />And new hasLayout actors appeared on the screen in IE7. As far as hasLayout is concerned, the min/max properties act similar to how width and height works, and the effects of fixed and absolute positioning seem to be identical.<br /><br /><div class="box">position: fixed ./.<br /><br />min-width: any value Even the value 0 lets the element gain layout. max-width: any value other than 'none' ./. min-height: any value Even the value 0 sets haslayout=true max-height: any value other than 'none' ./.</div><br />Based on querying the IE Developer Toolbar and preliminary testing.<br /><br /><a href="Edit.aspx?Page=hasLayout&Section=2" class="editsectionlink"></a><h1 class="separator">Notes on elements at inline level<a class="headeranchor" id="Notes_on_elements_at_inline_level_2" href="#Notes_on_elements_at_inline_level_2" title="Link to this Section"></a></h1> For inline elements (either inline by default like span, or having display: inline)<br /><br /> * width and height trigger hasLayout in IE 5.x and IE 6 or newer in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout. * zoom always triggers hasLayout, but it's not supported in IE5.0.<br /><br />Elements having both “layout” and display: inline behave in a similar way as what the standards say about inline-block: they flow horizontally like words in a paragraph, are sensitive to vertical align, and apply a sort of shrink-wrapping to their content. As soon as the inline elements have layout, they act as inline-block, this is an explanation why, in IE/Win, inline elements can contain and hold block-level elements with less problems than in other browsers, where display: inline remains inline.<br /><br /><a href="Edit.aspx?Page=hasLayout&Section=3" class="editsectionlink"></a><h1 class="separator">Resetting hasLayout<a class="headeranchor" id="Resetting_hasLayout_3" href="#Resetting_hasLayout_3" title="Link to this Section"></a></h1> Resetting the following properties to their default value in a separate rule set will reset (or undo) hasLayout, if no other property giving hasLayout remains in effect:<br /><br /> * width, height (to 'auto') * max-width, max-height (to 'none') (in IE 7) * position (to 'static') * float (to 'none') * overflow (to 'visible') (in IE 7) * zoom (to 'normal') * writing-mode (from 'tb-rl' to 'lr-tb')<br /><br />Authors must be careful with resetting these properties. Consider a menu system: Changing the hasLayout-status on a:hover, be it intentionally or not, might result in unexpected rendering (or IE 6 program instability when undone dynamically in combination with position: relative).<br /><br />The display-property differs: while 'inline-block' sets haslayout = true, the flag will not be reset to false later on by overriding the value with 'block' or 'inline' in another rule set.<br /><br />Setting the properties min-width, min-height to their default value '0' still gives hasLayout, but IE 7 accepts for them the invalid value 'auto', which resets hasLayout.<br /><br /> <div id="PageInternalFooterDiv"> </div> <div id="MainFooterDiv"> <!-- Used for layout purposes only --> </div> <br /> <div id="inplyCommentBox"></div> </div> </div> <div id="FooterDiv"> <h2 class="separator">MUST Creative Engineering Laboratory<a class="headeranchor" id="MUST_Creative_Engineering_Laboratory_0" href="#MUST_Creative_Engineering_Laboratory_0" title="Link to this Section"></a></h2> <a href="http://barosee.net" title="http://barosee.net" target="_blank"><img src="GetFile.aspx?File=/BaroSee/BaroSee-txt60.png" alt="Image" /></a><a href="http://mqr.kr/" title="http://mqr.kr/" target="_blank"><img src="http://www.must.or.kr/images/common/mqr.png" alt="Image" /></a> <a href="http://mxc.kr/" title="http://mxc.kr/" target="_blank"><img src="http://www.must.or.kr/images/common/mxc-shorten.url.png" alt="Image" /></a> <a href="http://mxc.kr/t/" title="http://mxc.kr/t/" target="_blank"><img src="http://www.must.or.kr/images/common/mxc-exchange.png" alt="Image" /></a> <br /><br /><h1 class="separator"> </h1> <a href="http://must.or.kr/ko/products/solution/mwsf/" title="http://must.or.kr/ko/products/solution/mwsf/" target="_blank"><img src="http://www.must.or.kr/images/common/mwsf.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mwsm/" title="http://must.or.kr/ko/products/solution/mwsm/" target="_blank"><img src="http://www.must.or.kr/images/common/mwsm.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mwtc/" title="http://must.or.kr/ko/products/solution/mwtc/" target="_blank"><img src="http://www.must.or.kr/images/common/mwtc.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mwmc/" title="http://must.or.kr/ko/products/solution/mwmc/" target="_blank"><img src="http://www.must.or.kr/images/common/mwmc.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mqr/" title="http://must.or.kr/ko/products/solution/mqr/" target="_blank"><img src="http://www.must.or.kr/images/common/mqr.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mmap/" title="http://must.or.kr/ko/products/solution/mmap/" target="_blank"><img src="http://www.must.or.kr/images/common/mmap.png" alt="Image" /></a> <a href="http://must.or.kr/ko/products/solution/mnotice/" title="http://must.or.kr/ko/products/solution/mnotice/" target="_blank"><img src="http://www.must.or.kr/images/common/mnotice.png" alt="Image" /></a><br /><br /><div id="LicenseInfoDiv"> Copyright © 2010 MUST Corp. All rights reserved. <a href="mailto:must@must.or.kr" accesskey="9">must@must.or.kr</a><br/> This Program is released under the GNU General Public License v2. <a href="GPL.txt" target="_blank">View the GNU General Public License v2</a> or visit the <a class="externallink" href="http://www.gnu.org/" target="_blank">GNU</a> website. </div> </div> </form> <!--<script src="https://inply.net/scripts/commentbox.js?ClientId=a6fa2ca7-613b-4e8d-80fa-e2f83b59ab3b"></script>--> </body> </html>