Page 1 of 1

CSS problem - bold text (<b>) not working?

Posted: Fri May 02, 2008 12:43 pm
by Josh1billion
I started a new website: http://www.joshforde.com

For some reason, the CSS stylesheet ( a very simple one I wrote, take a look here: http://www.joshforde.com/style.css ) is making it so simple <b> and </b> tags aren't working. Italics (<i> and </i>) aren't working either, though underline (<u> and </u>) is working.

Why is this, and how do I fix it?

Re: CSS problem - bold text (<b>) not working?

Posted: Fri May 02, 2008 12:58 pm
by Zoxive
Your * is resetting alot of the tags for some reason.

When i look at the CSS in firebug it looks like this:

Code: Select all

* {
  background:#FFFFFF none repeat scroll 0%;
  font-family:Geneva,Arial,Helvetica,sans-serif;
  font-size:12px;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:1.5;
  margin:0pt;
  padding:0pt;
}
Its happening from this line:

Code: Select all

font: 12px/1.5 Geneva, Arial, Helvetica, sans-serif;

Re: CSS problem - bold text (<b>) not working?

Posted: Fri May 02, 2008 1:13 pm
by Josh1billion
Ah it seems I needed to have the font name and font size separate. I changed that line you mentioned to this instead:

Code: Select all

 
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
All good now. Thanks, Zoxive!

Re: CSS problem - bold text (<b>) not working?

Posted: Fri May 02, 2008 5:08 pm
by Josh1billion
For others who have a similar problem:

It also seems to work better to change "*" to "body"

Re: CSS problem - bold text (<b>) not working?

Posted: Sat May 03, 2008 12:54 am
by Kieran Huggins
<b> is not a valid tag in xhtml, it was deprecated after html 4. <i> suffered a similar fate.

Fear not though, for they have been replaced by more semantically correct tag names:

Code: Select all

HTML     XHTML
------------------------------------------
b        strong
i        em (for emphasis)

Re: CSS problem - bold text (<b>) not working?

Posted: Sat May 03, 2008 3:28 am
by matthijs
<strong> and <em> are valid HTML4 as well. See http://www.w3.org/TR/html401/struct/text.html#h-9.2.1

@Josh1billion: you should do a short research in CSS reset stylesheets. There are a couple of them around (Yahoo has one in it's library, Eric Meijer has one). If you read the discussions around those, you'll get a better understanding of why or why not to use them and how.
See for example
http://meyerweb.com/eric/tools/css/reset/index.html
and the discussion
http://meyerweb.com/eric/thoughts/2007/ ... -reloaded/
Josh1billion wrote:Ah it seems I needed to have the font name and font size separate. I changed that line you mentioned to this instead:
These don't neeed to be on separate lines. Using shorthand styles are fine and will not make any difference in how they are styled.
So

Code: Select all

font: 12px/1.5 Geneva, Arial, Helvetica, sans-serif;
is perfectly fine.
Josh1billion wrote:It also seems to work better to change "*" to "body"
If you use the star *, the rules used will apply to all elements in your document. If you use body, the rules will be applied to only the body element. Using the * can be convenient, but there are some issues, because the rules are applied to all elements. Again, if you read the articles on Meijer's site, you'll understand.