ASP.NET HyperLink instead of LinkButton - how to avoid border around image??

Question

I have an ASP.NET web site which contains some ImageButton controls that cause postbacks used to filter a list of products to certain groups of products.

The ImageButton was created something like this:

ImageButton _myImageButton = new ImageButton();
_myImageButton.ImageUrl = PicturePath + PictureName;
_myImageButton.Attributes.Add("border", "0");
_myImageButton.OnClick += handleImageButtonClick();
Controls.Add(_myImageButton);

Now I am moving to ASP.NET 4.0 with SEO-friendly paths like /products/category/item, and I'm using routing with Webforms to map URL's to webforms. In the process, I want to replace my image buttons with hyperlink controls showing the image, so that I can associate a navigational URL with each image.

I'm creating my new image hyperlink something like this:

HyperLink _myImageLink = new HyperLink();
_myImageLink.ImageUrl = PicturePath + PictureName;
_myImageLink.NavigateUrl = "/products/category/" + itemName;
_myImageLink.Attributes.Add("border", "0");
Controls.Add(_myImageLink);

The big problem I'm facing: the ImageButton used to put a border="0" attribute on the <img> tag in HTML to avoid a border around the image. But how can I achieve the same result using the hyper link control??

With the current setup, the border="0" gets stuck onto the <a href="...."> tag - and that's not exactly what I want / need.

Any ideas?? Thoughts?? I already tried the .BorderStyle and .BorderWidth elements of the HyperLink class - doesn't seem to work for me (I still see a border around my image).

What am I missing?? How can I achieve my goal??

Answer 1

It seems as if you dont know the reason of the border.

this is just from the URL <a>

a simple css could fix that:

a {
  text-decoration: none;
}

or you could just set text-decoration: none; in your style of your imageLink

myImageLink.Attributes.Add("style", "text-decoration: none");

Answer 2

That attribute is not automatically inserted in ASP.NET 4.0 because it's deprecated; you should use CSS instead to set the img tag in question not to have a border. One possible suggestion would be to set it on img tags within a tags:

a img{
  border: none;
}

Answer 3

Instead of setting the ImageUrl property of the hyperlink, why don't you add the image as a child of the hyperlink, that way you can still set all the properties you want on it.