MetroTouch skin underline on hover

2 posts, 0 answers
  1. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 11 Oct 2012 Link to this post

    I've noticed that when you hover over the button using Chrome when you have the metro touch skin in use it underlines the text.  Is there a css fix for this?
  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 16 Oct 2012 Link to this post

    Hello,

    I have tested with the folowing code:

    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Skin="MetroTouch" Text="Button text">
        </telerik:RadButton>
        </form>
    </body>
    </html>

     Everything works as expected and there is no underline effect on hover in Chrome. Make sure that you didn`t have any global styles for all anchor tags saying a:hover {text-decoration: underline;} as it will create the effect described in your post. Here is an example code:

    <head runat="server">
        <title></title>
        <style type="text/css">
        a:hover {text-decoration: underline;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Skin="MetroTouch" Text="Button text">
        </telerik:RadButton>
        </form>
    </body>
    </html>


    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top