Fieldset background colour

[Jon]

Hi,

I've got an issue with the fieldset's that are rendered.  On IE7 I end up with a white background and on IE6 it's a light blue background (using the web20 skin).  Is there a way to force the css to render properly on one or the other browser so that they can be consistant?

Regards,

Jon

[Martin]

Hi Jon,

Actually, this is not an issue with RadFormDecorator, but rather a browser behavior.

In brief - on some of the skins (including Web 2.0) we are using a .png semi-transparent image that as is in your case is not visible on a white background under IE7. The reason you see it in IE6 is that IE6 does not support png alpha channel (of course, there is a fix - the alpha image loader CSS filter, but unfortunately it is not applicable in that particular case) and you simply see the solid blue color background.

Now, in order to help, I need you to tell me which case do you prefer - the one with blue background, and the transparent fieldsets. Once I know this, I will give you a solutuion.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Hi Martin,

 

Yes that PNG issue on IE6 is a real pain.  I can't believe that MS never patched that.

 

Let's go with the blue option as I can then colour it white if necessary.  Also it then fits in better with the other sections of my site.

 

Regards,

 

Jon

[Martin]

Hi Jon,

Please, find attached the new image for fieldset background. I changed it to .gif instead of .png, and referred as an external file. Now you can edit it with PhotoShop and give it a different color.

Below is the CSS you need to override the skin settings:

<style type="text/css">
.rfdFieldset
{
    background-image: url('FieldsetBgr.gif') !important;
}
</style>

If you edit the image in PhotoShop, do not forget to set the color information of the file to RGB, as the original gif file is of Indexed Color. Otherwise the color you apply will not be the correct one. This could be done from the menu bar Image > Mode > RGB Color. Then you may select the color you need, and use the paint bucket tool to set the new color to the image. Once you are over and done choosing a color, you need to set the file as Indexed Color again (Image > Mode > Indexed Color) and save it.

Best wishes,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Superb, thanks very much Martin.

I must admit that I'm kicking myself over the simplicity of the fix.  I think that I mucked up when I was trying to change the CSS of the fieldset rather than the named style...

Thanks again,

Regards,

Jon

[Jon]

Hi Martin,

This issue came up again on the Q2 release.  It looks as though the style changed so the fix that worked before now fails.  I've got it working but using fieldset explicitly as below:
 

fieldset
{
    background-image: url('FieldsetBgr.gif') !important;
}

Can you forsee any issues solving the problem this way?

Regards,

Jon

[Martin]

Hello Jon,

When we developed the improvements of FormDecorator, one of our main goals was to make full use of the word "cascading" in CSS. In other words - in order to reduce the generated markup on the client and respectively the CSS code, we are now using CSS inheritance, rather than class names (where it is possible, of course). This is why the fix I gave you a couple of months ago has stopped working after the upgrade. The solution you've found is the correct one, and it shouldn't have negative impact at all.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jon]

Thanks for that Martin,  all makes sense.  At least I can now remove one of the entries in the CSS. 

Regards,

Jon