Inherit css property of a:link on to asp:label text attribute

Question

Ok, this might be an impossible question but I am adding a user control to an existing cms system (Kentico using their InlineControl base class) and I added a label that I have overriden the click event to show a div area below it. What I am having problems with is inheriting the already set css attribute of color, font-family; etc.. from the parent page unto the text of the label.

I tried to put a a href="" /a around the label, which does inherit the proper properties but now it takes the click and redirects as it follows the blank href. If I just wrap the label in a /a it doesn't inherit because the css class is looking for an a href tag.

Any help is much appreciated.

Answer 1

Instead of an <asp:Label > control, use an <asp:HyperLink >. This will render to html as an anchor (<a >) and therefore be styled correctly.

Additionally, depending on your audience and what you're doing this could all be done in javascript, rather than force a postback to the server to re-render the visible div.

Answer 2

OK, if I understand correctly you want the label text to render like the links on the page? Depending on the browser you're developing in it may not be able to understand things like :link or :hover. If you have the following CSS:

a, label { color: blue; } // NOT a:link as only <a> tags can have href
a:hover, label:hover { text-decoration: underline; }

..You are part way there (except in IE6). Your other problem when trying to add the <a> tag in or around the label was that the click event was applied to the <label> tag and not the <a> tag and so the link was being followed as normal. If you use a link instead or the combination of both make sure you override the click event on the link an return false to stop the link being followed.

My preference would be to place the link inside the label and then hopefully the associated form field will get focus aswell as the div being shown. You wouldn't have any IE6 styling issues then either.

Answer 3

thank you that makes senes