I am attempting to utilize a double right-angle quote (») as an indicator for a dropdown. In my navigation, it works perfectly when I apply float: right; to it. However, outside of the navigation area, the rotation does not occur when there is no float: property assigned. I am using jQuery and CSS3 to rotate the arrow by adding a class called down to the <span> element containing the right-angle quote.
Below is the CSS class down that is added to rotate the arrows:
.drop-arrows.down {
/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
This class is applied when the dropdown is activated using jQuery. The problem arises when this does not work without a float attribute also being added to the arrow container, which is quite puzzling to me.
Here is the HTML enclosing the arrow:
<a id='filter-trigger' href='javascript:void(0);'>FILTERS <span class='drop-arrows'>»</span></a>
Is a -webkit-transform dependent on a float in order to function properly? Am I missing something here?