[Solved] PanelBar renders correctly in IE 8, but not Firefox 7.0.1

[Dominique]

Hi All,
  I'm using the following code from the demo in a new Telerik created Solutions...

@(
 Html.Telerik().PanelBar()
        .Name("PanelBar")
        .HtmlAttributes(new { style = "width: 250px; float: left; margin-bottom: 30px;" })
        .ExpandMode(PanelBarExpandMode.Multiple)
        .SelectedIndex(0)
        .Items(items =>
           {
               items.Add()
                    .Text("V2AMX-BY5604J")
                    .ImageUrl("~/Content/images/icon_servicemaster.png")
                    .ImageHtmlAttributes(new { alt = "Master Server Icon" })
                    .Content("TreeView HERE");

            items.Add()
                .Text("Mail")
                .ImageUrl("~/Content/images/icon_servicevod.png")
                .ImageHtmlAttributes(new { alt = "Mail Icon" })
                .Items(subItem =>
                {
                    subItem.Add()
                            .Text("Personal Folders")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Personal Folders Icon" });
                    subItem.Add()
                            .Text("Deleted Items")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Deleted Items Icon" });
                    subItem.Add()
                            .Text("Inbox")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Inbox Icon" }).Enabled(false);
                    subItem.Add()
                            .Text("My Mail")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "My Mail Icon" });
                    subItem.Add()
                            .Text("Sent Items")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Sent Items Icon" });
                    subItem.Add()
                            .Text("Outbox")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Outbox Icon" });
                    subItem.Add()
                            .Text("Search Folders")
                            .ImageUrl("~/Content/images/icon_config.png")
                            .ImageHtmlAttributes(new { alt = "Search Folders Icon" });
                });

           })
)

In IE the above renders correctly, but in Firefox All the subitems under the "Mail" item are rendered as if they at staggered like so...

Personal Folders
    Deleted Items
        Inbox
            My Mail
                Sent Items
                    Outbox
                        Search Folders

instead of directly under each other. What am I missing because this code is copy and pasted directly from the Telerik demos, where it renders correctly on all browsers.

[Daniel]

Hello Dominique,

 The demo is designed to use images with size 22x19 or 16x16 pixels. If your images have different size, you need to modify the css that was placed at the end of the View (I noticed that these styles are missing from your code). You can also remove the "float:left" style from the PanelBar. It is used to align the PanelBar and the Configurator in the demo.

If you still experience problems after that, please send us a full sample project so we can check it.

All the best,
Daniel
the Telerik team