Hello all I have a UL menu using JS and in IE the title "Filters" of the DIV is vertical and looks corrEct but in Chrome it is HorizontalThank you for the helpIE BROWSER
CHROME BROWSER
HTML:\[code\]<div id="filterDiv"><ul class="sideMenu" style="top: 280px;"><li style="border-bottom: none;"> <div id="filterItem" class="sideMenuDiv" ><img src="http://stackoverflow.com/questions/images/plus.gif" /> Filters</div></li></ul></div>\[/code\]CSS:\[code\]ul.sideMenu { position: fixed; top: 150px; left: 0px; margin: 0px; padding: 0px; list-style: none;}ul.sideMenu > li { height: 80px; width: 25px; background-color:#000066; cursor
ointer; border-bottom: 1px white solid;}div.sideMenuDiv { padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; background-color:#000066; color: #FFFFFF; font-weight: bold; writing-mode: tb-rl; filter: flipv fliph; font-size: 10pt; font-family: arial, sans-serif; height: 100%;}\[/code\]JS:\[code\] $(document).ready(function(){ $("#filterItem").click(function() { $("#filterPanel").fadeToggle("slow", function() { toggleImg( 'filter' ); }); $(this).toggleClass("active"); toggleImg( "filter" ); return false; }); $("#filterPanel").draggable({ snap: "#filterItem" });});function closeDraggablePanel( panelName, topPos){ $("#"+panelName+"Panel").toggle("slow", function() { toggleImg( 'filter' ); // Reposition to default $("#"+panelName+"Panel").css( "top", topPos); $("#"+panelName+"Panel").css( "left", "25"); });}function toggleImg( name ){ if( $("#" + name +"Panel" ).is(':visible') ) { $("#" + name + "Item" + " > img").attr("src", "../images/minus.gif"); } else { $("#" + name + "Item" + " > img").attr("src", "../images/plus.gif"); }}// Toggle the display of the element with the given ID.function toggle(id){ $('#' + id).slideToggle("slow");}\[/code\]
ointer; border-bottom: 1px white solid;}div.sideMenuDiv { padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; background-color:#000066; color: #FFFFFF; font-weight: bold; writing-mode: tb-rl; filter: flipv fliph; font-size: 10pt; font-family: arial, sans-serif; height: 100%;}\[/code\]JS:\[code\] $(document).ready(function(){ $("#filterItem").click(function() { $("#filterPanel").fadeToggle("slow", function() { toggleImg( 'filter' ); }); $(this).toggleClass("active"); toggleImg( "filter" ); return false; }); $("#filterPanel").draggable({ snap: "#filterItem" });});function closeDraggablePanel( panelName, topPos){ $("#"+panelName+"Panel").toggle("slow", function() { toggleImg( 'filter' ); // Reposition to default $("#"+panelName+"Panel").css( "top", topPos); $("#"+panelName+"Panel").css( "left", "25"); });}function toggleImg( name ){ if( $("#" + name +"Panel" ).is(':visible') ) { $("#" + name + "Item" + " > img").attr("src", "../images/minus.gif"); } else { $("#" + name + "Item" + " > img").attr("src", "../images/plus.gif"); }}// Toggle the display of the element with the given ID.function toggle(id){ $('#' + id).slideToggle("slow");}\[/code\]