CODEWITHSUNDEEP
css
justSteve
justSteve

Reputation: 5524

One CSS element rendered...others are not

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.

Upvotes: 0

Views: 112

Answers (6)

Andrew Hare
Andrew Hare

Reputation: 351698

Try this:

#main_navigation li {
   ...
}

Upvotes: 1

Detect
Detect

Reputation: 2069

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253485

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?

Upvotes: 0

Sarah Vessels
Sarah Vessels

Reputation: 31660

#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.

Upvotes: 0

Ben Hughes
Ben Hughes

Reputation: 14195

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.

Upvotes: 1

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103145

You probably want

font-weight: bold;

Upvotes: 2

Related Questions