jQuery ui Tabs Vertical but with text rotation

[bravo14]

Hi

 

I am using the jquery ui tabs, but with the tabs down the right and the text rotated 270 degrees.  The problem I then have is the tabs all sit on top of one another but I can't figure out which css property to amend.

 

Below is the initialisation of the tabs and the vertical tabs css

 

 

<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-right" );
});
</script>
 <style>
.ui-tabs-vertical { width: auto; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: right; width: auto; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; /* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: left; width: 40em;}
</style>

 

The URL it is on is http://79.170.44.132/emmagrayphotography.co.uk/wedding.html

 

Any help would be fantastic.

[nogray]

Instead of rotating every single element, rotate the parent UL (and make sure to set the correct width).