IE 6 Tree View Disappears

[Garry]

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!

[Yana]

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.

[Garry]

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-left: 15px;
    color:#000;
}

.RadTreeView_Custom .rtPlus,
.RadTreeView_Custom .rtMinus
{
    color:#000;
    margin:5px 1px 0 -10px;
    width:9px;
    height:9px;
}

.RadTreeView_Custom .rtPlus
{
    color:#000;
    background: transparent url(TreeView/PlusMinus.gif) no-repeat 0 0;
}

.RadTreeView_Custom .rtMinus
{
    color:#000;
    background: transparent 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;
    padding: 2px 3px;
    text-decoration:none;
}

/* endof general styles */

/*Three state checkboxes*/

.RadTreeView_Custom .rtIndeterminate
{
    color:#000;
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -26px;
}

.RadTreeView_Custom .rtChecked
{
    background: transparent url(TreeView/TriState.gif) no-repeat 0 0;
    color:#000;
}

.RadTreeView_Custom .rtUnchecked
{
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -13px ;
    color:#000;
}
/* node states */

.RadTreeView_Custom .rtHover .rtIn
{
    padding: 1px 2px;
    color: #000;
    border: 1px solid #99defd;
    background: #f6fbfd url(TreeView/ItemHoveredBg.gif) repeat-x left bottombottom;
}

.RadTreeView_Custom .rtSelected .rtIn
{
    padding: 1px 2px;
    color:#000;
    border: 1px 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
{
    border: 1px solid #99defd;
    padding: 0 2px;
    height:1.2em;
    background: #fff;
    text-decoration: none;
    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
{
    border: 1px dotted black;
    font-size: 3px;
    line-height: 3px;
    height: 3px;
}

.rtDropAbove_Custom
{
    border-bottom: 0;
}

.rtDropBelow_Custom
{
    border-top: 0;
}

/* endof drop targets */


/* rtl-specific styles */

.RadTreeView_Custom_rtl .rtPlus
{
    background: transparent url(TreeView/PlusMinus.gif) no-repeat -9px 0;
}

.RadTreeView_Custom_rtl .rtMinus
{
    background: transparent 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-left: 1px;
    }
}

/* endof hacks */

3 Column Layout CSS

body
{
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Tahoma,Verdana ,Arial,Serif;
    font-size:small;
}
.hide
{
    text-indent: -9999px;
}
img
{
    display: block;
    border: 0;
}
h3
{
    font-size: 17pt;
    font-weight: normal;
    margin: 20px 0 20px 0;
    background-color:transparent;
    color:navy;
    text-transform: uppercase;
}
html p
{
    margin: 0 0 1em 0;
    text-align: left;
    line-height: 1.5;
}
html ul
{
    line-height: 1.5;

}
/*generic clear float class*/
.clearfloat
{
    clear: both;
}
/*Logo Button Container*/
#logo
{
    float:left;
    background-color: white;
    width: 180px;
    margin:0;
    padding:0;
}
/*---------------------------------Page Divisions----------------------------------*/
#header
{
    background-color: #2E5892;
    background-image: url(../images/header/headerBG.jpg);
    background-position: rightright;
    background-repeat: no-repeat;
    min-width:955px;
    width:100%;
    height:90px;
}
/*---3 Column Layout---*/
#container3
{
    padding-left: 180px; /* LC fullwidth */
    padding-right: 211px; /*RC fullwidth */
    overflow: hidden;
}
#container3 .leftsidebar
{
    width: 180px; /* LC width */
    padding: 0; /* LC padding */
    rightright: 210px; /* LC fullwidth + CC padding */
    margin-left: -100%;
    position: relative;
    float: left;
    margin-top:10px;
}
#container3 .maincontent
{
    padding: 15px; /* CC padding */
    width: 100%;
    position: relative;
    float: left;
    border-left:solid 1px #999999;
    margin:10px 0;
}
#container3 .rightsidebar
{
    width: 180px; /* RC width */
    padding: 0; /* RC padding */
    margin-right: -100%;
    position: relative;
    float: left;
    margin-top:10px;
}
/*---2 Column Layout---*/
#container2
{
    padding-left: 200px; /* LC fullwidth */
    padding-right: 40px;
    overflow: hidden;
}
#container2 .leftsidebar
{
    width: 180px; /* LC width */
    padding: 0 10px; /* LC padding */
    rightright: 240px; /* LC fullwidth + CC padding */
    margin-left: -100%;
    position: relative;
    float: left;
}
#container2 .maincontent
{
    padding: 10px 20px; /* CC padding */
    width: 100%;
    position: relative;
    float: left;
}
#footer
{
    margin:50px 0;
    clear: both;
    text-align:center;
}
/*---------------------------------------Nav Menus-----------------------------------------------*/
/**/
#topmenu
{
    color: White;
    background-color:Transparent;
    font-weight: bold;
    margin: 0;
    padding:0;
    position:absolute;
    left:210px;
    top:70px;
    width:755px;
}
#topmenu a
{
    color: White;
    background-color:transparent;
    font-weight: bold;
    width:755px;
}
#intranetmenu
{
    background-color: transparent;
    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-color: transparent;
    margin: 25px 0 10px 0;
    padding:0;
    position:absolute;
    left:210px;
    z-index:100;

}
#leftmenu
{
    padding: 0;
    margin:0;
}
/*---------------------------------------Search Box-----------------------------------------------*/
/**/
#searchbox
{
    background-color: transparent;
    margin: 0 0 10px 0;
    padding:0;
    position:absolute;
    rightright:50px;
    top:0;
    z-index:100;
}

[Garry]

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-left: 15px;
    color:#000;
}

