Ajax PostBack background color

[Osmon]

Hi,
      I have some background issue. It may also be  connected to how i am building my master page using ajaxpanel and ajaxmanager, etc. here is a what i have in the master page.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMenu1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="masterContent" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="crumbs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                    <telerik:AjaxUpdatedControl ControlID="masterContent" />
                </UpdatedControls>
            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div>
<table width="100%"  border="5">
  <tr>
    <td class="noprint" id="masterHeader1" colspan="2">
        <img alt="All Languages Logo" src="Images/logo.gif" style="border: 1px; border-color:Silver; vertical-align:top;" />
        <span style="font-family:Arial; font-size:18px;font-weight:bolder;">Customer Web Portal</span><br />
        <span style="font-size:9px"><asp:LoginName ID="ln" FormatString="Logged in as: {0}" runat="server"/></span>
    </td>
  </tr>
  <tr>
    <td valign="top" width="175px">
            <telerik:RadMenu ID="RadMenu1" Runat="server" style="z-index:2900"
                DataSourceID="SiteMapDataSource1" EnableRoundedCorners="True" Width="175px"
                EnableShadows="True" Flow="Vertical">
            </telerik:RadMenu>
    </td>
    <td valign="top" width="95%">


        <telerik:RadAjaxPanel ID="pnlContent" runat="server" HorizontalAlign="Left" LoadingPanelID="RadAjaxLoadingPanel1">



            <table>
        <tr>
            <td id="breadcrumbs" class="noprint">

                <asp:SiteMapPath ID="crumbs" runat="server" CurrentNodeStyle-CssClass="hide" PathSeparator=" : "  >
                    <CurrentNodeStyle CssClass="hide" />
                </asp:SiteMapPath>
            </td>
        </tr>
        <tr>
            <td>
                <asp:SiteMapPath ID="title" ParentLevelsDisplayed="0" CurrentNodeStyle-Font-Size="Large" runat="server"  >
                    <CurrentNodeStyle Font-Size="Large" />
                </asp:SiteMapPath>
            </td>
        </tr>
        <tr>
            <td  id="pageContent">
                <asp:contentplaceholder id="Main" runat="server"></asp:contentplaceholder>
            </td>
        </tr>
       </table>

        </telerik:RadAjaxPanel>

       I am just using the ajaxpanel so i do not have to configure the manager self referenced calls as most of the stuff would be going on inside  the main panel. Otherwise i should have actually just use one ajaxpanel for the whole page. 

ISSUE:
             Attached are some screen shots. I have probably 2 issues:

1-On first load, the visible area of the page (without scrol bar) has the white color but the overflowed area is greyish, why ? and how can i fix it ?

2-On post back, all the empty area of the page (white before) but inside the panel (probably) changes the color to grey. why does it change. I want consistent look, either white or grey but it should stay all the time.

Please help. Thanks,

Regards,

Osman

[Dimo]

Hello Osmon,

The provided code snippet is not enough to determine the exact cause of the problem.

The 100% wide <table>s actually expand beyond 100% if they cannot enclose their content. However, <div>s do not do that, so you may end up with a <div>, which is as wide as the browser window and a <table> inside it, which is wider and overflows. Such a scenario may cause some backgrounds to look out of place.

Changes in styling after an AJAX request may be caused by changing the order of registered <link> elements (CSS files) and <style> elements (CSS styles in the page <head>). To overcome such an issue, you should use CSS styles only in external files or change the specificity of the selectors in the <style> element.

If you need further assistance, please provide a full standalone runnable web page for us to inspect locally.

Regards,
Dimo
the Telerik team