Bold text using CSS

I'm trying to use a common include for a subnavigation and then use CSS to change the menu visually to display where the user is at. I want to create an embedded style to bold the text of the appropriate menu item. My css is simplt this:

<style type="text/css">
a#1 {
	font-weight: bold;
}

</style>

Code (markup):

It works in IE but not Firefox. Any thoughts why it doesn't work?

The page is here:

http://www.healthyschoolscampaign.org/who/what/

Thanks!

 

First, you ought to stick a doctype on that thing.

Now, your problem:
<li><a href="http://www.healthyschoolscampaign.org/who/what/" id="1">What We Do </a>

The basic answer is that you have used something for an ID that you MAY NOT.

So, you'll have to make that something like id="a1"...

However, if I was you, I'd do things a bit differently.

When I have a menu and I want a "current" style for people to know where they are, I use a class called "current" on the li, not the a (I guess it could be on the a, but for some reason I just don't).

<ul id="foo">
<li><a href="blah">Blah</a></li>
<li class="current"><a href="bar">Bar</a></li>
<li><a href="manchoo">Manchoo</a></li>
</ul>

#foo li a {
various styles;
}
#foo li a:hover {
hover styles;
}
#foo li.current a {
current styles;
}

Sometimes the hover styles are the same as the current style so you can merge them:
#foo li.current a, #foo li a:hover {
styles;
}

I didn't have them in my examples but you should have focus and active while you're at it : )

 

Thanks. I purposely didn't create a 'current' id for the active style because I want to make a single sub menu include. So I want to define 'current' in an embedded style on the individual page so I can make a single global change to the sub. Now, maybe you are doing something that works better that what I am describing. Do you have a way to do this while using a single include?

 

And the reason that I did the 'a' tag rather than the 'li' is because when I have a sub menu, the style seems to apply to the entire sub section that is within the 'li' tag. Probably there is a better way to do this. I'm an admitted beginner at css.

 

Wow. But changing the id name from '1' to 'm1' like you suggested worked. It works now. Thanks!

 

A not all that elegant solution would be to give each top level list item an id, for example "home", "about", "contact", etc.. Then, on each page, embed the style element with the selectors pointing to the appropriate id. Eg.

<style type="text/css">
#about a {
  font-weight: bold;
  }

#about li a {
  font-weight: normal;
  }
</style>

Code (markup):

Notice that sub menus are returned to normal weight. This is a brutish method, but is easy to implement and easy to maintain. Even sub-pages can have the top level menu item hi-lited.

Amazing how well things work when you follow the rules.

cheers,

gary

 

Thanks for your help! I basically did something similarly brutish and it seems to work for me. Thanks for the ideas. As for following the rules, like you signature states, I'm a sucker for doing it my own way until it doesn't work. I learn best by beating my head against the wall. That way I actually can feel myself learning.