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

Question

This line in YUI's Reset CSS is causing trouble for me:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

It makes my em not italic and my strong not bold. Which is okay. I know how to override that in my own stylesheet.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

The problem comes in when I have text that's both em and strong.

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

My rule for strong makes it bold, but YUI's rule for em makes it normal again. How do I fix that?

Answer 1

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>