Modal Title Appears Above Window in FireFox

[Jon]

I have created a confirm dialog for my application. It is displayed fine in IE, but in FireFox (3.0.5) the title bar (text and close button) appear slightly above the the window frame (half in and half out). I was wondering if anyone else reported this problem and if so is there a solution. I have changed the default template slightly as follows to use our own images and adjust the styles. Would this have any affect on how the modal is rendered in FF? Is it possible to send a screen shot to you?  Thanks in advance...

<telerik:RadWindowManager Skin="WebBlue" ID="RadWindowManagerPOPUP" runat="server">
    <ConfirmTemplate>
       <div class="windowpopup">  
        <div class="dialogtext"> {1} </div>     
           <div>
             <a onclick="$find('{0}').callBack(true);"
                href="javascript:void(0);" >
                <img src="../images/Ok.gif" style="border:none;" alt="I Accept" />
             </a>
             <a onclick="$find('{0}').callBack(false);"
                href="javascript:void(0);">
                <img src="../images/Cancel.gif" style="border:none;" alt="Cancel" />
             </a>
           </div>
         </div>
     </ConfirmTemplate>
</telerik:RadWindowManager>

 

[Georgi Tunev]

Hi Jon,

I tried to reproduce the problem, but to no avail - in both Firefox and IE, the dialog looks the same (see attached screenshot). Could you please open a support ticket and send me a small sample project where this issue can be observed? I will check it and get back to you right away.


All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Georgi,

Thanks for the response!
I was able to identify the issue...
Our site is using a style sheet theme which created a conflict with the css for the radwindow.
I'm not exactly sure why the conflict occurs - perhaps you can tell me how the telerik css works.
Anyway...
The following style for the list item tag was causing the conflict:

 

li
{
margin-bottom:12px;
}

Adding the following page level style fixed the issue:
 
li

{
margin-bottom:0px;
}

 

Is there some other way to prevent conflicts like the above or should our themed style sheet simply not define certain tags which may cause problems with telerik styles?

Thanks,
Jon

 

 

 

 

 

 

 

 

[Georgi Tunev]

Hi Jon,

In general, using global CSS styles with third-party controls is not a good practice as this way your settings will interfere with the controls' own styles and produce a result like in your case. If you insist to keep your global styles, you can override RadWindow's one by using the following approach:

    li
    {
        margin-bottom:12px;
    }

    ul.controlbuttons li
    {
        margin-bottom:0px !important;
    }

Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.