Search code examples
cssinternet-explorer

font-weight: bold not working in IE 7 and 8

I'm applying the following CSS:

dl dd {
    font-size: 12px;
    font-weight: bold;      
}

but my text is not bold in IE?

HTML:

<dl><dt>Prepared For</dt><dd><pre>( client name )</pre></dd></dl>

I think it might have something to do with the <pre> tags, because when they aren't there, it's bolded.

The font family is Arial.

Solution

  • The structure of a definition list should be something like:

    <dl>
    <dt>Some title</dt>
    <dd>Your definition</dd>
</dl>

    Do you have anything other than text in the <dd> that might have styles being applied to them that override your dl dd CSS, like a <span> or <strong> or <em>?

    EDIT:

    Saw your update. It definitely DOES have to do with your <pre> tags. Your CSS rules don't override the <pre> because that sort of defeats the purpose of "pre-formatted text."

    Try expanding your CSS to include <pre> in the chain of selectors, and if that fails, you may need to use !important (although this is generally frowned upon):

    dl dd pre {
    font-size: 12px;
    font-weight: bold !important; /* remove !important if not needed */
}

    See if that works and report back.