Member Avatar for jamello

Hi there folks! Please could anyone tell me how I can disable the underline of a hyperlink button server control of datagrid and similar controls ? I had used the following css code on the ItemStyle-CssClass which works for traditional hyperlinks to no avail. Thanks for the help:)

.tablecellhyperlinks
{
text-decoration: none;
DISPLAY: block;
}
ItemStyle-CssClass="tablecellhyperlinks"
  • 4 Contributors
  • 9 Replies
  • 473 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by mIssy_ricco

Dani AI

Generated

Short answer: the class you set with ItemStyle-CssClass is applied to the generated table cell (the TD), not the anchor inside it. That’s why selectors that expect the class to be on the <a> itself didn’t match. and were on the right track — the fix is to target the anchor that lives inside the cell (and cover the link pseudo‑states), or put the class directly on the link via a TemplateColumn.

Example CSS (target the anchor inside the cell class; adjust the grid class name if yours differs):

/* target anchors inside the DataGrid cell class */
.DefaultDataGridStyle td.tablecellhyperlinks a,
.DefaultDataGridStyle td.tablecellhyperlinks a:visited,
.DefaultDataGridStyle td.tablecellhyperlinks a:hover,
.DefaultDataGridStyle td.tablecellhyperlinks a:active {
  text-decoration: none;
  color: inherit;
  display: inline-block; /* optional: expands clickable area without breaking layout */
}

If you prefer to give the anchor its own class (simpler selector), switch the HyperLinkColumn to a TemplateColumn and render an asp:HyperLink with CssClass="tablecellhyperlinks". That lets you style the link directly and avoid guessing which element the grid marked up.

Quick troubleshooting checklist:

  • Inspect the generated HTML with browser dev tools to confirm where the class actually appears (TD vs A).
  • Make sure your stylesheet is loading after any theme/site CSS and that no inline style is forcing an underline.
  • Increase selector specificity or use !important only as a last resort.
  • If the rendered markup really lacks TD/TR, inspect the server control/template output and adapt the selector to the actual element you find.

This approach keeps the underline off while preserving hover/visited behavior you control explicitly.

Recommended Answers

All 9 Replies

Member Avatar for f1 fan

if it is in a table you have to have
td .tablecellhyperlinks in your css file.

Member Avatar for jamello

I tried it but it doesn't work.
:sad:

if it is in a table you have to have
td .tablecellhyperlinks in your css file.

Member Avatar for f1 fan

my mistake for not concentrating while writing the post

try

.tablecellhyperlinks td

Member Avatar for jamello

Thank you f1 fan for your replies.
The suggestion you made is not still working.

I do not know whether the structure of a datagrid control's hyperlink button rendering does qualify as and has the attribute of a valid table. It has no valid "tr" and "td" tags. :confused:

Below is an example of what I'm talking about

<asp:datagrid id="dgLocationLink" runat="server" Width="140px" OnItemDataBound="Grid_ItemClicked"
       BorderWidth="0px" CellPadding="1" AutoGenerateColumns="False" Height="168px" CssClass="DefaultDataGridStyle">
       <AlternatingItemStyle BackColor="#d7dce8"></AlternatingItemStyle>
       <HeaderStyle Font-Size="15px" Font-Bold="True"></HeaderStyle>
       <Columns>
        <asp:HyperLinkColumn ItemStyle-CssClass="tablecellhyperlinks" Target="iA" DataNavigateUrlField="dToYou"
         ItemStyle-BorderStyle="Groove" ItemStyle-BorderWidth="10" DataNavigateUrlFormatString="../alink1.aspx?idm={0}"
         DataTextField="dToYou" HeaderText="You">
         <HeaderStyle Height="40px" BackColor="#6b83c6"></HeaderStyle>
         <ItemStyle Font-Size="20px" Height="40px"></ItemStyle>
        </asp:HyperLinkColumn>
       </Columns>
      </asp:datagrid>

while this is the css

.tablecellhyperlinks1 TD
{
text-decoration: none;
DISPLAY: block;
}
Member Avatar for hollystyles 
a.tablecellhyperlinks:link 
{
    text-decoration: none;
}
Member Avatar for jamello

Thanks for the reply Hollystyles.
I believe you saw the current post. Do I change any variable or parameter in the datagrid code/schema. If no is the answer then your suggestion did not work.:sad:

a.tablecellhyperlinks:link 
{
    text-decoration: none;
}
Member Avatar for hollystyles

well this sill work for any hyperlinks anywhere on the page:

a:link
{
    text-decoration: none;
}

lets start with that and see what you get.

Member Avatar for jamello

Yes this works. Although with not so clean results but at least it works. so what next. Thanks

well this sill work for any hyperlinks anywhere on the page:

a:link
{
    text-decoration: none;
}

lets start with that and see what you get.

Member Avatar for mIssy_ricco

this is very useful for me..thanks!
i didn't use table or whatsoever..just a simple text and it works. :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.