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

IE 6 Tree View Disappears

5 Answers 49 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Garry
Top achievements
Rank 1
Garry asked on 15 Sep 2008, 08:11 PM
Hello Support Guys,
I am working on a 3 column CSS site layout and I am using a Treeview as the main navigation. Everything works great in IE 7, Firefox, Opera, and Safari, but for some reason in IE 6 my tree view is not there.

Any ideas what might be going on. I can post my CSS files if you think it will help. Thought I would check and see if I hit a well known gotcha first, although I couldn't find anything on the forums about this is I doubt that is the case.

Thanks in advance!

5 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 16 Sep 2008, 06:57 AM
Hello Garry,

We will definitely need the css styles you use to find the reason for this issue. Please post the code of your page and your styles here. Thanks

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Garry
Top achievements
Rank 1
answered on 16 Sep 2008, 12:25 PM

You can now access the site by going to http://www.kcdc.org. As you will notice that the tree view is visible on IE 7, Oprea, Safari, and Firefox, but not IE 6.

Tree View CSS

/*
RadTreeView base css
* Notes on some CSS class names *
class  --  HTML element  --  description 
rtUL  --  <ul>  --  multiple nodes container
rtLI  --  <li>  --  one node 
rtFirst  --  <li>  -- TreeView's first node
rtLast  --  <li>  -- last node in a given node group (<ul>)
rtTop,rtMid,rtBot  --  <div>  -- a wrapper (<div>) inside a node (<li>) - can be in a top, middle or bottom node in a given node group
rtIn  --  <span> or <div>  -- the inner container inside a node - contains text (<span> rendering) or template (<div> rendering)
rtSp  --  <span>  -- holds a dummy element for adjustment of node heights (should be an even number if the skin node lines are dotted)
rtChk  --  <input>  -- holds a node's checkbox
rtImg  --  <img>  -- holds a node's icon
rtPlus,rtMinus -- <span> -- holds a node's expand / collapse buttons (plus / minus signs)
*/ 
 
/* general styles */ 
 
.RadTreeView_Custom,  
.RadTreeView_Custom .rtEdit .rtIn input   
{  
    font:11px "Segoe UI",tahoma,verdana,sans-serif;  
    color:#000;  
    line-height:1.273em;  
}  
 
