Difference in font between Checked and Unchecked checkbox

[Stuart Hemming]

I have a couple of checkboxes on a page that is decorated by RadFormDecorator.

I notice that the font associated with the checkboxes changes slightly when the checked property changes. This is with 2010.2.713.

Looking at the page using IE8's developer tools shows that there are some additional CSS properties applied when the checkbox is checked.

You can see what I mean by comparing the 2 images attached.

-- 
Stuart

[Bozhidar]

Hello Stuart,

We discovered a minor problem with misspelled font-name - "Segoe UI" is misspelled to "Segoe  UI" (note the extra space). It will be fixed in the next Q2, 2010, Service Pack 1, which is expected to be released at the end of August. For now, you could fix it, by using the following CSS in the head section of your document:

.RadForm.rfdTextbox input[type="text"],

.RadForm.rfdTextbox input[type="password"],

.RadForm.rfdTextarea textarea,

.RadForm.rfdTextarea textarea[disabled]:hover,

.RadForm.rfdTextbox input[disabled][type="text"]:hover,

.RadForm.rfdTextbox input[disabled][type="password"]:hover,

.RadForm .rfdCheckboxChecked,

.RadForm .rfdInputDisabled.rfdCheckboxChecked:hover

.RadForm .rfdCheckboxUnchecked,

.RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,

.RadForm.rfdLabel label,

.RadForm .rfdRadioUnchecked,

.RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,

.RadForm .rfdRadioUnchecked:hover,

.RadForm .rfdRadioChecked,

.RadForm .rfdInputDisabled.rfdRadioChecked:hover,

.RadForm .rfdRadioChecked:hover

{

    font-size: 12px;

    font-family: "Segoe UI",Arial,Verdana,sans-serif;

}

If the above code does not fixes the problem, please send us a small project that reproduces it, so we can investigate further.

Greetings,
Bojo
the Telerik team

[Stuart Hemming]

Ah-ha!

Good catch.

Cheers.

-- 
Stuart

[Stuart Hemming]

Bojo,

I've only just got around to testing this and noticed it didn't work.

I'm using a theme and setting the control skin in the SkinFile.skin file (eh?)

The point is that in the Theme folder I have a default .css file adn put the changes you suggested in there.

I had to add "!important" to the 2 lines to get it to work.

-- 
Stuart

[Bozhidar]

Hi Stuart,

Sorry for the mistake. I would had say that it is important to use !important when you put some CSS in the head section of the document, when you want to overwrite something from the base or skin specific style sheets.

This is my mistake I didn`t mentioned to explain that, and just gave you the fix form our base stylesheet file, where it is not necessary to use the !important rule.

In simple words, the first CSS that is loaded on the page, is those form the head section of the document. Than the base stylesheet is loaded - FormDecorator.css and finally FormDecorator.Default.css. So, if you have something in the head section, that exists also in the base or the skin specific file, it will be overwritten, as in CS,S the last rule in the row is with higher priority. And to make this in the head section heavier, you should use the !important rule to overwrite something in the base or skin specific files.

And just to confirm, the correct CSS, that you should put in the head section for fixing the font problem:

.RadForm.rfdTextbox input[type="text"],

.RadForm.rfdTextbox input[type="password"],

.RadForm.rfdTextarea textarea,

.RadForm.rfdTextarea textarea[disabled]:hover,

.RadForm.rfdTextbox input[disabled][type="text"]:hover,

.RadForm.rfdTextbox input[disabled][type="password"]:hover,

.RadForm .rfdCheckboxChecked,

.RadForm .rfdInputDisabled.rfdCheckboxChecked:hover

.RadForm .rfdCheckboxUnchecked,

.RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,

.RadForm.rfdLabel label,

.RadForm .rfdRadioUnchecked,

.RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,

.RadForm .rfdRadioUnchecked:hover,

.RadForm .rfdRadioChecked,

.RadForm .rfdInputDisabled.rfdRadioChecked:hover,

.RadForm .rfdRadioChecked:hover

{
    font-size: 12px !important;
    font-family: "Segoe UI",Arial,Verdana,sans-serif !important;
}

Let me know if you install the last internal build, which will be released next week I think, if everything is OK.

Greetings,
Bojo
the Telerik team