RadTab change dimension on mouse over

5 posts, 0 answers
  1. Alessio
    Alessio avatar
    14 posts
    Member since:
    May 2009

    Posted 20 Jan 2010 Link to this post

    Hi,
    I've a little problem with with rad tab. On mouse over every tab change his dimension and appears a little white line on bottom of control. 
    I think it's a css problem, but i'm unable to fix it. I've tried  to set .RadTabStrip.rtsLI, .RadTabStrip.rtsLink ect. but with no effects. 
    In attachment there's a image with my problem.
    Thanks
     
  2. Yana
    Admin
    Yana avatar
    5041 posts

    Posted 22 Jan 2010 Link to this post

    Hello Alessio,

    We cannot help you unless you provide us with a live url where we could observe this issue. Thanks in advance.

    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Alessio
    Alessio avatar
    14 posts
    Member since:
    May 2009

    Posted 22 Jan 2010 Link to this post

    Hi, i post my code, thank you for your help.

    <%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

    <asp:GridView runat="server" ForeColor="#333333" BorderStyle="None" BorderWidth="1px" CellPadding="4" GridLines="Vertical">
        <HeaderStyle BackColor="#CD071E" Font-Bold="True" ForeColor="White" Font-Names="Tahoma, Arial, verdana;" Font-Size="10pt" />
        <FooterStyle BackColor="#CD071E" ForeColor="White" Font-Bold="True" Font-Names="Tahoma, Arial, verdana;" Font-Size="10pt" />
        
        <RowStyle VerticalAlign="Middle" BackColor="White" ForeColor="Black" Font-Names="Tahoma, Arial, verdana;" />
        <PagerStyle BackColor="#CD071E" ForeColor="White" HorizontalAlign="Center" />
        
        <AlternatingRowStyle BackColor="#E2E2E2" ForeColor="Black" />
        <EditRowStyle BackColor="#999999" />
        
    </asp:GridView>

     <asp:Wizard runat="server"
        BackColor="#F6F6F6" BorderColor="#000000">
        <StepStyle BackColor="#F6F6F6" BorderColor="#000000"> </StepStyle>
        <SideBarStyle BackColor="#E3E3E3" BorderColor="#000000" >  </SideBarStyle>   
    <HeaderStyle BackColor="#E3E3E3" BorderColor="#000000" > </HeaderStyle>
    <NavigationButtonStyle BackColor="#F6F6F6"></NavigationButtonStyle>
     </asp:Wizard>

     <rsweb:ReportViewer
        runat="server"
        BackColor="#F6F6F6">
     </rsweb:ReportViewer>
     
     <telerik:RadGrid 
        runat="server"
        AutoGenerateColumns="False" 
        GridLines="None">
        <PagerStyle 
            AlwaysVisible="True" 
            FirstPageToolTip="Prima Pagina" 
            LastPageToolTip="Ultima Pagina" 
            Mode="NumericPages" 
            NextPagesToolTip="Pagine Successive" 
            NextPageToolTip="Pagina Successiva" 
            PageButtonCount="5" 
            PagerTextFormat="Cambia pagina: {4} &amp;nbsp;Pagina &lt;strong&gt;{0}&lt;/strong&gt; di &lt;strong&gt;{1}&lt;/strong&gt;, record trovati &lt;strong&gt;{5}&lt;/strong&gt;." 
            PageSizeLabelText="Dimensione della Pagina:" 
            PrevPagesToolTip="Pagine Precedenti" 
            PrevPageToolTip="Pagina Precedente" />
        <StatusBarSettings LoadingText="Caricamento Dati..." ReadyText="Pronto" />
        <MasterTableView>
            <NoRecordsTemplate>
                Nessun dato estratto
            </NoRecordsTemplate>
        </MasterTableView>
     </telerik:RadGrid>
     
     <telerik:RadComboBox
        runat="server"
        LoadingMessage="Caricamento in corso..." >
     </telerik:RadComboBox>
     

    CSS

    BODY 
    {
    margin: 0;
    padding: 0;
    font: 10pt Tahoma, Arial, verdana;
    }
    TABLE {
    margin: 0;
    padding: 0;
    border:0;
    font: 10pt Tahoma, Arial, verdana;
    }
    TABLE TD 
    {
    border:0px;
    vertical-align: top;
    font: 10pt Tahoma, Arial, verdana;
    }
    A {
    color:#AF0000;
    text-decoration: none;
    font: bold 9pt Tahoma, Arial, verdana;
    }
    A:hover {
    color: #ff0000;
    text-decoration: underline;
    font: bold 9pt Tahoma, Arial, verdana;
    }
    H1 {
    height: 21;
    text-align: left;
    color:#000000;
    font: bold 12pt Tahoma, Arial, verdana;
    }
    H2 {
    text-align: left;
    color:#000000;
    font: bold 10pt Tahoma, Arial, verdana;
    }
    H5 {
    font-weight: bold;
    margin-bottom: 1px;
    }
    UL {
    margin: 2px;
    padding: 4px;
    list-style: decimal inside;
    text-align: justify;
    color:#000000;
    }
    LI {
    margin-left: 20px;
    list-style: square inside;
    color:#000000;
    }
    .bodytable 
    {
    border:0px;
    height: 435;
    padding: 0px;
    }

    .headertable
    {
    border: 0px;
    padding: 0px;
    }
    .maintitletable
    {
    border: 0px;
    padding: 0px;
    }
    .maintitletable a
    {
    font: bold 9pt Tahoma, Arial, verdana;
    color:#FFFFFF;
    }
    .maintitletable a:hover
    {
    font: bold 9pt Tahoma, Arial, verdana;
    color:#FFFFFF;
    }
    .tableAsfaltatori
    {
    border-bottom-style: solid;
    border-color: #000000;
    border-width: thin;
    }

    .footertable 
    {
    padding: 0px;
    vertical-align: middle;
    text-align: center;
    border: 0px;
    font: 8pt Tahoma, Arial, verdana;
    }

    .footertable td
    {
    border:0px;
    height: 20px;
    padding: 0px;
    color: #000000;
    vertical-align: middle;
    text-align: center;
    }

    td#leftcolumn {
    width: 201;
    margin:0px;
    padding:0px;
    border:20px;
    }
    td#centercolumn {
    width: 740;
    margin:0px;
    padding:0px;
    background-color: #F6F6F6;
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    border-color: #A0A0A0;
    padding: 0px;
    }
    .leftmain {
    margin:0px;
    padding:0px;
    border:0px;
    }
    .rightmain {
    margin:0px;
    padding:0px;
    border:0px;
    }
    .centermain {
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    }
    .messaggio 
    {
    text-align: left;
    border-bottom: 0 solid darkgrey;
    }
    .messaggioTop {
    text-align: left;
    color: white;
    border-bottom: 4 solid darkgrey;
    font: bold 10pt Tahoma, Arial, verdana;
    }
    .menubox {
    width: 201px;
    margin:0px;
    padding:0px;
    }
    .menubox TD {
    border:0px;
    vertical-align: middle;
    }
    .menubox A {
    font-weight: bold;
    color:#AF0000;
    font: bold 10pt Tahoma, Arial, verdana;
    line-height:1.5em;
    }
    .menubox A:hover {
    font-weight: bold;
    color:#ff0000;
    font: bold 10pt Tahoma, Arial, verdana;
    line-height:1.5em;
    }
    .menuboxTop 
    {
    width: 201px;
    margin:0px;
    padding:0px;
    border:0px;
    font-weight: bold;
    line-height: 1.5em;
    vertical-align: middle;
    text-align:right;
    }
    .menuboxTop tr {
    border:0px;
    height: 37px;
    vertical-align: middle;
    }
    .menuboxTop td {
    border:0px;
    padding-right:5px;
    vertical-align: middle;
    color:#000000;
    font: bold 10pt Tahoma, Arial, verdana;
    }
    .standardTable {
    width: 97%;
    }
    .formattedTable {
    width: 97%;
    }
    .formattedTable TH {
    color: white;
    font: 12pt Tahoma, Arial, verdana;
    }
    .formattedTable TD {
    color: white;
    font: 12pt Tahoma, Arial, verdana;
    }
    .titolo 
    {
    padding-left:5px;
    }
    .titolo tr
    {
    }
    .titolo td{
    height: 35;
    color: #000000;
    text-align: left;
    vertical-align:bottom;
    font: 10pt Tahoma, Arial, verdana;
    font-weight:bold;
    background-color: #E3E3E3;
    border-color: #CD071E;
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    }
    .sottotitolo 
    {
    padding-left:5px;
    }
    .sottotitolo tr
    {
    }
    .sottotitolo td
    {
    height:10;
    text-align: left;
    color: #000000;
    font:9pt Tahoma, Arial, verdana;
    font-weight:bold;
    }
    .borderedtable 
    {
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    border-color: #000000;
    padding: 0px;
    }
    .filledtable 
    {
    background-color: #CD071E;
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    border-color: #000000;
    padding: 0px;
    }
    .nullstyletable 
    {
    border-style: solid;
    border-width: 1px;
    border-spacing: 2px;
    border-color: #000000;
    }

    .tabellaMenuPrimaVociMenu
    {
    background-image: url(images/sfondo_prima_voci_menu_alto.gif);
    }

    .campoNotifica
    {
    background-color: #EAEAEA;
    }

    .messaggiErrore li
    {
    color: Red;
    }

    .campoDisabilitato
    {
    background-color: #EAEAEA;
    }

    .tdIban
    {
    font-family:Courier New;
    }

    .campoPiccolo
    {
    font-size:8pt;
    }



    Master Page


    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <asp:contentplaceholder id="LOGPlaceHolder" runat="server" enableviewstate="False"
        visible="false" />
    <!--  SECURITY PLACEHOLDER -->
    <asp:contentplaceholder id="SECURITYPlaceHolder" runat="server" enableviewstate="False"
        visible="false" />

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Titolo</title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManagerMain" runat="server" />
    </head>
    <body id="bodyBackgroundImage" runat="server">
        <center>
            <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManagerMain" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManagerMain" runat="server" />
            <table class="bodytable" width="950" cellpadding="0" cellspacing="0" border="0">
                <!-- HEADER -->
                <tr>
                    <td>
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="headertable">
                            <tr>
                                <td>
                                    <!--height="88"-->
                                    <table width="100%" class="headertable" border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td align="left">
                                            </td>
                                            <!--<td align="right">
                                                    <img id="Img2" alt="header" src="images/banner_alto_destra.jpg" runat="server" />
                                                </td> -->
                                        </tr>
                                        <tr>
                                            <!--<td colspan="2" style="background-color: #9DC6FE; height: 4px;">
                                                </td> -->
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ContentPlaceHolder ID="MenuPlaceHolder" runat="server" EnableViewState="False"
                                        Visible="true">
                                        <!-- Gli stili per i td di questa tabella sono nel file di codice -->
                                        <table id="TableMenu" width="100%" cellspacing="0" cellpadding="0" border="0" class="maintitletable"
                                            runat="server">
                                            <tr style="height: 33px;">
                                                <td width="20%">
                                                </td>
                                                <td width="10%">
                                                </td>
                                                <td align="right">
                                                    <!-- HOME -->
                                                    <a id="A1" href="~/Default.aspx" runat="server">Home</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    &nbsp;
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:ContentPlaceHolder>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- BODY -->
                <tr>
                    <td class="bodytable">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td id="leftColumn">
                                    <div class="rightmain">
                                    </div>
                                    <!-- Menu condiviso-->
                                    <asp:ContentPlaceHolder ID="MenuDettaglio" runat="server" EnableViewState="False"
                                        Visible="true">
                                    </asp:ContentPlaceHolder>
                                    <!-- Fine Menu condiviso-->
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                    </asp:ContentPlaceHolder>
                                </td>
                                <td>
                                    &nbsp;
                                </td>
                                <td id="centercolumn">
                                    <div class="centermain">
                                        <asp:ContentPlaceHolder ID="MainPage" runat="server">
                                        </asp:ContentPlaceHolder>
                                        <asp:ContentPlaceHolder ID="MainPage2" runat="server">
                                        </asp:ContentPlaceHolder>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- footer -->
                <tr>
                    <td>
                        <div>
                            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="footertable">
                                <tr>
                                    <td class="footertable">
                                        &nbsp
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <hr />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="footertable">
                                        <strong>Footer</strong>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
            </form>
        </center>
    </body>
    </html>


    Default Page (where error appears)

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <asp:Content ID="Content3" ContentPlaceHolderID="MenuPlaceHolder" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="MenuDettaglio" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content6" ContentPlaceHolderID="MainPage" Runat="Server">
    Ciao

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="2">
            <Tabs>
                <telerik:RadTab runat="server" Text="Root RadTab1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab3" Selected="True">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <asp:GridView ID="GridView1" runat="server">
                
                </asp:GridView>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server">
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <ul>
        <li><a href="http://www.gazzetta.it">pippo</a> </li>
        <li>pluto</li>
        </ul>
        <telerik:RadComboBox ID="RadComboBox1" runat="server">
        <Items>
        <telerik:RadComboBoxItem Value="aa" Text="aa" />
        <telerik:RadComboBoxItem Value="bb" Text="bb" />
        </Items>
        </telerik:RadComboBox>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="footertable">
                                <tr>
                                    <td class="footertable">
                                        &nbsp
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <hr />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="footertable">
                                        <strong>Footer</strong>
                                        </td>
                                   
                                </tr>
                            </table>
    </asp:Content>
    <asp:Content ID="Content7" ContentPlaceHolderID="MainPage2" Runat="Server">
    </asp:Content>





    Any suggestion?



  4. Yana
    Admin
    Yana avatar
    5041 posts

    Posted 26 Jan 2010 Link to this post

    Hello Alessio,

    Thank you for providing the code.

    These global css styles set for all <a> elements overwrite some of the tabstrip styles:

    A:hover
    {
        color: #ff0000;
        text-decoration: underline;
        font: bold 9pt Tahoma, Arial, verdana;
    }

    You can fix it by adding the following css to your page:

    .RadTabStrip_Default .rtsLI,
    .RadTabStrip_Default .rtsLink {
     
        color:#000000 !important;
        font-family:"Segoe UI",Arial,sans-serif !important;
        line-height:26px !important;
        text-decoration: none !important;
        font-weight: normal !important;
    }

    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Alessio
    Alessio avatar
    14 posts
    Member since:
    May 2009

    Posted 26 Jan 2010 Link to this post

    Funsiunna!!!
    Thank you Yana, it works great!!!You're the best!
    Best regards,
    Alessio

Back to Top