Vertical Text in Firefox

bfresh · Apr 5, 2007

I was able to get vertical text in IE with this:

Code:

.vertical {
	    FONT-SIZE: 90px; 
            FILTER: flipH() flipV(); 
            WRITING-MODE: tb-rl}

but it doesn't work for firefox

ALSO,

I am trying to have text display over a opaque background. It's working in IE with this:

Code:

<div align="center" >
             <div style="width:100%;
                             filter:alpha(opacity=10);
                  -moz-opacity:.10;
                          opacity:.10;
                     background: yellow>
                 <p style="position:relative; font-size: 80">
            <img src="http://www.youtube.com/img/pic_youtubelogo_123x63.gif"
                 </p>
                 <p style="position:relative; font-size: 80">blah
                 </p>
           </div>
      </div>

But Firefox won't recognize this.

Please Help

radiantm3 · Apr 5, 2007

Filter is a proprietary microsoft thing that is not supported in any other browser. It's best to stay away from them unless they are used to fix something broken in IE (aka 32bit transparent png's in IE6).

bfresh · Apr 7, 2007

Anybody else have suggestions on creating vertical text and opacity in Firefox. Any help is greatly appreciated.

ValGor · Apr 8, 2007

bfresh said:
Anybody else have suggestions on creating vertical text and opacity in Firefox. Any help is greatly appreciated.

As of opacity: -moz-opacity works just fine in FIrefox browsers. Just make sure you have yur html right.
End your style with ", make sure that all style attributes are valid, (backround should be background-color probably). Make sure you have closing > in for your img. Or better yet validate your HTML

As of flipping text vertical in Firefox: sorry you are out of luck - no filters: so your choices would be
- use simple java applet,
or
- just create an image with vertical text and use it.
or
-do something around those lines (letters will still be horizontal but text will go from top to bottom):

Code:

    <div style='width:10px;height:100px;text:align:center'>
    	T h i s<br> <br>i s<br> <br>V e r t i c a l<br> <br>T e x t
    </div>

Search

Search

Vertical Text in Firefox

bfresh

macrumors newbie

radiantm3

macrumors 65816

bfresh

macrumors newbie

ValGor

macrumors newbie

Our Staff