One CSS element rendered...others are not

Question

I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....

I have HTML like:

<ul id="main_navigation">
  <li id="trigger0"><a /Topics">Webinar Topics</a>
  <ul  class="subNavMenuItems" id="subNav0">
    <li><a href="/Topics/15">Intro</a></li>
    <li><a href="/Topics/25">Computer Skills</a></li>[and so on]

In my css i have:

#main_navigation ul{
 margin: 0;
 padding: 0;
 float: left;
 width: 20%;
 font-size:13px;
 font: bold;
 font-variant: small-caps;

}

the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.

Answer 1

Try this:

#main_navigation li {
   ...
}

Answer 2

You probably want

font-weight: bold;

Answer 3

I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.

Answer 4

#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.

Ben has a good suggestion with trying the Firebug addon for Firefox.

This HTML is invalid: <a /Topics">Webinar Topics</a>. You want <a href="/Topics">Webinar Topics</a> most likely.

Answer 5

Also, missing a double quote in <a /Topics"> and the href attribute.

Answer 6

What element are you trying to style?

#main_navigation ul {
/* css here */
}

Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?