CMS Made Simple Forums

So I have a client that is adding news, editing pages, etc.  They are not web-savvy and tend to paste most things in from Word and disgusting Frontpage pages.  I set up style sheets and told them how to use them, but the main problem I'm having is tags taking precedence over the CSS.

For example, they paste something from Word into the FCKEditor's WYSIWYG box.  Embedded in what they paste is etc.  When they post the page, my CSS font sizes are ignored and the text is giant, bold, and sometimes in, say, Times when my stylesheet says Verdana.

Now, I, when I'm editing, know that I can view the source, delete the font tags, and then format it in CSS-happy markup.  But for the client, who wants to SEE what they're doing in WYSIWYG and not mess with the source.... they're left with pages with font tags and other junk that they can't see -- but that makes the pages look like crap.

Is there a solution for this?  Workaround, CSS, anything?  Thanks! 

There is a button on the FCKEditor toolbar that allows you to paste as plain text. It opens a new window, you paste the text in there press a button, and it dumps the plain text in the main editor window stripped of all extraneous tags and stuff. There's a couple more steps involved than just pasting directly into the editor window, but that hopefully shouldn't be too difficult for your client to adapt to. 

Yeah, I've actually seen that, but for some reason it only shows up sporadically for me.    Sometimes when I paste I get that prompt (and it's a GREAT feature that recognizes it as Word material and strips the tags)... but other times it's completely bypassed and the text is pasted straight into the window with all the Word junk intact.

Copy > Paste in Notepad > Copy > Paste in FCK. Done!

That will make whatever has a font tag not show at all, all words after

Mark is right : the problem is not in the CSS.
It is inside the wysiwyg editor : it should be lightly configured, not allowing junk (like non xhtml tags) pasting.
See http://forum.cmsmadesimple.org/index.ph ... 385.0.html (my post and Russ' answer)

PM

You can override it by using Font in your CSS stylesheet.  The only problem is that if the person is using font to make a word larger or a different font then it won't display that way anymore.  So if you use

Font {
  font-size: 1em;
  font-family: Arial, Verdana, Helvetica, Sans-serif;
}

then this will be displayed for all no matter what was used.  I don't know if all browsers will work but Firefox v1.5 and IE v6 do.

Because it has an upper case F ?

Any thing you put in the WYSIWYG, ,  will over ride any CSS because it will be a style call in the html and from what I understand HTML styles take priority.

mark wrote: Because it has an upper case F ?

Any thing you put in the WYSIWYG, ,  will over ride any CSS because it will be a style call in the html and from what I understand HTML styles take priority.

Seems to work for me.  This is the exact code:

In HTML:
Test code


and in CSS (removed uppercase F):
font {
  font-size: 1em;
  font-family: Arial, Verdana, Helvetica, Sans-serif;
}

After doing this the text looks normal, not large or Bauhaus 93.

From http://www.w3schools.com/css/css_intro.asp  where number four has the highest priority:

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the tag)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).

I have the feeling the reason why this works is because the Font tag is deprecated (if I remember correctly).  It is possible that the new browsers are willing to override font because of such.  Try it for yourself; it definitely overrides it unless I am doing something weird.

I already tried it

I repeat : we don't need any ugly CSS hack (wether it works or not) to beautify bad markup code ; we need good xhtml markup.
I think a website with 'font' tags is nowadays broken.
So let's configure the wysiwyg editor to limit it to care about content and produce markup that validates w3.