Fieldset Legend decoration black skin

[Jeremy Yackel]

I was noticing there are some inconsistencies between browsers.

I am using a fieldset with a legend and am noticing that when using the black skin, the legend is correctly rendered in green when using IE, but is white in firefox and chrome.

This is evident on the first look demo of the field decorator.
http://demos.telerik.com/aspnet-ajax/formdecorator/examples/default/defaultcs.aspx

Is this one of those, can't fix items or is there some css magic I can use to get the other browsers to render the legend in the same color.

As well, just a minor layout issue with the demo, when using chrome, the legend on the left bottom fieldset (username/password) is right aligned, but left aligned in IE/FireFox.

[Georgi Tunev]

Hello Jeremy,

Thank you for noticing this. I send this issue to our front-end team and they will fix it for the Q2 release.

Your points were updated.


All the best,
Georgi Tunev
the Telerik team

[Georgi Tunev]

Hello again Jeremy,

Just a quick follow-up as I missed something in my previous reply: By design, the color of the fieldset's legend should be white in the Black skin. If you want to have it in green, you could use the following style:

.RadForm_Black.rfdZone .rfdRoundedCorners
{
    color: #9eda29 !important;
}

.RadForm_Black.rfdFieldset table.rfdRoundedWrapper_fieldset legend, .RadForm_Black fieldset.rfdFieldset legend
{
    color: #9eda29 !important;
}

Greetings,
Georgi Tunev
the Telerik team

[Jeremy Yackel]

for some reason that css is overriding more than just the black skin.  I changed to Windows7 via the web.config file and I am getting the green.

Edit: that was happening in only IE6.  Still need to test in IE6, but not for this site I'm working on so no worries there.

I see now that the fieldset legend text should be white and not green.  IE was incorrect in this case.  

Just noticed another difference between IE and other browsers.  The rendering of the button, the hover over in IE makes the text green but in chrome the text stays white.   (Seen in the first look demo as well)

Edit:  sorry, that looks again like an IE6 only issue.   Was the button hover intended to be green or not?

In this case, I think the hover color should be green, as the hover color in the listbox or dropdownlists are green.

[Jeremy Yackel]

Can the name of this thread be changed to reflect just rendering of the black skin rather than specific to fieldset.

if not, this reply can be moved into it's own thread.

  I was looking at a few other demo pages and saw some inconsistencies with button rendering colors regarding the black skin.

http://demos.telerik.com/aspnet-ajax/input/examples/common/orderform/defaultcs.aspx

The reset button has a green text hover but the Order now button does not. (all browsers not just IE6 this time)  I see in the html that the reset is an html input (type="reset") tag.

Minor layout issue on this page in chrome, the buttons render outside the background image (they are too far down, FireFox and IE look fine).

[Bozhidar]

Hello Jeremy,

I have tested the problem with the green color in legend element in IE6 and succeed to reproduce it. Strange behavior, but it seems as a bug in IE6. To fix it, just replace the previous CSS code with the following one:

.RadForm_Black .rfdRoundedCorners
 {
  color: #9eda29 !important;
 }
.RadForm_Black legend,
.RadForm_Black fieldset.rfdFieldset legend
 {
  color: #9eda29 !important;
 }

As for the second problem with the hovered text in Black skin,  we have already fixed it a week or two ago. The fix will be included in Q2 release. In case you need a fast fix now, you could use the following:

.RadForm_Black.rfdButton a.rfdSkinnedButton:hover,
.RadForm_Black.rfdButton input[type="button"]:hover.rfdDecorated,
.RadForm_Black.rfdButton input[type="reset"]:hover,
.RadForm_Black.rfdButton input[type="submit"]:hover.rfdDecorated,
.RadForm_Black.rfdButton .rfdSkinnedButton button:hover
 {
  color: #9eda29;
 }

All the best,
Bojo
the Telerik team