Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeArchived Discus...Archived Discus...Developing Under Previous Versions of .NETDeveloping Under Previous Versions of .NETASP.Net 2.0ASP.Net 2.0Tabs ajax toolkit CSS problemTabs ajax toolkit CSS problem
Previous
 
Next
New Post
3/27/2009 5:26 PM
 

 I have a tabs control on my page and the tab headers and not diplaying correctly. I am using the default stylesheet (I'm not overwritting) and the tabs appear to have a strip taken out of the bottom of each tab like a white block overlays the bottom of the text part of the tab and the left edge image. The right image is complete on each tab.

Does anyone know what could be doing this and how I can correct it? I'd like to use the defaults if possible.

This is a Link to show the problem please download it (Note : the module not work with internet explorer despite it work good under firfox and chrome)

Download :rapidshare.com/files/214295724/Tab.JPG.html

 

(note : i created a the module Tabs and I put the CSS file into the DesckTopModules/Tab folder and i was renamed it to Module.css to be detected by DNN framework as the CSS module file for the Tab Module)

Thanks

 

____________________________________________________this is a css tabs code___________________________________________________

 

/* default layout */

.ajax__tab_default .ajax__tab_header {white-space:nowrap; background-color:White}

.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block;background-color:White}

.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block;background-color:White}

.ajax__tab_default .ajax__tab_tab {height: 21px;margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block;background-color:White}

 

/* xp theme */

.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}

.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}

.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}

.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}

.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

 

/* scrolling */

.ajax__scroll_horiz {overflow-x:scroll;}

.ajax__scroll_vert {overflow-y:scroll;}

.ajax__scroll_both {overflow:scroll}

.ajax__scroll_auto {overflow:auto}

 
__________________________________________________the ascx page for the Tabs Module______________________________________
 
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Tab.ascx.vb" Inherits="DesktopModules_Tab_tab" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<cc1:TabContainer ID="TabContainer1" runat="server" Width="300">
                
            
                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Image1">
                <HeaderTemplate>
                Image1 hail
                </HeaderTemplate>
                    <ContentTemplate>
                    <%--<img src="im1.jpg" />--%>
                    tab one HTML content<br />
                    tab one HTML content<br />
                    tab one HTML content<br />
                    tab one HTML content<br />
                    </ContentTemplate>
                </cc1:TabPanel>
                
                
                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Image2">
                    <ContentTemplate>
                    <img src="im2.png" />
                    </ContentTemplate>
                </cc1:TabPanel>
                
                
                
                <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Image3">
                    <ContentTemplate>
                    <img src="im3.png" />
                    </ContentTemplate>
                </cc1:TabPanel>
            
</cc1:TabContainer>
 

 
New Post
3/27/2009 9:31 PM
 

 [Resolved]

 just we have to put a CSS code localy on the ascx controle page like this :

 

<style type="text/css">

.ajax__tab_xp .ajax__tab_tab {

height: 21px;

}

</style>

 

 I hope this help someone 

 

 
New Post
3/10/2010 10:52 AM
 
Fantastic! This helped tremendously. I've been struggling all morning with this. Thanks a million.
 
Previous
 
Next
HomeHomeArchived Discus...Archived Discus...Developing Under Previous Versions of .NETDeveloping Under Previous Versions of .NETASP.Net 2.0ASP.Net 2.0Tabs ajax toolkit CSS problemTabs ajax toolkit CSS problem


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out