Vertical Text in Firefox

Discussion in 'Web Design and Development' started by bfresh, Apr 5, 2007.

  1. bfresh macrumors newbie

    Joined:
    Mar 29, 2007
    Location:
    Austin, TX
    #1
    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:confused:
     
  2. radiantm3 macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #2
    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).
     
  3. bfresh thread starter macrumors newbie

    Joined:
    Mar 29, 2007
    Location:
    Austin, TX
    #3
    Anybody else have suggestions on creating vertical text and opacity in Firefox. Any help is greatly appreciated.:eek:
     
  4. ValGor macrumors newbie

    Joined:
    Feb 20, 2005
    #4
    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>
    
     

Share This Page