CODEWITHSUNDEEP
htmlcss
snowYetis
snowYetis

Reputation: 1627

CSS - Text Breaks Line in Vertical Tab

I have text that is rotated 90 degrees, which sits in a vertical tab that is in a fixed position. The tab is for a Contact Us link. The issue I cannot resolve is that the text breaks line. It looks like this.

Contact Us

I have tried text-align, vertical-align, display, messing with margins and padding, and width. Nothing seems to work. Has anyone else had this issue? How were you able to resolve it? Code below.

CSS

    #followTab {
        list-style: none;
        position: fixed;
        text-indent:initial;
        z-index: 1;
        right: 0;
        top: 130px;
        line-height:20px;
        width: 35px;
        padding: 80px 10px;
        border: 3px solid #fff;
        border-right: none;
        -moz-border-radius: 10px 0 0 10px;
        -webkit-border-radius: 10px 0 0 10px;
        border-radius: 10px 0 0 10px;
        -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
        -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
        box-shadow: 0 0 7px rgba(0, 0, 0, .6);
        background: rgba(239, 91, 10, .75);
        background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
        background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
        background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
        filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
    }

    .rotate {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(-90deg);
        /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        /* Should be unset in IE9+ I think. */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

HTML

<ul id="followTab">
    <li class="rotate"><a>Contact Us</a></li>
</ul>

http://jsfiddle.net/8Vkmm/

Upvotes: 0

Views: 217

Answers (3)

alademann
alademann

Reputation: 560

You need the following CSS: 

#followTab { white-space: nowrap; }

Upvotes: 0

pic0
pic0

Reputation: 491

<ul id="followTab">
    <li class="rotate"><a>Contact&nbsp;Us</a></li>
</ul>

http://jsfiddle.net/9ZJJz/

Upvotes: 1

Pat Dobson
Pat Dobson

Reputation: 3299

As Chris says, loose the width on the UL and it all works: http://jsfiddle.net/8Vkmm/1/

  /*width: 35px;*/

Upvotes: 1

Related Questions