Firefox and Safari CSS problem...

[NEX]

I am using a modified version of your Default skin stylesheet.  After upgrading to the latest version of your controls for AJAX my stylesheet no longer works in Firefox or Safari.  Still works perfectly in IE 7.  Any ideas?

[Atanas Korchev]

Hello Alfred Pena,

We need some additional information in order to provide a solution. Could you send us the modified version of your skin? You can either paste it here or open a support ticket.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[NEX]

/*

RadTreeView Default skin

* For notes on the CSS class names, please check RadTreeView common skin file *

*/

/* general styles */

.LargeOrange

{

font: 14px/20px tahoma,verdana,sans-serif;

color: #ff6600;

padding-left: 3px;

padding-bottom: 10px;

text-decoration: none;

margin-bottom: 10px;

}

.Gray

{

color: #d3d3d3;

}

.Mail

{

color: #4682b4;

}

.InfoType

{

color: #66ff66;

}

.InfoGroup

{

color: #ffde71;

}

.Command

{

font: 14px/20px tahoma,verdana,sans-serif;

color: #4682b4;

padding-left: 3px;

padding-bottom: 10px;

text-decoration: none;

margin-bottom: 10px;

}

.SubCommand

{

font: 14px/20px tahoma,verdana,sans-serif;

color: #4682b4;

padding-left: 3px;

padding-bottom: 10px;

text-decoration: none;

margin-bottom: 10px;

}

.RadTreeView_Default

,

.RadTreeView_Default

a.rtIn

{

font: 14px/20px tahoma,verdana,sans-serif;

color: #f8f8ff;

line-height:15px;

}

.RadTreeView_Default

.rtTop,

.RadTreeView_Default

.rtMid,

.RadTreeView_Default

.rtBot

{

padding: 0 0 0 20px;

}

.RadTreeView_Default

.rtPlus,

.RadTreeView_Default

.rtMinus

{

margin:4px 6px 0 -18px;

width:11px;

height:11px;

}

.RadTreeView_Default

.rtPlus

{

background: transparent url(RadControls/TreeView/PlusMinus.gif) no-repeat 0 0;

}

.RadTreeView_Default

.rtMinus

{

background: transparent url(RadControls/TreeView/PlusMinus.gif) no-repeat 0 -11px;

}

.RadTreeView_Default

.rtSp

{

height:17px;

}

.RadTreeView_Default

.rtChk

{

margin: 0 2px;

padding:0;

width:13px;

height:13px;

}

.RadTreeView_Default

.rtIn

{

margin-left:3px;

padding: 2px;

}

/* endof general styles */

 

/* node states */

.RadTreeView_Default

.rtHover .rtIn

{

color: #363636;

background: #e2e2e2;

border: 1px solid #e2e2e2;

padding: 1px;

}

.RadTreeView_Default

.rtSelected .rtIn

{

color:#fff;

background:#454545 url(RadControls/TreeView/ItemSelectedBg.gif) repeat-x 0 0;

border: 1px solid #040404;

padding: 1px;

}

.RadTreeView_Default_disabled

.rtIn,

.RadTreeView_Default

.rtDisabled .rtIn

{

color:#ccc;

}

.RadTreeView_Default

.rtSelected .rtLoadingBelow

{

color: #000;

}

/* endof node states */

 

/* in-line editing */

.RadTreeView_Default

.rtLI .rtEdit .rtIn

{

border:1px solid black;

padding: 1px;

height: 13px;

background: #fff;

}

.RadTreeView_Default

.rtEdit .rtIn input

{

height:13px;

border:0;

line-height:13px;

font:11px tahoma,verdana,sans-serif;

margin:0;

padding:0;

background:transparent;

}

/* endof in-line editing */

 

/* drop targets */

.rtDropAbove_Default

,

.rtDropBelow_Default

{

border: 1px dotted black;

font-size: 3px;

line-height: 3px;

height: 3px;

}

.rtDropAbove_Default

{

border-bottom: 0;

}

.rtDropBelow_Default

{

border-top: 0;

}

/* endof drop targets */

 

/* node lines */

.RadTreeView_Default

.rtLines .rtLI,

.RadTreeView_Default

.rtLines .rtFirst .rtUL

{

background:url(RadControls/TreeView/NodeSpan.gif) repeat-y 0 0;

}

.RadTreeView_Default_rtl

.rtLines .rtLI,

.RadTreeView_Default_rtl

.rtLines .rtFirst .rtUL

{

background:url(RadControls/TreeView/NodeSpan_rtl.gif) repeat-y 100% 0;

}

.RadTreeView_Default

.rtLines .rtFirst