.RadTreeView_Custom .rtPlus,
.RadTreeView_Custom .rtMinus
{
    color:#000;
    margin:5px 1px 0 -10px;
    width:9px;
    height:9px;
}

.RadTreeView_Custom .rtPlus
{
    color:#000;
    background: transparent url(TreeView/PlusMinus.gif) no-repeat 0 0;
}

.RadTreeView_Custom .rtMinus
{
    color:#000;
    background: transparent 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;
    padding: 2px 3px;
    text-decoration:none;
}

/* endof general styles */

/*Three state checkboxes*/

.RadTreeView_Custom .rtIndeterminate
{
    color:#000;
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -26px;
}

.RadTreeView_Custom .rtChecked
{
    background: transparent url(TreeView/TriState.gif) no-repeat 0 0;
    color:#000;
}

.RadTreeView_Custom .rtUnchecked
{
    background: transparent url(TreeView/TriState.gif) no-repeat 0 -13px ;
    color:#000;
}
/* node states */

.RadTreeView_Custom .rtHover .rtIn
{
    padding: 1px 2px;
    color: #000;
    border: 1px solid #99defd;
    background: #f6fbfd url(TreeView/ItemHoveredBg.gif) repeat-x left bottombottom;
}

.RadTreeView_Custom .rtSelected .rtIn
{
    padding: 1px 2px;
    color:#000;
    border: 1px 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
{
    border: 1px solid #99defd;
    padding: 0 2px;
    height:1.2em;
    background: #fff;
    text-decoration: none;
    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
{
    border: 1px dotted black;
    font-size: 3px;
    line-height: 3px;
    height: 3px;
}

.rtDropAbove_Custom
{
    border-bottom: 0;
}

.rtDropBelow_Custom
{
    border-top: 0;
}

/* endof drop targets */


/* rtl-specific styles */

.RadTreeView_Custom_rtl .rtPlus
{
    background: transparent url(TreeView/PlusMinus.gif) no-repeat -9px 0;
}

.RadTreeView_Custom_rtl .rtMinus
{
    background: transparent 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-left: 1px;
    }
}

/* endof hacks */

3 Column Layout CSS

body
{
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Tahoma,Verdana ,Arial,Serif;
    font-size:small;
}
.hide
{
    text-indent: -9999px;
}
img
{
    display: block;
    border: 0;
}
h3
{
    font-size: 17pt;
    font-weight: normal;
    margin: 20px 0 20px 0;
    background-color:transparent;
    color:navy;
    text-transform: uppercase;
}
html p
{
    margin: 0 0 1em 0;
    text-align: left;
    line-height: 1.5;
}
html ul
{
    line-height: 1.5;

}
/*generic clear float class*/
.clearfloat
{
    clear: both;
}
/*Logo Button Container*/
#logo
{
    float:left;
    background-color: white;
    width: 180px;
    margin:0;
    padding:0;
}
/*---------------------------------Page Divisions----------------------------------*/
#header
{
    background-color: #2E5892;
    background-image: url(../images/header/headerBG.jpg);
    background-position: rightright;
    background-repeat: no-repeat;
    min-width:955px;
    width:100%;
    height:90px;
}
/*---3 Column Layout---*/
#container3
{
    padding-left: 180px; /* LC fullwidth */
    padding-right: 211px; /*RC fullwidth */
    overflow: hidden;
}
#container3 .leftsidebar
{
    width: 180px; /* LC width */
    padding: 0; /* LC padding */
    rightright: 210px; /* LC fullwidth + CC padding */
    margin-left: -100%;
    position: relative;
    float: left;
    margin-top:10px;
}
#container3 .maincontent
{
    padding: 15px; /* CC padding */
    width: 100%;
    position: relative;
    float: left;
    border-left:solid 1px #999999;
    margin:10px 0;
}
#container3 .rightsidebar
{
    width: 180px; /* RC width */
    padding: 0; /* RC padding */
    margin-right: -100%;
    position: relative;
    float: left;
    margin-top:10px;
}
/*---2 Column Layout---*/
#container2
{
    padding-left: 200px; /* LC fullwidth */
    padding-right: 40px;
    overflow: hidden;
}
#container2 .leftsidebar
{
    width: 180px; /* LC width */
    padding: 0 10px; /* LC padding */
    rightright: 240px; /* LC fullwidth + CC padding */
    margin-left: -100%;
    position: relative;
    float: left;
}
#container2 .maincontent
{
    padding: 10px 20px; /* CC padding */
    width: 100%;
    position: relative;
    float: left;
}
#footer
{
    margin:50px 0;
    clear: both;
    text-align:center;
}
/*---------------------------------------Nav Menus-----------------------------------------------*/
/**/
#topmenu
{
    color: White;
    background-color:Transparent;
    font-weight: bold;
    margin: 0;
    padding:0;
    position:absolute;
    left:210px;
    top:70px;
    width:755px;
}
#topmenu a
{
    color: White;
    background-color:transparent;
    font-weight: bold;
    width:755px;
}
#intranetmenu
{
    background-color: transparent;
    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-color: transparent;
    margin: 25px 0 10px 0;
    padding:0;
    position:absolute;
    left:210px;
    z-index:100;

}
#leftmenu
{
    padding: 0;
    margin:0;
}
/*---------------------------------------Search Box-----------------------------------------------*/
/**/
#searchbox
{
    background-color: transparent;
    margin: 0 0 10px 0;
    padding:0;
    position:absolute;
    rightright:50px;
    top:0;
    z-index:100;
}

[Garry]

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
{
    left: 175px; /* RC fullwidth */
}

Many thanks anyhow!

[Yana]

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.