.RadTreeView_Custom .rtTop,   
.RadTreeView_Custom .rtMid,   
.RadTreeView_Custom .rtBot  
{  
    padding: 0 0 0 15px;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtUL .rtLI .rtUL   
{  
    padding-left15px;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtPlus,   
.RadTreeView_Custom .rtMinus  
{  
    color:#000;  
    margin:5px 1px 0 -10px;  
    width:9px;  
    height:9px;  
}  
 
.RadTreeView_Custom .rtPlus  
{  
    color:#000;  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat 0 0;  
}  
 
.RadTreeView_Custom .rtMinus  
{  
    color:#000;  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat 0 -9px;  
}  
 
.RadTreeView_Custom .rtSp  
{  
    color:#000;  
    height:20px;  
}  
 
.RadTreeView_Custom .rtChk  
{  
    color:#000;  
    margin: 0 2px;  
    padding:0;  
    width:12px;  
    height:12px;  
}  
 
.RadTreeView_Custom .rtIn  
{  
    color:#000;  
    margin-left:3px;  
    padding2px 3px;  
    text-decoration:none;  
}  
 
/* endof general styles */ 
 
/*Three state checkboxes*/ 
 
.RadTreeView_Custom .rtIndeterminate  
{  
    color:#000;  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 -26px;  
}  
 
.RadTreeView_Custom .rtChecked  
{  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 0;  
    color:#000;   
}  
 
.RadTreeView_Custom .rtUnchecked  
{  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 -13px ;  
    color:#000;   
}  
/* node states */ 
 
.RadTreeView_Custom .rtHover .rtIn  
{  
    padding1px 2px;  
    color#000;  
    border1px solid #99defd;  
    background#f6fbfd url(TreeView/ItemHoveredBg.gif) repeat-x left bottombottom;  
}  
 
.RadTreeView_Custom .rtSelected .rtIn  
{  
    padding1px 2px;  
    color:#000;  
    border1px solid #99defd;  
    background#f6fbfd url(TreeView/ItemSelectedBg.gif) repeat-x left bottombottom;  
}  
 
.RadTreeView_Custom_disabled .rtIn,  
.RadTreeView_Custom .rtDisabled .rtIn  
{  
    color:#000;  
}  
 
.RadTreeView_Custom .rtSelected .rtLoadingBelow  
{  
    color#000;  
}  
 
/* endof node states */ 
 
 
/* in-line editing */ 
 
.RadTreeView_Custom .rtLI .rtEdit .rtIn  
{  
    border1px solid #99defd;  
    padding: 0 2px;  
    height:1.2em;  
    background#fff;  
    text-decorationnone;  
    text-decoration:none;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtEdit .rtIn input  
{  
    height:1em;  
    line-height:1em;  
    border:0;  
    margin:0;  
    padding:0;  
    background:transparent;  
}  
 
/* endof in-line editing */ 
 
 
/* drop targets */ 
 
.rtDropAbove_Custom,  
.rtDropBelow_Custom  
{  
    border1px dotted black;  
    font-size3px;  
    line-height3px;  
    height3px;  
}  
 
.rtDropAbove_Custom  
{  
    border-bottom: 0;  
}  
 
.rtDropBelow_Custom  
{  
    border-top: 0;  
}  
 
/* endof drop targets */ 
 
 
/* rtl-specific styles */ 
 
.RadTreeView_Custom_rtl .rtPlus  
{  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat -9px 0;  
}  
 
.RadTreeView_Custom_rtl .rtMinus  
{  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat -9px -9px;  
}  
 
/* firefox */ 
.RadTreeView_Custom_rtl .rtPlus,  
.RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-9px;  
    rightright:-8px;  
}  
 
* html .RadTreeView_Custom_rtl .rtPlus,  
* html .RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-10px;  
    rightright:0;  
}  
 
*+html .RadTreeView_Custom_rtl .rtPlus,  
*+html .RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-10px;  
    rightright:0;  
}  
 
.RadTreeView_Custom_rtl .rtTop,  
.RadTreeView_Custom_rtl .rtMid,   
.RadTreeView_Custom_rtl .rtBot  
{  
    padding: 0 15px 2px 0;  
    margin:0;  
}  
 
/* endof rtl-specific styles */ 
 
 
/* hacks for Opera & Safari */ 
@media screen and (min-width:550px)  
{  
    /* fixes for opera (changes the paddings/margins automatically in rtl mode) */ 
 
    html:first-child .RadTreeView_Custom_rtl .rtPlus,  
    html:first-child .RadTreeView_Custom_rtl .rtMinus,  
    html:first-child .RadTreeView_Custom_rtl .rtFirst .rtLI .rtPlus,  
    html:first-child .RadTreeView_Custom_rtl .rtFirst .rtLI .rtMinus  
    {  
        margin:5px 1px 0 -10px;  
        rightright:0;  
    }  
      
    /* fix for safari bug (inline-block positioned elements in rtl mode get no width) */ 
    :root .RadTreeView_Custom_rtl .rtPlus,  
    :root .RadTreeView_Custom_rtl .rtMinus  
    {  
        rightright: 0;  
        margin-right: -10px;  
        margin-left1px;  
    }  
}  
 
/* endof hacks */ 
 

