CSS - Rotated Texts In A Div.

I am rotating text using the following (from Jonathan Snook's blog):

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);

...but my positioning does not seem to hold. I'd like the text to run along the left hand side of the window, so while this works when the text is NOT rotated:

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 73px;

...when I add the rotation code in, the text is centered in the window. I figured that swapping the width and height would be the answer, since the box is rotated 90 degrees, but it results in unrotated text moved off screen.

I'm using the latest version of Safari for my testing, figuring I'd start by getting it to work there before moving to other browsers. Any ideas?

Hi guys,

I've trawled the web for this query and have found many solutions, some work, some do not. Some are quite complex, some are fairly simple. I haven't quite found a technique I'm happy with just yet - or that I can get to work properly.

Please download the attached .zip and open the index.html in a browser.

Basically, that page will show a big main div tag container with 6 smaller divs within it, containing different sized backgound images, with text.

I would like the text to be right aligned (which it is)... but also vertically aligned in the middle (and here lies the problem).

With table cells it was easy, you aligned items right : middle. Not quite so easy with divs.... grrrrr.... they really shoulda sorted that aspect out ! Nevermind.

I've written down the Background pixel heights of the images to save people time - as I suspect the solution may lie with something to do with calculating the heights of the div tags (?)

If someone could perhaps jiggle the code and CSS a bit to help create the perfect, working vertically-aligned solution that'd be great - and then paste up either the full HTML code or full CSS code, or both please.... thanks a lot !

Cheers,
Andy

I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below?

http://efetuncel.win.aplus.net/ryt/new/

Code:

#rcontent{
	float:right;
	width:490px;
	padding:0px;
}
#rcontent .category{
	float:left;
	width:240px;
	height:120px;
	margin:30px 0px 0px 5px;
	background: url(images/bg_home_category.gif)
}
#rcontent .category img{
	float:left;
	vertical-align:middle;
}


        <div id="rcontent">
            <div class="category">
            	<img src="images/home_categories_gb.gif" alt="" />
            </div>
            <div class="category">
            </div>            
            <div class="category">
            </div>
            <div class="category">
            </div>   
	    </div>

I'm not able to make the div spacing be 8px in height? I can do that for Seamonkey but not IE...

Code:

<div style="margin:0px;padding:0px;height:8px;"></div>

So, what is the workaround to it??