Across Boundaries - ( Cipto )

IE has layout and resize height/width Problem

IE as a browser have an awkward principle. Every element that has height or width Will responsible for it's own Size.

Not inherit from it's parent. So if you set height or width it will marked as HasLayout=true.

Now the Browser will try to force Fixed the size in the layout.

Microsoft also said this is the cause of 99% of the more common IE rendering bugs/errors (disappearing, shifting elements)

this property is set to False by default, and once it is set to true, either by element type or a specific CSS property, it cannot be "reset" to false 

Internally, having layout means that an element is responsible for drawing its own content

What can trigger it?

• position: absolute
• float: left|right
• display: inline-block
• width: any value other than 'auto'
• height: any value other than 'auto'
• writing-mode: tb-rl
• overflow: hidden|scroll|auto
• position: fixed
• min-width: any value
• max-width: any value other than 'none'
• min-height: any value
• max-height: any value other than 'none'
  

How to reset it?

• 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')

Another thing to consider is how “layout” affects scripting. The clientWidth/clientHeight properties always return zero for elements without “layout.”

*Siggh*$^%#$)

When resizing the height of an element . the Outer one still preserve the old one Height.

 In order to Make the outer one resize , try on javascript setting the problem element = element.style.zoom = 0;

Share this post: | | | |