Yui Reset CSS Makes <Strong><Em>This Not Work</Em></Strong>

YUI Reset CSS Makes strong em this not work /em /strong

If your strong declaration comes after YUI's yours should override it. You can force it like this:

strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }

If you still support IE7 you'll need to add !important.

strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }

This works - see for yourself:

/*YUI styles*/

address,caption,cite,code,dfn,em,strong,th,var {

  font-style: normal;

  font-weight: normal;

}

/*End YUI styles =*/

strong, b, strong *, b * {

  font-weight: bold;

}

em, i, em *, i * {

  font-style: italic;

}

 <strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

What does html mean

It means Hyper Text Markup Language

Kendo UI editor and reset.css

I'm not really sure why reset.css wants to change "font" to "inherit" on strong elements but it is not very logic. Kendo editor uses to make text bold so it creates a conflict.

Add this CSS

strong { font-weight: bold }

or

strong { font-weight: bold!important }

or use another reset css like normalize.css

For more information, take a look at this SO question: YUI Reset CSS Makes <strong><em>this not work</em></strong>

Chipersoft WMD - Yahoo Yui Reset.css - Preview Mode not working

Ended up just copying the contents of reset.css into a local file I can control. Then I commented out the offending css, and everything works. Not my preferred solution but already spent too much time on something so trivial.

CSS Reset not working

A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.

In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.

You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.

No bold text with short-hand font property

In shorthand font, the font-size and font-family are required. Everything else is optional. However, the values omitted will be set to their initial values, which in most cases is “normal”, as against “bold”. This is the case with headings, and strong and bold tags as well.

CSS reset for HTML5

The comments on that post are crazy. You're certainly not going to find a more thorough discussion.
I think you should delete unnecessary rules and deprecated tags from whatever reset you've been using and keep truckin. Paul Irish (jQuery core contributor, co-creator of Modernizr and now Googler) has a comment in the article you link to that has all the HTML5 specific CSS leveling you're likely to need:

article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; zoom:1; }

Google's using a simpler version in their base.css on HTML5Rocks.com:

section, article, header, footer {  display: block; }

You'll still need to use Remy Sharp's simple, bare-bones HTML5 Shiv or Modernizr to run a JavaScript loop to enable styling of new HTML5 elements in IE. HTML5 Shiv just creates the elements to allow styling, Modernizr is a much more full-featured HTML5 and CSS3 detection/styling solution. There's another great post on HTML5 Doctor worth a look, How to use HTML5 in your client work right now from March 2010, co-written by Remy and Richard 8 months after the reset article. They mention using Modernizr "to detect Web Forms 2.0 and other HTML5-type support."

Also, Dion (from Ajaxian and now Palm) tweeted about css3pie that will render visual elements like border-radius, box-shadow, and gradients in IE. Can't vouch for it myself.

(I had more links in here but had to remove all but one b/c my rep. is < 10, if there's something you can't find. reply and I'll post it.)

CSS reset for HTML5

The comments on that post are crazy. You're certainly not going to find a more thorough discussion.
I think you should delete unnecessary rules and deprecated tags from whatever reset you've been using and keep truckin. Paul Irish (jQuery core contributor, co-creator of Modernizr and now Googler) has a comment in the article you link to that has all the HTML5 specific CSS leveling you're likely to need:

article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; zoom:1; }

Google's using a simpler version in their base.css on HTML5Rocks.com:

section, article, header, footer {  display: block; }

You'll still need to use Remy Sharp's simple, bare-bones HTML5 Shiv or Modernizr to run a JavaScript loop to enable styling of new HTML5 elements in IE. HTML5 Shiv just creates the elements to allow styling, Modernizr is a much more full-featured HTML5 and CSS3 detection/styling solution. There's another great post on HTML5 Doctor worth a look, How to use HTML5 in your client work right now from March 2010, co-written by Remy and Richard 8 months after the reset article. They mention using Modernizr "to detect Web Forms 2.0 and other HTML5-type support."

Also, Dion (from Ajaxian and now Palm) tweeted about css3pie that will render visual elements like border-radius, box-shadow, and gradients in IE. Can't vouch for it myself.

(I had more links in here but had to remove all but one b/c my rep. is < 10, if there's something you can't find. reply and I'll post it.)

---

Related Topics