ansaurus

Question

CSS Rotation & IE: absolute positioning seems to break IE

Answer 1

A:

I find that this works if you put the rotations on the txtblocks, instead of on the outer container.

graphicdivine 2010-04-13 15:18:10

I tried this too. The items rotate, but they are not displayed consistently between IE and FF. I was rotating the container to try to get uniform positioning. I did just see that IE7 seems to rotate absolutely positioned elements, and that it is IE8 is having trouble.

sing1ejack 2010-04-13 15:51:40

Answer 2

+1 A:

Try this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>Centrsource najboljše Ponudbe</title>
    <style type="text/css">
    #content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    }

.txtblock {
 display:block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }


    </style>
</head>
<body>
<div id="content">
    <div class="txtblock">Ardvark Avacado<br />Awkward</div>
</div>
</body>

</html>

You're applying the code to the wrong element. Also as reference to others in understanding this http://snook.ca/archives/html_and_css/css-text-rotation

easwee 2010-04-13 15:22:21

Thanks, but it cascade down shouldn't it? The children's position should be relative to their parent - that is, they should receive the same rotation. And if I can't just rotate the parent I'd have to set the rotation for each child... and that's a tiresome list.

sing1ejack 2010-04-13 15:57:03

As far as I know filter: uses javascript as base to do all calculations so it's not really css - thus the cascade does not apply. Also IE has always had his way of handling things. P.s.: Mark as solved if this answers helped you.

easwee 2010-04-14 10:40:44

ansaurus

tags:

views:

answers:

CSS Rotation & IE: absolute positioning seems to break IE

related questions