Question

I have Repeater Control and in that i have code like this

<div runat="server" id="divleft" onmouseover="this.style.background='#BADFCE';"    onmouseout="this.style.background='white';">
    <asp:LinkButton ID="lnkCategory" runat="server" Text='<%# Eval("CategoryDescription")%>'
        CommandArgument='<%# Eval("CourseLibraryCategoryID") %>' 
        OnClick="lnkCategory_Click"
        CssClass="courseLink">
    </asp:LinkButton>
    <asp:Label ID="lblCount" runat="server" Text=""></asp:Label>
</div>

Now i have to do that after Click on that LinkButton the background color of the div name ‘divleft’ has to be applied for that i code like this in .aspx.cs page……

 protected void lnkCategory_Click(object sender, EventArgs e)
 {
    LinkButton temp = (sender as LinkButton);
    temp.Attributes.Add("style", "color:green  !important;");
    (temp.NamingContainer.Controls[1] as System.Web.UI.HtmlControls.HtmlContainerControl).Attributes.Add("style", "background-color:#BADFCE !important;");
 }

Now this code is perfectly running in IE and Chrome but not working in Firefox.

Answer 1

You shouldn’t need to use !important unless there is something wrong with your core CSS. If I were you, I would move the UI to a JavaScript layer.

jQuery:

jQuery('.courseLink').click( function(event) {
    event.preventDefault();
    jQuery('#divleft').css('background-color','#BADFCE');
    jQuery(this).css('color','green');
} );

Or Better Yet, something like this:

jQuery('.courseLink').click( function(event) {
    event.preventDefault();
    jQuery('#divleft').addClass('active');
    jQuery(this).addClass('clicked');
} );

With (css):

#divleft.active {
    background-color:#BADFCE;
}
.courseLink.clicked {
    color:green;
}