4

I have an issue with some HTML displayed in Drupal, but I am not 100% sure this is a Drupal issue. I am using the bold tag to emphasize a word, but it is not displayed as bold. It thought it might be the Google font I used, so I disabled it, but I still get the issue.

I checked the page source:

<div id="begin_block">
  <div id="fw_begin"><h2>Find words <b>beginning</b> with:</h2></div>
    <div id="inp_begin"><input type="text" /></div>
    <div id="aft_begin">(max. 5 characters)</div>
    <div id="but_begin"><button type="button">Go</button></div>
</div>

But I still get:

enter image description here

What could be causing this issue?

UPDATE

There is indeed a reset.css in the theme I am using. Bold is defined as:

b{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
Jérôme Verstrynge
  • 57,710
  • 92
  • 283
  • 453

4 Answers4

11

A CSS (reset) sheet has probably defined b{font-weight:normal;}. To "fix" the style, add b{font-weight:bold;}.

Also, he <strong> tag is semantically more correct, so use that instead of <b>.

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 6
    Here one can see the absurdity of CSS resets. Your browser uses some predefined styles, why would you override them and then set them back to default? OP should consider modifying his CSS reset. Also, `` isn't semantically more correct but rather it has *different* semantic meaning. If *"this is bold text"* makes more sense than *"this is important text"*, there isn't anything wrong with using ``. – duri Mar 17 '12 at 16:39
  • 1
    The new usage of `` is a little bit vague, it could be appropriate here: *"The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review."* http://dev.w3.org/html5/markup/b.html – Wesley Murch Mar 17 '12 at 16:45
  • 1
    Basically it means "text that's meant to be bold". – BoltClock Mar 17 '12 at 16:46
  • @duri: The CSS reset might be used to normalize `` to a certain font-weight, like `700`. It's paranoia probably, but not necessarily absurd. The author just has to be careful to remember to redeclare what was overwritten. `b{font-weight:normal;}` makes no sense though, setting to a real value does. – Wesley Murch Mar 17 '12 at 16:48
  • How strange - I had the same issue with sinatra+ruby just now on pages served. My browser was ignoring the bold tag; now that I added the css rule in-page via – shevy Aug 16 '20 at 23:39
0
b {
    font-weight: bold;
    font-family: inherit;
}

If the font family is not defined, the font in the wrapper element becomes override.

Fatih Ertuğral
  • 230
  • 2
  • 4
  • Might you please [edit] your question to explain a little how this differs from the [accepted answer](https://stackoverflow.com/a/9751683/3744182)? *A CSS (reset) sheet has probably defined `b{font-weight:normal;}`. To "fix" the style, add `b{font-weight:bold;}`* – dbc May 18 '21 at 17:59
0

What you need to do is to use firebug or google's developer console in order to debug it. If you do not have any prior experience with at least one don't worry - it will pay of to spend some time and to learn it.

As the real solution, you could wrap your text in <span> instead of <b>, add it some meaningful class like "stress" (but you should avoid class names like "bold" because you might end up with changing your mind and instead of font-weight you will use underline, and in such case you will either change a class name or have bold class for underline style) and add to it something like

.stress{
 font-weight: bold !important;
}

Most likely you overwrite font-weight somewhere and important will ensure that it won't get overwritten anymore.

BTW: of course you do not have to use <span> with a class name, you can also use other selectors like <strong> etc.

Thomas Shields
  • 8,874
  • 5
  • 42
  • 77
mkk
  • 7,583
  • 7
  • 46
  • 62
-1

If your "b" tag won't moving with "margin" you can use "transform" instead and also you should use "strong" instead of "b"

transform:translateX(120px) or transform:translateY(120px)

like that

Also you have to add position:absolute; for have a effect

Hüseyn Mikayılzadə
  • 1
  • 2