-ms-filter problems while using position:absolute

Hi,
I’m trying to print few content which are inside three div tags. Outta which one’s position is set as absolute(position:absolute). Then I tried to rotate all the three content using the filter option which is working fine in IE8 compatibility mode(IE7). However when I try to use -ms-filter option and try to do the same, the content whose position is absolute is not getting rotated. Only the other two are getting rotated.

How can I fix this issue?

Thanks in advance.

Hi,

I’d need to see the full example but IE8 does have a problem with positioned children of elements that have the filter applied as it seems to cancel the filter out (see issue 63 for a similar problem).

For IE8 you’d need to reapply the rotation to the positioned child (but hide from ie7 and under as it would then be rotated twice).

Thanks Paul.

The following is the sample code using Filter(This works fine)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<asp:Content>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<style type="text/css" media="print">
.landScape
{ 
 width: 100%; 
 height: 100%; 
 margin: 0% 0% 0% 0%; 
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
}
 
 </style>
 <script type="text/javascript" language="javascript" >
 window.onload = function loadMe() {
 document.body.className = 'landScape';
 }
 </script>
<div style="background-color:Gray;"   >
<div> 
<table > <td>Hi Inner Div</td>
 </table>
      <div id="InnerContainer" style="position:absolute;">Hi I am inner MOST DIV</div>
</div>
</div>
</asp:Content>

The below one isone where I’ve used -ms-filter(Here is where the third div’s content whose “position:absolute” content is not getting rotated.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<asp:Content>
  
<style type="text/css" media="print">
.landScape
{ 
 width: 100%; 
 height: 100%; 
 margin: 0% 0% 0% 0%; 
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)";
}
 
 </style>
 <script type="text/javascript" language="javascript" >
 window.onload = function loadMe() {
 document.body.className = 'landScape';
 }
 </script>
<div style="background-color:Gray; "   >
<div> 
<table > <td>Hi Inner Div</td>
 </table>
      <div id="InnerContainer" style="position:absolute;">Hi I am inner MOST DIV</div>
</div>
</div>
</asp:Content>

HI,

As I mentioned above you’d need to restate the filter on the absolute element.
e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.landScape {
    width:300px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
    position:relative;
    text-align:right;
}
.test{
    position:absolute;
    right:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(Rotation=3)";
    margin:0;
}
</style>
</head>
<body>
<div class="landScape">
<div class="test">Hi I am inner MOST DIV</div>
    <p>testing</p>
</div>
</body>
</html>


However, I found the positioning in IE almost impossible in a cross browsers way for that absolute element so I don’t think it will be much use.