Table inside ItemTemplate, IE 7 issue

[Dmitry]

Hi,
I use Telerik's web controls 2009 Q1.
At web site I use RadPanelBar to organize layout with collapsible panels and I have met a little problem that I can't fix by myself: some indent appears in RadPanelItem when html table occurs at the end of ItemTemplate. That indent appears right after table. It occurs only in IE 7. Please see code example in IE 7 and in FireFox 3 and you will notice my problem.
Thank you,
Dmitry

 

<telerik:RadPanelBar runat="server" ID="panel" Skin="WebBlue" EnableEmbeddedSkins="true">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Panel table" Expanded="true">
            <Items>
                <telerik:RadPanelItem runat="server" Expanded="true">
                    <ItemTemplate>
                        <table cellpadding="0" cellspacing="0" border="0" style="background:red;">
                            <tr>
                                <td>
                                    text text text text text text text text text
                                    text text text text text text text text text
                                    text text text text text text text text text
                                    text text text text text text text text text
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Panel div" Expanded="true">
            <Items>
                <telerik:RadPanelItem runat="server" Expanded="true">
                    <ItemTemplate>
                        <div style="background:red;">
                            text text text text text text text text text
                            text text text text text text text text text
                            text text text text text text text text text
                            text text text text text text text text text
                        </div>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

 

 

 

[Kamen Bundev]

Hi Dmitry,

You can fix this issue in IE6/7 by adding the following two rules to your CSS:
* html div.RadPanelBar .rpGroup .rpItem  /* IE6 */
{
    float: left;
    width: 100%;
}

*+html div.RadPanelBar .rpGroup .rpItem  /* IE7 */
{
    float: left;
    width: 100%;
}

Best wishes,
Kamen Bundev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.