This is a migrated thread and some comments may be shown as answers.

Tabstrip incorrect Firefox rendering when using custom images

2 Answers 101 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ariel Molina
Top achievements
Rank 1
Ariel Molina asked on 27 Jul 2008, 05:08 PM
All,

Im using a TabStrip/Multipage combination whose rendering is way off in Firefox.  I am not using any skins, instead just setting the image properties of each tab.  See below:
 <table width="951" align="center" cellpadding="0" cellspacing="0" border="0" > 
            <tr> 
                <td width="100%" style="padding-left:8px; padding-bottom:5px; FONT-SIZE: 18px; COLOR: #0580e9; FONT-FAMILY:ARIAL; font-weight:bold" colspan="2">  
                    <asp:Label ID="lblTitle" runat="server"></asp:Label> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    <radTS:RadTabStrip id="RadTabStrip1" runat="server" Skin="DifferentTabs" Width="691px" 
                        OnTabClick="RadTabStrip1_TabClick" MultiPageID="RadMultiPage1" AutoPostBack="True" 
                        CausesValidation="False" > 
                        <tabs> 
                            <radTS:Tab runat="server" Width="50px" Text="" SelectedImageUrl="Images/Quick Pricing/departure_info_rollover.gif" PageViewID="PageView1" Value="DepartureInfo" ID="Tab1" ImageOverUrl="~/Images/Quick Pricing/departure_info_1.gif" ImageUrl="Images/Quick Pricing/departure_info.gif"></radTS:Tab> 
                            <radTS:Tab runat="server" Width="50px" Text="" SelectedImageUrl="Images/Quick Pricing/stateroom_rollover.gif" PageViewID="PageView2" Value="Stateroom" ID="Tab2" ImageOverUrl="~/Images/Quick Pricing/stateroom_1.gif" ImageUrl="Images/Quick Pricing/stateroom.gif">  
                        <Tabs> 
                            <radTS:Tab BackColor="#E7F0FB" runat="server" Width="100px"  Text="" SelectedImageUrl="Images/Quick Pricing/category_selected.gif" Value="Category" ID="Tab3" ImageUrl="Images/Quick Pricing/category.gif" PageViewID="PageView2"></radTS:Tab> 
                            <radTS:Tab runat="server" BackColor="#E7F0FB" Width="586px"  Text="" SelectedImageUrl="Images/Quick Pricing/location_selected.gif" Value="Location" ID="Tab4" ImageUrl="Images/Quick Pricing/location.gif" PageViewID="PageView3"></radTS:Tab> 
                        </Tabs> 
                     </radTS:Tab> 
                     <radTS:Tab runat="server" Width="50px" Text="" SelectedImageUrl="Images/Quick Pricing/guest_info_rollover.gif" Value="GuestInfo" ID="Tab5" ImageOverUrl="~/Images/Quick Pricing/guest_info_1.gif" ImageUrl="Images/Quick Pricing/guest_info.gif">  
                        <Tabs> 
                            <radTS:Tab runat="server" BackColor="#E7F0FB" Width="50px" Text="" Height="34" SelectedImageUrl="Images/Quick Pricing/primaryguest_selected.gif" Value="PrimaryGuest" ID="Tab6" ImageUrl="Images/Quick Pricing/primaryguest.gif" PageViewID="PageView4"></radTS:Tab> 
                            <radTS:Tab runat="server" BackColor="#E7F0FB" Width="550px" Height="34" Text="" SelectedImageUrl="Images/Quick Pricing/additionalguests_selected.gif" Value="AdditionalGuest" ID="Tab7" ImageUrl="Images/Quick Pricing/additionalguests.gif" PageViewID="PageView5"></radTS:Tab> 
                        </Tabs> 
                    </radTS:Tab> 
                    <radTS:Tab runat="server" Width="50px" Text="" SelectedImageUrl="Images/Quick Pricing/payment_rollover.gif" Value="Payment" ID="Tab8" ImageOverUrl="~/Images/Quick Pricing/payment_1.gif" ImageUrl="Images/Quick Pricing/payment.gif" PageViewID="PageView6"></radTS:Tab> 
                    </tabs> 
                    </radTS:RadTabStrip> 
                    <table cellspacing="0" cellpadding="0" border="0">  
                        <tbody> 
                            <tr> 
                                <td width="750">  
                                    <radTS:RadMultiPage id="RadMultiPage1" runat="server" EnableViewState="true" RenderSelectedPageOnly="true">  
                                        <radTS:PageView ID="PageView1" runat="server" Width="700" > 
                                            <uc1:DepartureInfo ID="DepartureInfo1" runat="server" />                                          
                                        </radTS:PageView> 
                                        <radTS:PageView ID="PageView2" runat="server" Width="700">  
                                         <uc1:Category ID="Category" runat="server" />   
                                        </radTS:PageView> 
                                        <radTS:PageView ID="PageView3" runat="server" Width="700">  
                                         <uc1:Location ID="Location" runat="server" />   
                                        </radTS:PageView> 
                                          <radTS:PageView ID="PageView4" runat="server" Width="700">  
                                         <uc1:PrimaryGuest ID="PrimaryGuest" runat="server" />   
                                        </radTS:PageView> 
                                           <radTS:PageView ID="PageView5" runat="server" Width="700">  
                                         <uc1:AdditionalGuest ID="AddGuest1" runat="server" />   
                                        </radTS:PageView> 
                                            <radTS:PageView ID="PageView6" runat="server" Width="700">  
                                              <uc3:BookPayment id="BookPayment1" runat="server"></uc3:BookPayment> 
                                        </radTS:PageView> 
                                         
                                     
                                    </radTS:RadMultiPage> 
                                    
                                </td> 
                            </tr> 
                        </tbody> 
                    </table> 
                </td> 
                <td width="227" align="left" valign="top">  
                    <CCL:BookingSummary ID="BookingSummary1" runat="server" /> 
                </td> 
            </tr> 
        </table> 


The width of the non-active tabs are shrinked only in Firefox.  Only the active tab renders correctly.

2 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 30 Jul 2008, 12:22 PM
Hi Ariel,

Unfortunately, the provided information does not help us much in reproducing the error. I'm afraid we could not be of much help unless we reproduce the issue on our side. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ariel Molina
Top achievements
Rank 1
answered on 30 Jul 2008, 01:58 PM
The issue was actually due to the fact the IE browsers do not honor the "Width" property of the Tab instance, only FireFox does.  Setting the Width to that of the custom image, resolved the issue.
Tags
TabStrip
Asked by
Ariel Molina
Top achievements
Rank 1
Answers by
Paul
Telerik team
Ariel Molina
Top achievements
Rank 1
Share this question
or