3 Column Layout CSS
body  
{  
    color#000;  
    background#fff;  
    margin: 0;  
    padding: 0;  
    font-familyTahoma,Verdana ,Arial,Serif;  
    font-size:small;  
}  
.hide 
{  
    text-indent: -9999px;  
}  
img  
{  
    displayblock;  
    border: 0;  
}  
h3  
{  
    font-size17pt;  
    font-weightnormal;  
    margin20px 0 20px 0;  
    background-color:transparent;  
    color:navy;  
    text-transformuppercase;  
}  
html p  
{  
    margin: 0 0 1em 0;  
    text-alignleft;  
    line-height: 1.5;  
}  
html ul  
{  
    line-height: 1.5;  
      
}  
/*generic clear float class*/ 
.clearfloat  
{  
    clearboth;  
}  
/*Logo Button Container*/ 
#logo 
{  
    float:left;  
    background-colorwhite;  
    width180px;  
    margin:0;  
    padding:0;  
}  
/*---------------------------------Page Divisions----------------------------------*/ 
#header 
{  
    background-color#2E5892;  
    background-imageurl(../images/header/headerBG.jpg);  
    background-positionrightright;  
    background-repeatno-repeat;  
    min-width:955px;  
    width:100%;  
    height:90px;  
}  
/*---3 Column Layout---*/ 
#container3  
{  
    padding-left180px/* LC fullwidth */ 
    padding-right211px/*RC fullwidth */   
    overflowhidden;  
}  
#container3 .leftsidebar  
{  
    width180px/* LC width */ 
    padding: 0; /* LC padding */ 
    rightright210px/* LC fullwidth + CC padding */ 
    margin-left: -100%;  
    positionrelative;  
    floatleft;  
    margin-top:10px;  
}  
#container3 .maincontent  
{  
    padding15px/* CC padding */ 
    width: 100%;  
    positionrelative;  
    floatleft;  
    border-left:solid 1px #999999;  
    margin:10px 0;  
}  
#container3 .rightsidebar  
{  
    width180px/* RC width */ 
    padding: 0; /* RC padding */ 
    margin-right: -100%;  
    positionrelative;  
    floatleft;  
    margin-top:10px;  
}  
/*---2 Column Layout---*/ 
#container2  
{  
    padding-left200px/* LC fullwidth */ 
    padding-right40px;  
    overflowhidden;  
}  
#container2 .leftsidebar  
{  
    width180px/* LC width */ 
    padding: 0 10px/* LC padding */ 
    rightright240px/* LC fullwidth + CC padding */ 
    margin-left: -100%;  
    positionrelative;  
    floatleft;  
}  
#container2 .maincontent  
{  
    padding10px 20px/* CC padding */ 
    width: 100%;  
    positionrelative;  
    floatleft;  
}  
#footer 
{  
    margin:50px 0;  
    clearboth;  
    text-align:center;  
}  
/*---------------------------------------Nav Menus-----------------------------------------------*/ 
/**/ 
#topmenu  
{  
    color: White;  
    background-color:Transparent;  
    font-weightbold;   
    margin: 0;  
    padding:0;   
    position:absolute;  
    left:210px;  
    top:70px;  
    width:755px;  
}  
#topmenu a  
{  
    color: White;  
    background-color:transparent;  
    font-weightbold;  
    width:755px;      
}  
#intranetmenu  
{  
    background-colortransparent;  
    margin: 0 0 10px 0;  
    padding:0;     
    position:absolute;  
    left:210px;  
    z-index:1000;  
}  
#adminMenu  
{  
    /*left:50%;
    top:0;
    padding: 0;
    margin-left:-200px;
    position:absolute;*/ 
    background-colortransparent;  
    margin25px 0 10px 0;  
    padding:0;     
    position:absolute;  
    left:210px;  
    z-index:100;  
 
}  
#leftmenu  
{  
    padding: 0;  
    margin:0;  
}  
/*---------------------------------------Search Box-----------------------------------------------*/ 
/**/ 
#searchbox  
{  
    background-colortransparent;  
    margin: 0 0 10px 0;  
    padding:0;     
    position:absolute;  
    rightright:50px;  
    top:0;  
    z-index:100;  
}  
 
0
Garry
Top achievements
Rank 1
answered on 16 Sep 2008, 12:26 PM

