p:layoutUnit inheriting height of p:layout in px in IE only

[mitnpatel]

Hi
I am having problem in IE only (I have tested on IE 8 only so far). Things are well for Firefox and Chrome. My code is as follows :

Code: Select all

 
<div id="deviceTabInnerLayoutContainer">
        <p:layout id="devicetabUnitLayoutContainer">
        
          <!-- Device List Layout  -->
          <p:layoutUnit position="left" resizable="true" width="400" minWidth="100" maxWidth="500">
           ......
          </p:layoutUnit>
         <p:layoutUnit position="center" resizable="true" > 
         </p:layoutUnit>
       </p:layout>
</div> 

Now css styling is

Code: Select all

 
#deviceTabInnerLayoutContainer {
  margin: 0.75em 0%;
  height: 94%;
  width: 97%;
}

#devicetabUnitLayoutContainer {
  width:1550px;
  height:98%;
}

problem with IE 8 is when I an using #devicetabUnitLayoutContainer's hight in % (i.e. 98 % in my case) and I expecting it's inner layoutUnit's height to be same.
But in IE 8 it is getting converted to 98px for inner layoutUnit container (i.e. ui-layout-doc class ). It is only happning in IE only.

If someone have any idea about reason or workaround for this issue.