radWindow title bar has strange transparency issue

[Amy]

I have been trying to get rid of the strange section under the titlebar without any luck.  Please see my attachment.  Someone did post a similar issue and the solution was within the css.   The following was the link I followed.

http://www.telerik.com/community/forums/aspnet-ajax/window/radwindow-with-transparent-title-bar.aspx

I didn't know exactly what was used for the gif file ( probably just a solid thick line).  I added the css lines (with the exception of the section that he was told to eliminate), but I still have that strange line there.  Could anyone offer any suggestions on how to get rid of this?  If the gif file is needed, could you tell me what the gif should look like.

Thanks,
Amy

[Marin Bratanov]

Hello Amy,

  This issue occurs when there are global CSS selectors used on the page and they affect all elements such as ul, li, tr, td, etc. This often causes the design of third party controls (like ours) to break, since they rely on clean CSS settings to function correctly. What I would advise is that you make your CSS selectors more specific, for example by applying a class to them. You can verify that this is the issue by temporarily disabling all your custom CSS in the page and then you can start adding back the rules one by one till you find all the culprits.

The issue in the other thread was in the ul li {} global selector that defined a wrong height for these elements, not in the background image that is applied to another set of elements.

I hope my reply was helpful and you will be able to locate the cause of the issue.


Regards,
Marin
the Telerik team

[golddog]

I hope this thread is still being watched.  Sorry, but I'm not getting it, and the link in Amy's post is broken to get more details.

Having the same experience as Amy, but only in a couple of places we use RadWindows--most of them are just fine.  Only in IE 6, 7, 8 as far as I know too.

Using the developer tools in IE8, I find by turning off the font-family in the following css entry, the title bar looks o.k.:

TD
{
    font-family: MS Sans Serif, Verdana;
    font-size: 10px;
}

I found by adding the following entry to our style sheet, the RadWindow in question renders the title bar o.k.:

.RadWindow .rwTitlebar
{
    font-family: MS Sans-Serif, Verdana !important;
}

But I'm not sure that's the right option.

I don't understand how changing the font-family can possibly affect this, not do I understand how other RadWindows, using the exact same .css file (prior to my tweak) look right.

I'm no stylist; can somebody explain to me what's going on here?  I'm not seeing the difference in the html that's generated between my two (working and non-working) RadWindows.

[Marin Bratanov]

Hi Golddog,

  The RadWindows do not render different HTML. Such an issue can occur if global CSS styles override the default element properties (especialyl dimensions and paddings) and thus also affect the RadWindow. For more information on the origin of this issue please examine my first post in the thread.

The fact that changing the font has changed the size of the elements enough so that things seem all right should be considered a coincidence. If you are still certain that this is the line in our CSS that is breaking the RadWindows I would advise that you send us a simple page that reproduces this behavior - one broken RadWindow and one that looks as expected so we can investigate it.

Regards,
Marin
the Telerik team

[golddog]

Marin,

I'm not sure we're communicating properly.  What I'm saying is that I noticed that overriding the default font-family for "TD" from my style sheet with a setting to the window-generated class in my style sheet fixes the problem in IE 6-8 (was always o.k. in 9 and other browsers).

I just don't understand why setting font-family to what it was anyway would affect the size at which the table cell renders.  font-size, sure; height, absolutely--but family?

Thsi was also a sporadic problem with RadWindow in our application--a couple exhibited this behavior, but most did not, and I don't see the difference between them either.  Something's just not clicking in my brain.

[Marin Bratanov]

Hi Scott,

  I am sorry for misunderstanding you. What I suspect might be happening is that different fonts actually render with a little different sizes, which may lead to the needed dimension change that fixes the issue.

What you can try is to either make the TD selector heavier so that it does not affect the RadWindow at all (for example a class for the table that should have it), or trying to use the font you wish, but with one or two pixels smaller font-size property.


Kind regards,
Marin
the Telerik team