Telerik Forums / UI for ASP.NET AJAX Forum / TabStrip /

RadTab change dimension on mouse over

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 0 answers

Alessio

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

capture.JPG
Yana
Admin

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.
Alessio

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} &nbsp;Pagina <strong>{0}</strong> di <strong>{1}</strong>, record trovati <strong>{5}</strong>."
   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" />

<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">
   
   <tr>
   <td>
   <table width="100%" border="0" cellpadding="0" cellspacing="0" class="headertable">
   <tr>
   <td>
   
   <table width="100%" class="headertable" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td align="left">
   </td>
   
   </tr>
   <tr>
   
   </tr>
   </table>
   </td>
   </tr>
   <tr>
   <td>
   <asp:ContentPlaceHolder ID="MenuPlaceHolder" runat="server" EnableViewState="False"
   Visible="true">
   
   <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">
   
   <a id="A1" href="~/Default.aspx" runat="server">Home</a>
   </td>
   </tr>
   <tr>
   <td>
    
   </td>
   </tr>
   </table>
   </asp:ContentPlaceHolder>
   </td>
   </tr>
   </table>
   </td>
   </tr>
   
   <tr>
   <td class="bodytable">
   <table border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td id="leftColumn">
   <div class="rightmain">
   </div>
   
   <asp:ContentPlaceHolder ID="MenuDettaglio" runat="server" EnableViewState="False"
   Visible="true">
   </asp:ContentPlaceHolder>
   
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   </asp:ContentPlaceHolder>
   </td>
   <td>
    
   </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>
   
   <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?
Yana
Admin

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.
Alessio

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

RadTab change dimension on mouse over

Alessio

Yana

Alessio

Yana

Alessio