ansaurus

Question

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

Answer 1

+6 A:

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 !important; }
em, i, em *, i * { font-style: italic !important; }

This works - see for yourself:

<html>
<head>
  <style type="text/css">
    address,caption,cite,code,dfn,em,strong,th,var {
      font-style:normal;
      font-weight:normal;
    }
    strong, b, strong *, b * { font-weight: bold !important; }
    em, i, em *, i * { font-style: italic !important; }
  </style>
</head>
<body>
  <strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>
</body>
</html>

palmsey 2008-08-21 14:39:10

+1 because THIS is the correct answer. The one marked as correct doesn't work on IE7

Scott Evernden 2009-04-19 20:19:46

Thanks, Scott. You're right. The !important is necessary in IE7.

Patrick McElhaney 2009-05-20 18:57:07

Answer 2

+2 A:

As long as your styles are loaded after the reset ones they should work. What browser is this? because I work in a similar way myself and I've not hit this problem I wonder if it's something in my testing at fault.

sparkes 2008-08-21 14:39:43

Answer 3

+7 A:

I would use this rule to override the YUI reset:

strong, b, strong *, b *
{
  font-weight: bold;
}

em, i, em *, i *
{
  font-style: italic;
}

travis 2008-08-21 14:46:44

Sadly, this appears to not work for IE7

Scott Evernden 2009-04-19 20:15:42

Answer 4

+6 A:

If in addition to using YUI reset.css, you also use YUI base.css, then you will be all set with a standard set of cross browser base styles.

LINK: http://developer.yahoo.com/yui/base/

Ricky 2008-08-21 14:49:52

YUI base doesn't solve the problem. It makes strong bold and em italic, but doesn't resolve the conflict when the same text is wrapped in both tags.

Patrick McElhaney 2009-01-14 15:40:06

Answer 5

+3 A:

I had a similar problem when I added the YUI Reset to the top of my stock CSS file. I found that the best thing for me was to simply remove all of the

font-weight: normal;

declarations from the YUI Reset. I haven't noticed that this has affected anything "cross-browser."

All my declarations were after the YUI Reset so I'm not sure why they weren't taking affect.

alexp206 2008-08-21 14:58:44

Answer 6

+2 A:

Reset stylesheets are best used as a base. If you don't want to reset em or strong, remove them from the stylesheet.

Chris Marasti-Georg 2008-08-21 15:13:15

Answer 7

+2 A:

As Chris said, you don't have to use the exact CSS they provide religiously. I would just save a copy to your server, and edit to your needs.

Kevin 2008-08-21 15:16:54

Answer 8

A:

I thought I had an ideal solution:

strong, b 
{
  font-weight: bold;
  font-style: inherit;
}

em, i 
{
  font-style: italic;
  font-weight: inherit;
}

Unfortunately, Internet Explorer doesn't support "inherit." :-(

Patrick McElhaney 2008-08-21 15:35:51

Answer 9

+1 A:

I would suggest avoiding anything which involves hacking the YUI files. You need to be able to update external libraries in the future and if your site relies on edited versions there is a good chance it will get cocked up. I think this is general good practice for any 3rd party library you use.

So I thought this answer was amongst the better ones

If in addition to using YUI reset.css, you also use YUI base.css, then you will be all set with a standard set of cross browser base styles.

Flubba 2008-08-21 15:56:58

Answer 10

A:

I see what you are saying. I guess you can add a CSS rule like this:

strong em { font-weight: bold; }

or:

strong * { font-weight: bold; }

Ricky 2008-08-21 18:32:40

ansaurus

tags:

views:

answers:

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

related questions