I have a problem with my link button images.
When the page first comes up, the button displays with no icon.
I move the cursor over the button, and then the icon becomes visible, and remains visible even after I've moved the cursor away.
Here's how I'm creating the buttons.
The bug becomes obvious if you use the Chrome developer tools and see what's actually being rendered.
The image URL is set as "%26#39;/CMS/Images/Edit_16.png"
Once I move the mouse over the button, the rendering changes to display the correct image URL.
This was working fine. The problem seemed to occur once I wrote my own login code:this line of code in when the user logs in:
Here is a similar post where somehow cookies interfere with the button images: http://www.telerik.com/community/forums/aspnet-ajax/button/radbutton-with-image-not-showing.aspx
When the page first comes up, the button displays with no icon.
I move the cursor over the button, and then the icon becomes visible, and remains visible even after I've moved the cursor away.
Here's how I'm creating the buttons.
<
telerik:RadButton
ID
=
"_btnEdit"
runat
=
"server"
Text
=
"Change Settings..."
EnableBrowserButtonStyle
=
"true"
ButtonType
=
"LinkButton"
Height
=
"32px"
>
<
Icon
PrimaryIconUrl
=
"~/Images/Edit_16.png"
PrimaryIconTop
=
"8"
PrimaryIconRight
=
"8"
PrimaryIconWidth
=
"32"
PrimaryIconHeight
=
"32"
/>
</
telerik:RadButton
>
The bug becomes obvious if you use the Chrome developer tools and see what's actually being rendered.
The image URL is set as "%26#39;/CMS/Images/Edit_16.png"
<
span
id
=
"ctl00_Main__btnEdit"
class
=
"RadButton RadButton_Windows7 rbLinkButton"
style
=
"display:inline-block;height:32px;line-height:32px;height:32px;"
><
span
class
=
"rbPrimaryIcon"
style
=
"top:8px;right:8px;width:32px;height:32px;background-image:url(%26#39;/CMS/Images/Edit_16.png');"
></
span
><
span
class
=
"rbText rbPrimary"
>Change Settings...</
span
><
input
id
=
"ctl00_Main__btnEdit_ClientState"
name
=
"ctl00_Main__btnEdit_ClientState"
type
=
"hidden"
autocomplete
=
"off"
></
span
>
Once I move the mouse over the button, the rendering changes to display the correct image URL.
<
span
id
=
"ctl00_Main__btnEdit"
class
=
"RadButton RadButton_Windows7 rbLinkButton"
style
=
"display:inline-block;height:32px;line-height:32px;height:32px;"
><
span
class
=
"rbPrimaryIcon"
style
=
"top: 8px; right: 8px; width: 32px; height: 32px; background-image: url(http://cms.datmedia.com.au/CMS/Images/Edit_16.png);"
></
span
><
span
class
=
"rbText rbPrimary"
>Change Settings...</
span
><
input
id
=
"ctl00_Main__btnEdit_ClientState"
name
=
"ctl00_Main__btnEdit_ClientState"
type
=
"hidden"
autocomplete
=
"off"
></
span
>
This was working fine. The problem seemed to occur once I wrote my own login code:this line of code in when the user logs in:
if
(Membership.ValidateUser(model.UserName, model.Password))
{
FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
Here is a similar post where somehow cookies interfere with the button images: http://www.telerik.com/community/forums/aspnet-ajax/button/radbutton-with-image-not-showing.aspx