MouseOver layout issue with custom EditorTool that shows text

[David]

I have a simple editor with a custom toolbar button.  It shows an icon on the left side, and some text.  When I mouse over the button the layout is messed up.  Can't figure out why this is happening or how to stop it.

The issue is the same in Chrome, and IE 9 (with or without Compatibility Mode).

This is the editor code:

<style type="text/css">
    .reTool_text .MergeFields
    {
        background-image: url(../Images/Icons/OneOffLetters/download.png) !important;
        background-position: 0px !important;
    }
</style>


                <telerik:RadEditor ID="RadEditor" runat="server" Width="100%" OnClientCommandExecuting="OnClientCommandExecuting"
                    AutoResizeHeight="true" EditModes="Design" ContentAreaMode="Div">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorDropDown Name="InsertImage" />
                            <telerik:EditorTool Name="MergeFields" ShowText="true" Text="Insert Merge Field" />
                        </telerik:EditorToolGroup>
                    </Tools>
                </telerik:RadEditor>

Attached are a couple images showing the button before and during a mouse-over.

[Bozhidar]

Hi,

you should use add the following to your styles:

<style type="text/css">
        .reTool_text .MergeFields {
            background-image: url(../Images/Icons/OneOffLetters/download.png) !important;
            background-position: 0 0 !important;
        }

        .reTool_text:hover {
            background-image: none !important;
            border: 0 !important;
        }
    </style>

Even there is text attribute for the custom tool, the background that comes from the CSS should be removed in order to work properly.

All the best,
Bozhidar
the Telerik team