How I get a LinkButton in Black and without Underline in my ASP.NET Control?

Question

I have a ASP.NET Application and I use a ListView. If I create a ListItem (a line) I want use a LinkButton. I want that this LinkButton have the CSS Properties..

color:Black;
text-decoration:none;

But if I start the Application. I get the linkButtons as Blue and with underline :(

here my Code:

ASPX:

...

<asp:ListView runat="server" ID="myListView">

        <LayoutTemplate>
            <table id="UserTable" runat="server" border="0">
                <tr id="Tr1" style="background-color:#E5E5FE">
                    <th runat="server"><asp:LinkButton ID="lnkBenutzer" runat="server" >id_Benutzer</asp:LinkButton></th>
                    <th runat="server"><asp:LinkButton ID="lnkemail" runat="server" >id_Email</asp:LinkButton></th>
                    <th runat="server"><asp:LinkButton ID="lnkVorname" runat="server" >id_Vorname</asp:LinkButton></th>
                    <th runat="server"><asp:LinkButton ID="lnkNachname" runat="server" >id_Nachname</asp:LinkButton></th>
                    <th runat="server"><asp:LinkButton ID="lnkTelefon" runat="server" >id_Telefon</asp:LinkButton></th>
                </tr>
                <tr runat="server" id="ItemPlaceholder">
                </tr>
            </table>
        </LayoutTemplate>

        <ItemTemplate>

            <tr> 

                <td align="left" ><asp:LinkButton ID="Label1" Text='<%# Eval("Benutzername") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label2" Text='<%# Eval("eMail") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label4" Text='<%# Eval("Nachname") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server" /></td>

             <td align="left"><asp:Button ID="Button1" Text="Anzeigen" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>'  runat="server" /></td>

              <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td>


            </tr>

        </ItemTemplate>

        <AlternatingItemTemplate>

            <tr style="background-color:#EFEFEF"> 

                <td align="left" ><asp:LinkButton ID="Label1" Text='<%# Eval("Benutzername") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label2" Text='<%# Eval("eMail") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label3" Text='<%# Eval("Vorname") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label4" Text='<%# Eval("Nachname") %>' runat="server" /></td>
                <td align="left"><asp:Label ID="Label5" Text='<%# Eval("Telefonnummer") %>' runat="server" /></td>

            <td align="left"><asp:Button ID="Button1" Text="Anzeigen" OnCommand="Button1_Command" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>'  runat="server" /></td>

                <td align="left"><asp:Label ID="Label6" Text='<%# Eval("GUID") %>' runat="server" Visible="False" /></td>

            </tr>

        </AlternatingItemTemplate>

        </asp:ListView>

...

My CSS File:

...

#Label1
{
    color:Black;
    text-decoration:none;

}  

...

What is wrong ?

tarasov

Answer 1

#Label1 means that only the control with an id="Label1" in the final HTML will get formatted by the CSS.

When you create a control within ASP.NET (whether in the page, user-control, repeater, etc) it will not be just called Label1 in the HTML, but something like ctl100_Label1.

What you need to do is create the CSS as a class and then use that class on your controls using CssClass.

.MyLabel {
  color: Black;
  text-decoration: none;
}

<asp:Label ID="Label2" Text='<%# Eval("eMail") %>' runat="server" CssClass="MyLabel" />

Another option (rather than putting the CssClass into every single asp:Label) is to either use the ID or CssClass of one of the parent controls, and use that instead. For instance...

<table id="UserTable" runat="server" border="0" class="UserTableClass">

.UserTableClass span {
  color: Black;
  text-decoration: none;
}