Display text vertically in Firefox 3.0.x

Why I would not go for the image option right away:
1/ This vertical sub page menu is generated dynamically pulling the pages from the Wordpress database and new pages can be added easily from the dashboard  by the client without the necessity of creating extra images with vertical text as part of the image menu tab.
2/This dynamic menu works is FF 3.5, Safari, IE6 (partly), IE7 and IE8 this way. So close... Why change?

I would like:

A/ An option to make moz-transform work for FF 3.0 with an include or something else.
B/An image option for FF 3.0 only that would be nice. Like that  I can keep the menu dynamic and with vertical text for the other browsers.
C/A javascript option for Ff 3.0 to rotate the tabs
D/Or else a javascript option for rotation that works cross-browser so I can drop ms-filter, moz-transform and -webkit-transform

Well anybody?

I am fairly new to javascript but I found some javascript code to detect the Ff or Gecko version. I have attached it. This code would need adjusting so I could make the menu rotate using javascript when Ff < 3.5 is detected. Firefox 3.5 is gecko 1.9.2 I believe. But I really need more help here..

<script type="text/javascript">
<!--
var str = navigator.userAgent;
 
/***
/^rv\:¦\).*$/g
***/
 
var gecko = str.replace(/^Mozilla.*rv:¦\).*$/g, '' ) ¦¦ ( /^rv\:¦\).*$/g, '' );
 
document.writeln('gecko full version is');
document.writeln(gecko);
 
var version = gecko.substring(0,3);
document.writeln(
'gecko full version is ' +gecko +'<br /><br />'
+ 'gecko general version is ' +version+'<br /><br /><br />'
+ version + ' html code via Bern');
 
if (version == 1.6) {document.writeln('<br />1.6 html code via JAB')}
else if (version == 1.7) {document.writeln('<br />1.7 html code via JAB')}
else if (version == 1.8) {document.writeln('<br />1.8 html code via JAB')}
else if (version == 1.9) {document.writeln('<br />1.9 html code via JAB')}
else {document.writeln('<br />Unknown gecko code')};
 
//-->
</script> 

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

That script seems to only break up words in characters and stack them, but it does not seem to rotate the text 90 degrees does it?

This thread has been dead for quite a while. Must be a tough issue for no experts to pass by with new ideas...
To make a javascript or (inline) CSS sheet apply to Firefox 3.0.x only I have created a PHP script. I have attached it. Now I only need the javascript for rotating the #sidebar-links li like I do for FF 3.5, IE6,7 and 8 and Safari.

<?php
     function useragent() {
      $useragent = $_SERVER['HTTP_USER_AGENT'];
      //print $useragent;
      if(strchr($useragent,"Firefox/3.0")) return 'FIREFOX 3.0';
 }
if(useragent()=='FIREFOX 3.0') || useragent()=='FIREFOX 2') {
echo "external css or javascript for Firefox 3.0.x only"; 
} 
?>	

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

To include FF 2 and to correct a mistake here is the new php script to get a javascript to work for FF <= 3.5 . Now I only need help with the javascript...

<?php
     function useragent() {
      $useragent = $_SERVER['HTTP_USER_AGENT'];
      //print $useragent;
      if(strchr($useragent,"Firefox/2")) return 'FIREFOX 2';
      if(strchr($useragent,"Firefox/3.0")) return 'FIREFOX 3.0';
 }
if(useragent()=='FIREFOX 3.0' || useragent()=='FIREFOX 2') {
echo "inline css"; 
}
?>	

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

Will keep a copy of the current sidebar and will start working on a static menu using images as I, nor anyone here, can find a solution to rotate the list items with javascript. So the site display will change today and might be messy. I will keep this thread opened for a little longer just in case someone finds a solution

I've looked and I can't find anything that works in 3.0

OK. I give up on this then :-). Thanks for looking Jason. Will work on a static menu with images only. This destroys my dream of a dynamic option, but so be it..

Dynamically create the images.  A bit more complicated, but it could work

How would I go about that? I really need to wrap up the menu today. I am even considering hiring someone to fix this for me as I have wasted a lot of time on this and have not been able to settle the left tabbed sidebar menu satisfactorily..

Kind of a complicated question.  Short answer is you use a base template image and the GD functions to draw the characters vertically.

http://us2.php.net/manual/en/book.image.php

http://us2.php.net/manual/en/function.imagecharup.php

Yes, that is a little harder. Especially as the sidebar menu items are pulled from: wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0'); I would have to somehow integrate that code into  an adjusted version of

<?php
 
$im = imagecreate(100, 100);
 
$string = 'Note that the first letter is a N';
 
$bg = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
 
// prints a black "Z" on a white background
imagecharup($im, 3, 10, 10, $string, $black);
 
header('Content-type: image/png');
imagepng($im);
 
?>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

I don't just see how I can create the image with rounded corners. But I will open a PHP question for that if I go for the PHP GD option.