Am I a bad person?

[Stuart Hemming]

Possibly.

When I started work on my current project, there were some nasty bits of code. One of them was a banner used on the page. It was decided to replace it with something more in keeping with style of the RadControls and something that was, ideally, skinnable.

I decided to have a bit of a go at cheating. I liked the layout of the title bar of the RadWindow and it fitted our requirements very nicely. So, I recreated the RadWindow title bar from the rendered HTML and came up with my PageBanner control. Clipboard1.gif shows what it looks like (using the Hay skin).

The code looks like this ...

<asp:Panel ID="Panel1"
           runat="server" CssClass="RadWindow">
  <asp:Table ID="Table1"
             runat="server"
             Width="100%"
             CellPadding="0"
             CellSpacing="0">
    <asp:TableRow runat="server"
                  CssClass="rwTitleRow">
      <asp:TableCell runat="server"
                     ID="Cell1"
                     CssClass="rwTitlebar"
                     Width="10px">

      </asp:TableCell>
      <asp:TableCell runat="server"
                     ID="Cell2"
                     CssClass="rwTitlebar">
        <asp:Panel ID="Panel2"
                   runat="server"
                   CssClass="rwTopResize">
        </asp:Panel>
        <asp:Table ID="Table2"
                   runat="server"
                   CssClass="rwTitlebarControls"
                   CellPadding="0"
                   CellSpacing="0"
                   HorizontalAlign="Left">
          <asp:TableRow runat="server"
                        ID="InnerRow1">
            <asp:TableCell runat="server"
                           ID="InnerCell1"
                           Width="16px"
                           Style="vertical-align: top !important;">
              <asp:HyperLink ID="HyperLink1"
                             runat="server"
                             CssClass="rwIcon"></asp:HyperLink>
            </asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Bottom">
              <asp:Label ID="UEAPLBannerTitleText"
                         runat="server"></asp:Label>
            </asp:TableCell>
            <asp:TableCell runat="server"
                           ID="SkinPickerContainer"
                           Style="width: 40px;">

            </asp:TableCell>
            <asp:TableCell Style="width: 100px;">

                <telerik:RadSkinManager ID="RadSkinManager1" runat="server"
                                        OnPreRender="RadSkinManager1_PreRender">
                </telerik:RadSkinManager>

            </asp:TableCell>
            <asp:TableCell runat="server"
                           ID="InnerCell3">
              <ul class="rwControlButtons"></ul>
            </asp:TableCell>
          </asp:TableRow>
        </asp:Table>
      </asp:TableCell>
      <asp:TableCell runat="server"
                     ID="TableCell1"
                     CssClass="rwTitlebar"
                     Width="10px">

      </asp:TableCell>
    </asp:TableRow>
  </asp:Table>
</asp:Panel>

public partial class PageBannerBanner : System.Web.UI.UserControl
{
    /// <summary>
    ///
    /// </summary>
    /// <remarks></remarks>
    string iconUrl;
    /// <summary>
    ///
    /// </summary>
    /// <remarks></remarks>
    string message;
    /// <summary>
    ///
    /// </summary>
    /// <remarks></remarks>
    string skin;
    /// <summary>
    ///
    /// </summary>
    /// <remarks></remarks>
    string title;
    /// <summary>
    ///
    /// </summary>
    /// <remarks></remarks>
    Unit width;

    /// <summary>
    /// Gets or sets the icon URL.
    /// </summary>
    /// <value>The icon URL.</value>
    /// <remarks></remarks>
    public string IconUrl
    {
        get
        {
            return iconUrl;
        }
        set
        {
            iconUrl = value;
            HyperLink1.Style.Add(HtmlTextWriterStyle.BackgroundImage, Page.ResolveClientUrl(value));
            HyperLink1.Style.Add("background-position", "0px 0px");
        }
    }

    /// <summary>
    /// Gets or sets the message.
    /// </summary>
    /// <value>The message.</value>
    /// <remarks></remarks>
    public string Message
    {
        get
        {
            return message;
        }
        set
        {
            message = value;
        }
    }

    /// <summary>
    /// Gets or sets the skin.
    /// </summary>
    /// <value>The skin.</value>
    /// <remarks></remarks>
    public string Skin
    {
        get
        {
            return skin;
        }
        set
        {
            skin = value;
            Panel1.CssClass = String.Format("RadWindow RadWindow_{0} rwNormalWindow rwTransparentWindow", value);
        }
    }

    public RadSkinManager SkinManager
    {
        get
        {
            return RadSkinManager1;
        }
    }

    /// <summary>
    /// Gets or sets the title.
    /// </summary>
    /// <value>The title.</value>
    /// <remarks></remarks>
    public string Title
    {
        get
        {
            return title;
        }
        set
        {
            title = value;
        }
    }

