GridHyperLink Column - Removing Image Border

[Michael Malone]

I have a GridHyperLink Column in a RadGrid with the ImageUrl property set to a .png image. When the grid displays, there is a border around the image. How can I remove this border? In normal HTML i would just set the border to 0 for the img tag. 

<telerik:GridHyperLinkColumn HeaderText="" UniqueName="CourseDetailsLink" ImageUrl="Images/ClockIcon.png" DataNavigateUrlFields="TrainingItemID" DataNavigateUrlFormatString="CourseDetails.aspx?itemID={0}" DataTextField="TrainingItemID" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="50px" AllowFiltering="false" Groupable="false"></telerik:GridHyperLinkColumn>

[Tsvetina]

Hello Michael,

You can add the following CSS rule to your page's stylesheets. It will clear all borders shown for images inside an <a> tag:

a img
{
    border: none;
}

All the best,
Tsvetina
the Telerik team

[Michael Malone]

Thanks for the tip but this sounds like a brute force method of accomplishing something simple. Are there plans to add a public property to the control to remove this border?

[Tsvetina]

Hi Michael,

This approach is a common CSS reset which is even used by the blueprint framework. It is often used to avoid this discrepancy in the IE browser (showing the blue border around image links). So, it is definitely not a brute force method, it is a straight forward solution of a browser behavior problem.

Anyway, if you want to keep this behavior outside of RadGrid, you could limit the style with the following CSS selector:

.RadGrid a img
{
    border: none;
}

Greetings,
Tsvetina
the Telerik team

[Margo Noreen]

Actually, this does seem to be a change in the Telerik assemblies.  We have been using the Telerik.Web.UI (and Skins) DLLs version 2012.1.215.40 in our asp.net 4 website.

Today, I downloaded the latest release to finally upgrade.  Now those borders are appearing whereas before they were not.  Also, it is only occuring in IE, not FireFox or Chrome.  Even so... it falls into a "breaking change" category.  Back to the original poster's question... is there any reason why this can't be fixed (since it *used* to work)?

[Galin]

Hi Margo,

Could you please give us more information in which version of RadControls the border for image element was removed?

Also, as my colleague mentioned this is a browser behavior and there are users, which are get used to it.

Regards,
Galin
the Telerik team

[Margo Noreen]

In researching this further, I would agree that it seems to be a problem with IE, not FireFox or Chrome.  We were using Telerik dlls with the version of 2012.1.215.40 and I just now upgraded to 2013.1.220.45.  However, there was one additional item we did which I think is the real culprit... we upgraded to the .NET framework 4.5

More importantly, this seems to have modified web.config to look something like:

<pages controlRenderingCompatibilityVersion="4.0"
clientIDMode="AutoID"><BR>

That didn't happen on our upgrade from .NET 3.5 to 4.0, but did happen in 4.0 to 4.5.  When I "view source" on the rendered HTML, I don't see anything that would cause a border to be drawn, but it's there, and apparently only in IE.

In our case, we were able to get away a global css reset trick like:

a img { border: none}<BR>