Hi all
This is a problem that is causing much troubles!!
Certainly not a problem with the editor thats great,
but i have a situation where we must use ems (em) defined text sizes in the css doc. So, the problem is that users will inevitably create spans within spans and hrefs with a class within another span which creates tiny text as it is reduced over and over agian.
Does anyone have any advice on this. any help would be much appreciated.
This is a problem that is causing much troubles!!
Certainly not a problem with the editor thats great,
but i have a situation where we must use ems (em) defined text sizes in the css doc. So, the problem is that users will inevitably create spans within spans and hrefs with a class within another span which creates tiny text as it is reduced over and over agian.
Does anyone have any advice on this. any help would be much appreciated.
RE: EMS type styles - accessibility
td, p, div, ul, ol, li {
font-size: 0.75em;
}
To get around the inherited cascade of each element being set to 0.75 of it's parent element, i.e., having a <p> within a <div> or <td>, etc...
You'd need to set up a rule that will cover all scenarios; something like: (note, you'll likely have to add several other rules to cover all your bases)
div div,
div td,
div p,
div ul,
div ol,
div li,
div span,
td div,
td p,
td ul,
td ol,
td li,
td span,
ul li,
ol li,
li span,
p span {
font-size: 100%;
}
The font-size: 100% will reset your inheritence to the base font size.
Make sure this rule is the *last* rule in your style sheet.
HTH's
RE: EMS type styles - accessibility
This is a response to your email (I'd prefer to keep this on the forum to help others):
You said:
Hi
firstly thanks for the help this has helped 90% of the problem. however, would you be so kind as to explain how i can implement a similar solution for a situation like this:
<SPAN class=verd11>
Some text here
<SPAN class=verd11>
Some more text here
</SPAN></SPAN>
where verd11 is set to FONT-SIZE: 0.65em
in this example the (Some more text here) displays tiny. i know that careful use of the editor will remove this problem, but i am building for a novice and the system has to be able to prevent this from happening. any help would be greatly appreciated.
[end of your email]
To work around this type of inheritance, just add another contextual selector to the list, i.e.,
div div,
div td,
div p,
div ul,
div ol,
div li,
div span,
td div,
td p,
td ul,
td ol,
td li,
td span,
ul li,
ol li,
li span,
p span {
font-size: 100%;
}
Becomes: (note the *last* selector in the list is the name of your class that is ineheriting the style - .verd11)
div div,
div td,
div p,
div ul,
div ol,
div li,
div span,
td div,
td p,
td ul,
td ol,
td li,
td span,
ul li,
ol li,
li span,
p span,
.verd11 .verd11 {
font-size: 100%;
}
And if you have other classes that are contained within each other, just add them to the above list.
HTH's