1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / a:active css not working in expandable list

a:active css not working in expandable list

8 posts, 0 answered
  1. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    10 Dec 2009
    Link to this post
    Admin,

    Thanks for ur valuable reply for my other queries. i have some issue now. i m using expandable list for navigation. once they click the link . link color have to change with background. i tried many ways in css styles. but its not working. a:hover, a:visited working fine. but i need only active link have to change color. can please help me in this issue.

    Thanks & Regards,

    V
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    10 Dec 2009
    Link to this post
    Hi venkatesh alagu,

    Which of Sitefinity's or RadControls you use? There is no expandable list navigation control. Generally there are four selectors, so make sure that something from your theme or another css  does not override the selectors.

    • A:link - Defines the style for normal unvisited links.
    • A:visited -Defines the style for visited links.
    • A:active - Defines the style for active links. A link becomes active once you click on it.
    • A:hover - Defines the style for hovered links. A link is hovered when the mouse moves over it. Not supported by Netscape browsers prior to version 6.


    Sincerely yours,
    Ivan Dimitrov
    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. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    10 Dec 2009
    Link to this post
    hi,

    thanks for ur reply.

    i used expandable list inside listdisplay controls. i gave css styles like this,

    #ctl00_varnavleft_tm_ListDisplay1 a
    {
        color:#065697;
        text-decoration:none;
    }

    #ctl00_varnavleft_tm_ListDisplay1 a:hover
    {
    text-decoration:underline;
    font-size:1em;
    color:#000000;
    }

    #ctl00_varnavleft_tm_ListDisplay1 a:visited
    {
    color:#000000;
    }


    thanks,

    V
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    10 Dec 2009
    Link to this post
    Hi venkatesh alagu,

    Try using  "!important" declarations in your css. You can check the exact class that applies to the links using FireBug or IE Web Developer Tools

    Sincerely yours,
    Ivan Dimitrov
    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. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    10 Dec 2009
    Link to this post
    hi,

    still nothing changed.

    #ctl00_varnavleft_tm_ListDisplay1 a:active
    {
    color:#000000;
    }


    i need solution for "active" not "visited". visited style working fine.

    this is the code i used now :

    #ctl00_varnavleft_tm_ListDisplay1 a:active
    {
    color:#c25162 !important;
    }

    not working

    thanks.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    10 Dec 2009
    Link to this post
    Hi venkatesh alagu,

    1. The states should be in the following order a:link, a:visited, a:hover, a:active

    2. You could try to add a:focus after a:active and separate the states with comma.

    #ctl00_varnavleft_tm_ListDisplay1 a:active, a:focus


    Greetings,
    Ivan Dimitrov
    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.
  7. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    11 Dec 2009
    Link to this post
    hi,

    thanks for ur reply. i have given all things u mentioned.  but still same issue.

    #ctl00_varnavleft_tm_ListDisplay1 a
    {
        color:#065697;
        text-decoration:none;
    }

    #ctl00_varnavleft_tm_ListDisplay1 a:link
    {
        color:#c25162;
        text-decoration:none;
    }

    #ctl00_varnavleft_tm_ListDisplay1 a:hover
    {
    text-decoration:underline;
    color:#c25162;
    }

    #ctl00_varnavleft_tm_ListDisplay1 a:active, a:focus
    {
    color:#c25162 !important;
    }


    Thanks & Regards,

    Venkatesh
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    11 Dec 2009
    Link to this post
    Hello venkatesh alagu,

     Please paste the template you have ( use FormatCodeBlock ) and the css classes. I am not able to reproduce any problems. Generally this issue is not related to Sitefinity. It is related to general CSS knowledge - ordering states of a link. By default you may no see the active because right after you click on a link it becames very quickly as visited.


    All the best,
    Ivan Dimitrov
    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.
Register for webinar
8 posts, 0 answered