You can now access the site by going to http://www.kcdc.org. As you will notice that the tree view is visible on IE 7, Oprea, Safari, and Firefox, but not IE 6.

Tree View CSS

/*
RadTreeView base css
* Notes on some CSS class names *
class  --  HTML element  --  description 
rtUL  --  <ul>  --  multiple nodes container
rtLI  --  <li>  --  one node 
rtFirst  --  <li>  -- TreeView's first node
rtLast  --  <li>  -- last node in a given node group (<ul>)
rtTop,rtMid,rtBot  --  <div>  -- a wrapper (<div>) inside a node (<li>) - can be in a top, middle or bottom node in a given node group
rtIn  --  <span> or <div>  -- the inner container inside a node - contains text (<span> rendering) or template (<div> rendering)
rtSp  --  <span>  -- holds a dummy element for adjustment of node heights (should be an even number if the skin node lines are dotted)
rtChk  --  <input>  -- holds a node's checkbox
rtImg  --  <img>  -- holds a node's icon
rtPlus,rtMinus -- <span> -- holds a node's expand / collapse buttons (plus / minus signs)
*/ 
 
/* general styles */ 
 
.RadTreeView_Custom,  
.RadTreeView_Custom .rtEdit .rtIn input   
{  
    font:11px "Segoe UI",tahoma,verdana,sans-serif;  
    color:#000;  
    line-height:1.273em;  
}  
 
.RadTreeView_Custom .rtTop,   
.RadTreeView_Custom .rtMid,   
.RadTreeView_Custom .rtBot  
{  
    padding: 0 0 0 15px;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtUL .rtLI .rtUL   
{  
    padding-left15px;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtPlus,   
.RadTreeView_Custom .rtMinus  
{  
    color:#000;  
    margin:5px 1px 0 -10px;  
    width:9px;  
    height:9px;  
}  
 
.RadTreeView_Custom .rtPlus  
{  
    color:#000;  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat 0 0;  
}  
 
.RadTreeView_Custom .rtMinus  
{  
    color:#000;  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat 0 -9px;  
}  
 
.RadTreeView_Custom .rtSp  
{  
    color:#000;  
    height:20px;  
}  
 
.RadTreeView_Custom .rtChk  
{  
    color:#000;  
    margin: 0 2px;  
    padding:0;  
    width:12px;  
    height:12px;  
}  
 
.RadTreeView_Custom .rtIn  
{  
    color:#000;  
    margin-left:3px;  
    padding2px 3px;  
    text-decoration:none;  
}  
 
/* endof general styles */ 
 
/*Three state checkboxes*/ 
 
.RadTreeView_Custom .rtIndeterminate  
{  
    color:#000;  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 -26px;  
}  
 
.RadTreeView_Custom .rtChecked  
{  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 0;  
    color:#000;   
}  
 
.RadTreeView_Custom .rtUnchecked  
{  
    backgroundtransparent url(TreeView/TriState.gif) no-repeat 0 -13px ;  
    color:#000;   
}  
/* node states */ 
 
.RadTreeView_Custom .rtHover .rtIn  
{  
    padding1px 2px;  
    color#000;  
    border1px solid #99defd;  
    background#f6fbfd url(TreeView/ItemHoveredBg.gif) repeat-x left bottombottom;  
}  
 
.RadTreeView_Custom .rtSelected .rtIn  
{  
    padding1px 2px;  
    color:#000;  
    border1px solid #99defd;  
    background#f6fbfd url(TreeView/ItemSelectedBg.gif) repeat-x left bottombottom;  
}  
 
.RadTreeView_Custom_disabled .rtIn,  
.RadTreeView_Custom .rtDisabled .rtIn  
{  
    color:#000;  
}  
 
.RadTreeView_Custom .rtSelected .rtLoadingBelow  
{  
    color#000;  
}  
 
/* endof node states */ 
 
 
/* in-line editing */ 
 
.RadTreeView_Custom .rtLI .rtEdit .rtIn  
{  
    border1px solid #99defd;  
    padding: 0 2px;  
    height:1.2em;  
    background#fff;  
    text-decorationnone;  
    text-decoration:none;  
    color:#000;  
}  
 
.RadTreeView_Custom .rtEdit .rtIn input  
{  
    height:1em;  
    line-height:1em;  
    border:0;  
    margin:0;  
    padding:0;  
    background:transparent;  
}  
 
/* endof in-line editing */ 
 
 
/* drop targets */ 
 
.rtDropAbove_Custom,  
.rtDropBelow_Custom  
{  
    border1px dotted black;  
    font-size3px;  
    line-height3px;  
    height3px;  
}  
 
.rtDropAbove_Custom  
{  
    border-bottom: 0;  
}  
 
.rtDropBelow_Custom  
{  
    border-top: 0;  
}  
 
/* endof drop targets */ 
 
 
/* rtl-specific styles */ 
 
.RadTreeView_Custom_rtl .rtPlus  
{  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat -9px 0;  
}  
 
.RadTreeView_Custom_rtl .rtMinus  
{  
    backgroundtransparent url(TreeView/PlusMinus.gif) no-repeat -9px -9px;  
}  
 
/* firefox */ 
.RadTreeView_Custom_rtl .rtPlus,  
.RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-9px;  
    rightright:-8px;  
}  
 
* html .RadTreeView_Custom_rtl .rtPlus,  
* html .RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-10px;  
    rightright:0;  
}  
 
