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

Spacing between image only tabs

2 Answers 77 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 28 Jan 2009, 11:03 AM
Hi

I am using RadTabStrip with only images on the tabs no text like this.

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="" MultiPageID="RadMultiPage1" Width="470" Height="25" >

 

<Tabs>

 

<telerik:RadTab PageViewID="LatestNewsPageView"

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

<telerik:RadTab PageViewID="BenifitsPageView"

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

<telerik:RadTab PageViewID="VIPEventsPageView"

 

 

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

</Tabs>

 

</telerik:RadTabStrip>

What I want to do is have a spacing of 4 pixels between each tab, so I have the following CSS

 

.Tabs

 

 

{

 

 

    margin-right: 4px;

}

 

 

 

But this doesn't work.

What do I need to do to get the spacing between the tabs

Thanks

Nick

 

 

2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 28 Jan 2009, 11:58 AM
Hello Nick,

Try adding the !important keyword to the code as shown below:
css:
<style type="text/css"
    .Tabs 
    { 
      margin-right: 4px !Important
    } 
 </style> 
The !important keyword  is used so that the corresponding appearance setting will dominate over the style specified in the Styles.css file of the chosen skin.

Another option is to add a Seperator Tab to the tab collection of the RadTabStrip as shown below:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="" MultiPageID="RadMultiPage1" Width="470" Height="25" > 
     <Tabs> 
     <telerik:RadTab PageViewID="LatestNewsPageView" ImageUrl="image1" SelectedImageUrl="image1" HoveredImageUrl="image1" CssClass="Tabs"
     </telerik:RadTab> 
     <telerik:RadTab IsSeparator="true" Width="4px"></telerik:RadTab> 
     <telerik:RadTab PageViewID="BenifitsPageView" ImageUrl="image2" SelectedImageUrl="image2" HoveredImageUrl="image2" CssClass="Tabs"
     </telerik:RadTab> 
      <telerik:RadTab IsSeparator="true" Width="4px"></telerik:RadTab> 
     <telerik:RadTab PageViewID="VIPEventsPageView" ImageUrl="image3" SelectedImageUrl="image3" HoveredImageUrl="image3" CssClass="Tabs"
     </telerik:RadTab> 
     </Tabs> 
     </telerik:RadTabStrip> 

Thanks
Princy.
0
Nicholas
Top achievements
Rank 1
answered on 29 Jan 2009, 11:39 AM
Hi
The !important works fine
Thanks
Nick
Tags
TabStrip
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Nicholas
Top achievements
Rank 1
Share this question
or