Right edge not displaying

[Brad]

IE and Mozilla; the image on the right side of the button is not showing up until I hover. Changing the background-position on the anchor with Firebug has NO effect. I have produced this with custom buttons, but now with the template buttons.

<telerik:RadButton ID="uxSaveTimesheetTop" runat="server"  Text="save timesheet">
    <Icon SecondaryIconCssClass="rbSave" SecondaryIconRight="6" SecondaryIconTop="4" />
</telerik:RadButton>

[sitefinitysteve]

Can you replicate with a button on a blank project?

Could there be other styles conflicting with it?  I'm just thinking if there is that conflicting style might not have a hover state, so the hover works fine when it happens.

[Brad]

i thought so too, but i looked long and hard in firebug but found no style that could change it.

[sitefinitysteve]

Hmmm, can you post a link to the page by any chance? :)

I mean if you dont see it on the demo site, or in a new project it's GOTTA be something local, have you perhaps (Im sure you have) jumped up the dom a node or two, maybe there's something with like an overflow:hidden or something?

[Bozhidar]

Hello Brad,

We have tried to reproduce the issue but to no avail. Could you please send us a sample project or live url where the problem exists, so we could investigate it further?

Best wishes,
Bojo
the Telerik team

[Brad]

It was a style, but not a CSS class; it was an element style. Here is the offending code.

I should be able to mark my own post as "answer".

a:active, a:visited, a:link

{

    /*background: transparent;  <---- THIS IS THE OFFENDING LINE */

    color: #1B455E;

    text-decoration: none;

}

a:hover

{

    background: transparent; /* <---- THIS LINE DIDN'T BREAK ANYTHING */

    color: #658931;

    text-decoration: underline;

}


[Bozhidar]

Hi Brad,

It is clear now. RadButton is rendered with an anchor and input inside. So the problematic line just removes the background from the anchor element and that`s why the background images was disappeared.

I would recommend not to use global styles when using third party controls such as Telerik`s. This might cause a lot of problems as this global styles would be applied to the control elements and could cause problems like that.

If you want to have some special styles on your page you could use CSS classes, and in your case, this would be something like that:

a.myClass:active,
a.myClass:visited, a:link

{

background: transparent;

color: #1B455E;

text-decoration: none;

}
a.myClass:hover

{

background: transparent;

color: #658931;

text-decoration: underline;

 }

And ti will not be in conflict with the controls.

Kind regards,
Bojo
the Telerik team