Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadTab change dimension on mouse over

4 Answers 109 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Alessio
Top achievements
Rank 1
Alessio asked on 20 Jan 2010, 05:44 PM
capture.JPG
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
 

4 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 22 Jan 2010, 12:59 PM
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.
0
Alessio
Top achievements
Rank 1
answered on 22 Jan 2010, 05:31 PM
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?



0
Yana
Telerik team
answered on 26 Jan 2010, 10:29 AM
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.
0
Alessio
Top achievements
Rank 1
answered on 26 Jan 2010, 10:52 AM
Funsiunna!!!
Thank you Yana, it works great!!!You're the best!
Best regards,
Alessio

Tags
TabStrip
Asked by
Alessio
Top achievements
Rank 1
Answers by
Yana
Telerik team
Alessio
Top achievements
Rank 1
Share this question
or