*+html .RadTreeView_Custom_rtl .rtPlus,  
*+html .RadTreeView_Custom_rtl .rtMinus  
{  
    margin-right:-10px;  
    rightright:0;  
}  
 
.RadTreeView_Custom_rtl .rtTop,  
.RadTreeView_Custom_rtl .rtMid,   
.RadTreeView_Custom_rtl .rtBot  
{  
    padding: 0 15px 2px 0;  
    margin:0;  
}  
 
/* endof rtl-specific styles */ 
 
 
/* hacks for Opera & Safari */ 
@media screen and (min-width:550px)  
{  
    /* fixes for opera (changes the paddings/margins automatically in rtl mode) */ 
 
    html:first-child .RadTreeView_Custom_rtl .rtPlus,  
    html:first-child .RadTreeView_Custom_rtl .rtMinus,  
    html:first-child .RadTreeView_Custom_rtl .rtFirst .rtLI .rtPlus,  
    html:first-child .RadTreeView_Custom_rtl .rtFirst .rtLI .rtMinus  
    {  
        margin:5px 1px 0 -10px;  
        rightright:0;  
    }  
      
    /* fix for safari bug (inline-block positioned elements in rtl mode get no width) */ 
    :root .RadTreeView_Custom_rtl .rtPlus,  
    :root .RadTreeView_Custom_rtl .rtMinus  
    {  
        rightright: 0;  
        margin-right: -10px;  
        margin-left1px;  
    }  
}  
 
/* endof hacks */ 
 