    /// <summary>
    /// Gets or sets the width.
    /// </summary>
    /// <value>The width.</value>
    /// <remarks></remarks>
    public Unit Width
    {
        get
        {
            return width;
        }
        set
        {
            width = value;
            Panel1.Width = value;
        }
    }

    bool allowDefaultSkinOverride
    {
        get
        {
            object o = ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE];
            if (o == null)
            {
                string s = System.Configuration.ConfigurationManager.AppSettings[GlobalConstants.Controls.SkinManger.WEBCONFIGKEY];
                if (String.IsNullOrEmpty(s))
                {
                    o = false;
                }
                else
                {
                    o = s.ToLower().StartsWith("t");
                }
                ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE] = o;
            }
            return (bool)o;
        }
    }

    /// <summary>
    /// Raises the <see cref="E:Load" /> event.
    /// </summary>
    /// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>
    /// <remarks></remarks>
    protected override void OnLoad(EventArgs e)
    {
        if (!allowDefaultSkinOverride)
        {
            RadSkinManager1.Skin = GlobalFunctions.GetDefaultSkin();
        }
        SetSkinChooser(allowDefaultSkinOverride);
        base.OnLoad(e);
    }

    /// <summary>
    /// Raises the <see cref="E:PreRender" /> event.
    /// </summary>
    /// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>
    /// <remarks></remarks>
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        PageBannerTitleText.Text = String.Format("<em>{0} {1}<em>", title, message);

        LoadLocalSkinStylesheets(RadSkinManager1.Skin);
        Panel1.CssClass = String.Format("RadWindow RadWindow_{0}", RadSkinManager1.Skin);
    }

    protected void RadSkinManager1_PreRender(object sender, EventArgs e)
    {
        if (RadSkinManager1.ShowChooser)
        {
            RadComboBox skinChooser = RadSkinManager1.FindControl("SkinChooser") as RadComboBox;
            AvailableSkinCollection skins = GlobalFunctions.GetSkins();
            int i = 0;
            while (i < skinChooser.Items.Count)
            {
                if (!skins.Contains(skinChooser.Items[i].Text))
                {
                    skinChooser.Items.Remove(skinChooser.Items[i]);
                }
                i++;
            }
            foreach (AvailableSkin skin in skins.Where(s => !s.IsEmbedded))
            {
                skinChooser.Items.Add(new RadComboBoxItem(skin.Name));
            }
        }
    }

    void LoadLocalSkinStylesheets(string SkinName)
    {
        string cssFileName = String.Format("~/StyleSheets/Local/Local_{0}.css", SkinName);
        HtmlLink css = new HtmlLink();
        css.Href = Page.ResolveUrl(cssFileName);
        css.Attributes["rel"] = "stylesheet";
        css.Attributes["type"] = "text/css";
        css.Attributes["media"] = "all";
        Page.Header.Controls.Add(css);
    }

    void SetSkinChooser(bool Value)
    {
        SkinPickerContainer.Text = String.Format("<em>{0}<em>", "Style:");
        SkinPickerContainer.Visible = Value;
        RadSkinManager1.ShowChooser = Value;
        RadSkinManager1.PersistenceMode = RadSkinManager1.ShowChooser ? RadSkinManagerPersistenceMode.Cookie : RadSkinManagerPersistenceMode.Session;
    }
}

I have to say that I'm rather pleased with it in all but one regard; It looks pants in IE7 and IE8 Compatibility Mode. Clipboard2.gif shows it using the same skin in IE8 Compatibility Mode.

Clearly there is something different about how IE7 works and I've tried to figure out what exactly is going on, but to no avail. I did think that there might be an IE7 hack in the CSS but if there is, I can't find it.

Can anyone offer any suggestions?

-- 
Stuart

[Marin Bratanov]

Hi Stuart,

I tried reproducing this behavior on my end but without success. You can find my test page and several screenshots attached for comparison. You can use my page as a basis for your project if it does not reproduce the issue on your end. If you can reproduce it with my page please modify it and send it back.

Please note the changes I have made to your code in order to make it runnable:

1. I commented out the code specific to your scenario
2. I changed the path to the stylesheet to match the default stylesheets
3. I added the Skins folder from the Telerik installation to the project so that I can use the unmodified css files and sprites
4. I included the base style sheet, too (I added it to the main page, but that is not the point here)
5. I modified the classes of the left and right cell so that they match the RadWindow's and get the sprites for the rounded corners
6. I added an icon image

Greetings,
Marin
the Telerik team

[Stuart Hemming]

Thanks Martin,

After a lot of digging I found that the problem was bring caused by a combination of skins and what I was doing, but I've sorted it now.

-- 
Stuart