Visual glitch with Dock in Firefox

[Mark]

Hi,

As seen in the below attachments, for some reason there's a visual glitch in my docks, but only in Firefox.  Any ideas on why it could be?  I haven't defined any custom themes or anything.

Thanks!

Mark

[Pero]

Hi Mark,

This problem might occur as a result of the following:

• A global style used in your application is getting applied to the dock control also.
• You are using the TitlebarTemplate of the RadDock, and the height exceeds the one of the dock's title. The height of the content placed in the TitlebarTemplate's should not exceed 25px.

Please send us a fully working project or a live url, so we could examine the problem locally. I am looking forward to your reply.

Best wishes,
Pero
the Telerik team

[Mark]

Thanks, I've submitted a ticket, number 328209. 

Much appreciated!

[Pero]

Hello Mark,

I responded to your questions in the respective support ticket, but I will provide the solution here, so it is available to other community members. Here it is:

The issue is caused by the following CSS code, from the styles.css stylesheet:

li
{
  margin: 0.2em 0;
  padding: 0;
}

The commands of the RadDock are <li/>s that do not have margin applied, and the global css for the <li/> elements causes part of the image sprite to be shown. To avoid this issue use the following CSS:

ul.rdCommands li
{
    margin: 0;
}

Regards,
Pero
the Telerik team

[Mark]

This did the trick beautifully.  Many thanks!