ansaurus

Question

Allowing the tag to override CSS?

Answer 1

+2 A:

The font tag is depreciated and does not follow standards anymore. I would suggest overriding the CSS with your own styles that implement the !important attribute.

div.MyClass p 
{  
font-size: 0.7em !important; 
}

If you insist on using the font tag, technically it should override most styles as long as it's the closest element to the raw text.

If it's failing it's likely due to the CSS using the !important attribute to override it.

I would suggest you consider updating the rich text box control you use to implement valid syntax, but you can work around it if you really want to.

thismat 2008-11-10 18:25:41

I know the tag doesn't follow standards, but the rich text box editor I'm using generates text using the tag anyway so I have no choice but to allow it. I could override styles with inline CSS, but that won't fix the tag.

Dan Herbert 2008-11-10 18:29:41

You're going to need to make sure the font tag is the closest element to the text, and that there are no !important styles in your CSS as they will override this.

thismat 2008-11-10 18:32:01

hahaha, rated down for providing legitimate information? Sweetness.

thismat 2008-11-11 04:21:49

Answer 2

+1 A:

You could convert it to a style tag on the element. Anything in that would take precedence over style sheet defined rules.

sblundy 2008-11-10 18:28:02

Not entirely true, you can still override inline elements with the !important attribute.

thismat 2008-11-10 18:29:29

Answer 3

A:

Honestly? Get a new rich text editor! TinyMCE or FCKeditor are both okay choices. Either that or educate your users to understand that the styles they set in the editor won't necessarily appear that way when published. Once thing I've done with FCKeditor in the past is limit its toolbar to the basics, like lists, links, headings etc., no styling options whatsoever.

roryf 2008-11-10 18:36:50

Answer 4

A:

is just an element like any other; it can be styled using CSS. You can write CSS to allow the font tag's styles to push down as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
  <head>
    <title></title>
    <style type="text/css">
    body { color: black}
    a { color: red; font-family: Sans; font-size: 14px;}
    font * { color: inherit; font-family: inherit; font-size: inherit}
    </style>
  </head>
  <body>
    This is outside <a href="#">inside</a> outside. <font color="green" face="Times New Roman" size="20">Outside <a href="#">inside</a> outside</font>.
  </body>
</html>

Mr. Shiny and New 2008-11-10 20:05:26

The only problem with that is any tags inside the tag get their styles overridden, even if they have their own styles, such as the link tag within the font tag.

Dan Herbert 2008-11-10 21:00:34

Answer 5

+3 A:

A year late, but thought I'd share nonetheless.

I was frustrated by this, as well. I was using a freeware RTE JavaScript component that produced  tags. It wasn't convenient to replace it, as it was for a client and it was a callback to fix this CSS override problem.

Unfortunately, none of your solutions worked in my case, so after thinking I came up with this JavaScript solution:

var fontEl=document.getElementsByTagName("font");
for(var i=0;i<fontEl.length;i++) {
    var f = fontEl[i];
    if(f.size)
        f.style.fontSize=(Math.round(parseInt(f.size)*12*0.6)).toString()+'px';
    if(f.face)
        f.style.fontFamily=f.face;
    if(f.color)
        f.style.color=f.color;
}

The formula for converting font size is incorrect, but accurate enough to produce believable results.

Rick Buczynski 2010-01-04 07:58:57

I like your solution. It's definitely more efficient than mine. Were you using jQuery when you tried using my solution, or was it just incompatible with what you were trying to do? Also, keep in mind that `parseInt()` can be dangerous if you don't pass in the radix you're converting from: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/ParseInt

Dan Herbert 2010-01-04 14:44:05

Thanks, Dan. I used the latest jQuery release included from google's API library. I bound it to document.ready, thinking that would be the right way to do it. No luck.By the way, I noticed a syntax error in my posted code.Line 3:"var f=f;" -- should read "var f=fontEl[i];"Also thanks for the tip on passing the radix. Looks like I need to brush up on some things!

Rick Buczynski 2010-01-04 16:34:28

ansaurus

tags:

views:

answers:

Allowing the <font> tag to override CSS?

related questions