CSS Vertical text

Question

Possible Duplicate:
css vertical centering

I'm trying to get text centered in a vertical tab on the side of the screen. So far I have the following CSS and HTML:

CSS

body
{
    font-family: Arial;
}
.panel
{
    position:absolute;
    top: 0px;
    bottom: 0px;
    left: -300px;
    width: 299px;
    border-right: 1px solid black;
}

.tab
{
    position: absolute;
    top: 10px;
    width: 16px;
    right: -16px;
    height: 75px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cursor: default;
}

.tab div 
{
    position: relative;
    display: block;
    left: 1px;
    width: 75px;
    height: 15px;
    font-size: 14px;
    font-weight:normal;
    line-height: 15px;
    text-align: center;
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

HTML

<div class="panel">
    <div id="pnlStack" class="tab"><div>Name</div></div>
</div>

Everything look great in IE8 but in all other browsers I've tried (FF, Opera, Chrome) the text is not centered in the tab. how can I fix this so it works correctly?

You cannot compare IE's non-standard transform to the modern browsers proper use of the standard transform. Obviously the modern browsers are doing the same thing and handling the code as it was written. — Rob, Dec 03 '11 at 01:44
@Rob -I wan't comparing anything :) IE's transform is useless 90% of the time. In this instance it works as needed to produce an effect. — Justin808, Dec 03 '11 at 01:48
@casperOne - This is NOT an exact duplicate. the other question asked how to do it, I asked how to fix and issue with it. THe other answer was to use tables, this answer fixed the problem with CSS. Sheesh, helps to read before you close. Also removing the comment that was here linking to that question and saying it wasn't a duplicate was dumb. — Justin808, Dec 04 '11 at 21:45

ScottS · Accepted Answer · 2011-12-03T01:50:19.287

2

You need to make sure the left bottom of the word div is lined up with the top left of the panel. See http://jsfiddle.net/8gU8z/4/ I added a top: -15px equal to height of your div.

To target IE and "reverse" this, use conditional commented css like http://jsfiddle.net/8gU8z/9/, though probably in your IE style sheet (if you have one).

edited Dec 03 '11 at 01:50

answered Dec 03 '11 at 01:24

ScottS

71,703
13
126
146

What browser does that work in? In FF8, I get the same visual rendering. – Jared Farrish Dec 03 '11 at 01:25
FF8 Win 7 is what I am using. It centered it fine for me. – ScottS Dec 03 '11 at 01:29
I see what happened: You didn't [save the fiddle](http://jsfiddle.net/8gU8z/3/). Yes, that does appear to work in FF8. – Jared Farrish Dec 03 '11 at 01:32
And it works in Chrome Latest. However, now it doesn't work in IE7/8/9 (it aligns to the "normal" top). – Jared Farrish Dec 03 '11 at 01:33
Your linked jsfiddle is wrong.. I think you are looking at http://jsfiddle.net/8gU8z/3/ with the top: -15px; this reverses the results. It works everywhere but IE. – Justin808 Dec 03 '11 at 01:34
At least IE can be handled by targeting it to eliminate the `top` property. – ScottS Dec 03 '11 at 01:36
Yeah, that is weird that it did not save. I had put a comment in even. I "saved" again and corrected my link. – ScottS Dec 03 '11 at 01:39
2

You mean something like this: http://jsfiddle.net/8gU8z/7/ (@Justin808) – Jared Farrish Dec 03 '11 at 01:41
@Scott do you know a way to target all IEs? (8&9 included)? *top: 0px; is just 6&7 – Justin808 Dec 03 '11 at 01:41
@Justin808 - See my last comment fiddle. – Jared Farrish Dec 03 '11 at 01:42
@Jared-That's exactly what I would have recommended. – ScottS Dec 03 '11 at 01:44
You might want to edit it into the answer, so it's complete. `:)` – Jared Farrish Dec 03 '11 at 01:45
Wish there were a way to do this all in one CSS file, but baring that this works great. Thanks – Justin808 Dec 03 '11 at 01:54
Sometimes, I'll use various methods to set a class on the body element if it is a version of IE to target IE and keep my IE css in one file with the rest, and use (in your case) something like `.IE .tab div` to target for IE. This is okay if you just have a few adjustments, but if you do too many, it wastes band width on non-IE browsers. – ScottS Dec 03 '11 at 01:59

score -1 · Answer 2 · answered Dec 03 '11 at 01:15

Its hard to understand whether you are talking about rotation or
L
i
k
e
This ??

Anyhow.. since you got IE to work and if talking about rotation you can add this
to your css to make it rotate 90 deg

p.sometext {
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
}

Also.. here are some great resources about this subject:

Hope this helps :)

Did you even look at the CSS? Heck PeterO. even added a jsfiddle link to see it in action. — Justin808, Dec 03 '11 at 01:18

CSS Vertical text

2 Answers2