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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

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

Post 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?
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

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

Post 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;
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

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

Post 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!
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

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

Post by Josh1billion »

For others who have a similar problem:

It also seems to work better to change "*" to "body"
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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

Post 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)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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.
Post Reply