Cross browser style issues with Tab text

[Jon]

Hi,

I use a RadSplitter to show some filter options for my pages,  The Filter options button when hovered shows the filter pane.  All great.  I have an issue with the button though.  On Chrome the text is more of less in the vertical middle,  on IE (someone please scrap IE) it goes to the top.  See the attached image, IE on the left, Chrome on the right.  I've looked at the CSS and found the rspPaneTabText style, having applied a "vertical-align:middle ! important;" style to it I still don't get anywhere.

Any suggestions?

Regards

Jon

Code for my splitter is below: 

<telerik:RadSplitter ID="uxRadSplitter" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0"  >
            <telerik:RadPane ID="uxRadPaneTop" runat="server" >
                Sample
            </telerik:RadPane>
            <telerik:RadPane ID="uxRadPaneBottom" runat="server" Height="25px" Scrolling="none" CssClass="SlidingPaneFilterTitle" >
                <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" Height="25px" SlideDirection="Top">
                    <telerik:RadSlidingPane ID="uxRadSlidingPaneFilter" Title="Filter Options" runat="server" Height="175px"
                    EnableDock="false" EnableResize="false" IconUrl="/Images/Icons/16/search.png">

                                <telerik:RadToolBar ID="uxRadToolBar" runat="server" OnClientButtonClicking="clientButtonClicking" style="margin-top:5px;">
                                    <items>
                                        <telerik:RadToolBarButton Value="Filter" Text="Apply" ImageUrl="/Images/Icons/16/search.png" CausesValidation="False" />
                                    </items>
                                </telerik:RadToolBar>
                    </telerik:RadSlidingPane>
                 </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>

[Vessy]

Hi Jon,

You could workaround the described behavior by setting the line-height style to all elements with class="rspPaneTabText". The height should be equal to the height of the SlidingZone:

.rspPaneTabText
{
    line-height: 25px !important;
}

I hope this helps.

Kind regards,
Veselina Raykova
the Telerik team

[Jon]

Ah. Many thanks Veselina!

Works perfectly now.

Best Regards

Jon