3 Column Layout CSS
body  
{  
    color#000;  
    background#fff;  
    margin: 0;  
    padding: 0;  
    font-familyTahoma,Verdana ,Arial,Serif;  
    font-size:small;  
}  
.hide 
{  
    text-indent: -9999px;  
}  
img  
{  
    displayblock;  
    border: 0;  
}  
h3  
{  
    font-size17pt;  
    font-weightnormal;  
    margin20px 0 20px 0;  
    background-color:transparent;  
    color:navy;  
    text-transformuppercase;  
}  
html p  
{  
    margin: 0 0 1em 0;  
    text-alignleft;  
    line-height: 1.5;  
}  
html ul  
{  
    line-height: 1.5;  
      
}  
/*generic clear float class*/ 
.clearfloat  
{  
    clearboth;  
}  
/*Logo Button Container*/ 
#logo 
{  
    float:left;  
    background-colorwhite;  
    width180px;  
    margin:0;  
    padding:0;  
}  
/*---------------------------------Page Divisions----------------------------------*/ 
#header 
{  
    background-color#2E5892;  
    background-imageurl(../images/header/headerBG.jpg);  
    background-positionrightright;  
    background-repeatno-repeat;  
    min-width:955px;  
    width:100%;  
    height:90px;  
}  
/*---3 Column Layout---*/ 
#container3  
{  
    padding-left180px/* LC fullwidth */ 
    padding-right211px/*RC fullwidth */   
    overflowhidden;  
}  
#container3 .leftsidebar  
{  
    width180px/* LC width */ 
    padding: 0; /* LC padding */ 
    rightright210px/* LC fullwidth + CC padding */ 
    margin-left: -100%;  
    positionrelative;  
    floatleft;  
    margin-top:10px;  
}  
#container3 .maincontent  
{  
    padding15px/* CC padding */ 
    width: 100%;  
    positionrelative;  
    floatleft;  
    border-left:solid 1px #999999;  
    margin:10px 0;  
}  
#container3 .rightsidebar  
{  
    width180px/* RC width */ 
    padding: 0; /* RC padding */ 
    margin-right: -100%;  
    positionrelative;  
    floatleft;  
    margin-top:10px;  
}  
/*---2 Column Layout---*/ 
#container2  
{  
    padding-left200px/* LC fullwidth */ 
    padding-right40px;  
    overflowhidden;  
}  
#container2 .leftsidebar  
{  
    width180px/* LC width */ 
    padding: 0 10px/* LC padding */ 
    rightright240px/* LC fullwidth + CC padding */ 
    margin-left: -100%;  
    positionrelative;  
    floatleft;  
}  
#container2 .maincontent  
{  
    padding10px 20px/* CC padding */ 
    width: 100%;  
    positionrelative;  
    floatleft;  
}  
#footer 
{  
    margin:50px 0;  
    clearboth;  
    text-align:center;  
}  
/*---------------------------------------Nav Menus-----------------------------------------------*/ 
/**/ 
#topmenu  
{  
    color: White;  
    background-color:Transparent;  
    font-weightbold;   
    margin: 0;  
    padding:0;   
    position:absolute;  
    left:210px;  
    top:70px;  
    width:755px;  
}  
#topmenu a  
{  
    color: White;  
    background-color:transparent;  
    font-weightbold;  
    width:755px;      
}  
#intranetmenu  
{  
    background-colortransparent;  
    margin: 0 0 10px 0;  
    padding:0;     
    position:absolute;  
    left:210px;  
    z-index:1000;  
}  
#adminMenu  
{  
    /*left:50%;
    top:0;
    padding: 0;
    margin-left:-200px;
    position:absolute;*/ 
    background-colortransparent;  
    margin25px 0 10px 0;  
    padding:0;     
    position:absolute;  
    left:210px;  
    z-index:100;  
 
}  
#leftmenu  
{  
    padding: 0;  
    margin:0;  
}  
/*---------------------------------------Search Box-----------------------------------------------*/ 
/**/ 
#searchbox  
{  
    background-colortransparent;  
    margin: 0 0 10px 0;  
    padding:0;     
    position:absolute;  
    rightright:50px;  
    top:0;  
    z-index:100;  
}  
 
0
Garry
Top achievements
Rank 1
answered on 16 Sep 2008, 12:42 PM

My apologies Yana,

Right after I posted my CSS it occured to me that I needed to add this in order to make my leftsidebar class viewable on IE 6.

/*** IE6 Fix For The Left Column ***/ 
* html .leftsidebar  
{  
    left175px/* RC fullwidth */ 

Many thanks anyhow!
0
Yana
Telerik team
answered on 16 Sep 2008, 02:33 PM
Hi Garry,

I am glad you found a solution of the problem.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TreeView
Asked by
Garry
Top achievements
Rank 1
Answers by
Yana
Telerik team
Garry
Top achievements
Rank 1
Share this question
or