{

background:url(RadControls/TreeView/FirstNodeSpan.gif) no-repeat 0 15px;

}

.RadTreeView_Default_rtl

.rtLines .rtFirst

{

background:url(RadControls/TreeView/FirstNodeSpan_rtl.gif) no-repeat 100% 15px;

}

.RadTreeView_Default

.rtLines .rtFirst .rtUL

{

background:url(RadControls/TreeView/FirstNodeSpan.gif) repeat-y 0 15px;

}

.RadTreeView_Default_rtl

.rtLines .rtFirst .rtUL

{

background:url(RadControls/TreeView/FirstNodeSpan_rtl.gif) repeat-y 100% 15px;

}

.RadTreeView_Default

.rtLines .rtLast,

.RadTreeView_Default

.rtLines .rtLast .rtUL

{

background:none;

}

.RadTreeView_Default

.rtLines .rtTop

{

background:url(RadControls/TreeView/TopLine.gif) 0 0 no-repeat;

}

.RadTreeView_Default_rtl

.rtLines .rtTop

{

background:url(RadControls/TreeView/TopLine_rtl.gif) 100% 0 no-repeat;

}

.RadTreeView_Default

.rtLines .rtLast .rtTop

{

background:url(RadControls/TreeView/SingleLine.gif) 0 0 no-repeat;

}

.RadTreeView_Default_rtl

.rtLines .rtLast .rtTop

{

background:url(RadControls/TreeView/SingleLine_rtl.gif) 100% 0 no-repeat;

}

.RadTreeView_Default

.rtLines .rtMid

{

background:url(RadControls/TreeView/MiddleLine.gif) 0 0 no-repeat;

}

.RadTreeView_Default_rtl

.rtLines .rtMid

{

background:url(RadControls/TreeView/MiddleLine_rtl.gif) 100% 0 no-repeat;

}

.RadTreeView_Default

.rtLines .rtBot

{

background:url(RadControls/TreeView/BottomLine.gif) 0 0 no-repeat;

}

.RadTreeView_Default_rtl

.rtLines .rtBot

{

background:url(RadControls/TreeView/BottomLine_rtl.gif) 100% 0 no-repeat;

}

/* endof node lines */

 

/* rtl-specific styles */

/* firefox */

.RadTreeView_Default_rtl

.rtPlus,

.RadTreeView_Default_rtl

.rtMinus

{

margin-right:-11px;

right:-13px;

}

*

html .RadTreeView_Default_rtl .rtPlus,

*

html .RadTreeView_Default_rtl .rtMinus

{

margin-right:-18px;

right:0;

}

*+html

.RadTreeView_Default_rtl .rtPlus,

*+html

.RadTreeView_Default_rtl .rtMinus

{

margin-right:-18px;

right:0;

}

.RadTreeView_Default_rtl

.rtTop,

.RadTreeView_Default_rtl

.rtMid,

.RadTreeView_Default_rtl

.rtBot

{

padding: 0 20px 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_Default_rtl .rtPlus,

html:first-child .RadTreeView_Default_rtl .rtMinus,

html:first-child .RadTreeView_Default_rtl .rtFirst .rtLI .rtPlus,

html:first-child .RadTreeView_Default_rtl .rtFirst .rtLI .rtMinus

{

margin:4px 6px 0 -18px;

right:0;

}

/* fix for safari bug (inline-block positioned elements in rtl mode get no width) */

:root .RadTreeView_Default_rtl .rtPlus,

:root .RadTreeView_Default_rtl .rtMinus

{

right: 0;

margin-right: -18px;

margin-left: 7px;

}

}

/* endof hacks */

[Yana]

Hello Alfred,

Thank you for the provided information.

I tested RadTreeView with your styles and wasn't able to see the problem. Please check the attached screenshot. Could you send us a more detailed explanation about the issue? 

Kind regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[NEX]

Sorry, didn't explain myself clearly. The problem is that the color of the text in the nodes is ignored in firefox. I set some nodes having an orange color while others have a white color. This shows up fine in IE. However, in firefox, the text color remains white for all nodes.

[Yana]

Hello Alfred,

Thank you for getting back to me.

I suggest you use '!important' rule in the css styles for different nodes to overwrite the default styles. Please check the attached sample project for a reference.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[NEX]

Ok. Great! That's work...but there is still one another problem.  When I assign an image to a node (ImageURL) the image do not show up in FireFox 2.0  It shows up in IE 7 and Safari 3.1.

So this appears to be a FireFox 2.0 problem...

[Yana]

Hello Alfred,

I tested the ImageUrl property of RadTreeView in Firefox, version 2.0.0.15, and it worked as expected. Please check the attached screenshot.


Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.