css ids overriding classes

[realmuffin]

Here is some code that i'm trying to troubleshoot. I think my problem is in assigning an ID and a CLASS to a list in my header tag. The resulting output adheres to the #top_nav class CSS but not the ul.inline id CSS

Thanks for any suggestions, my relevant code is below:

HTML: 
<ul class="inline" id="top_nav">
	<li><a href="index.htm">HOME</a></li> 
	<li><a href="about.htm">ABOUT</a></li>
	<li><a href="connect.php">CONNECT</a></li>
	<li><a href="initiative.htm">INITIATIVE</a></li>
</ul>

CSS: 
ul.inline {
	display: inline;
	list-style-type: none;
}

li { /*list items are displayed differently dependant on the parent list class (.inline or not) */
	display: inherit;
}

ul #top_nav{
	font: 2.0em Tahoma, sans-serif;
	color: white;
}

[Andyram2k]

Hi realmuffin,
Quick question if i may. Looking at the code below, you could put all styles under just the id, unless you are having multiple ULs with the same properties?

[realmuffin]

The page will have multiple inline ULs but each UL will be styled slightly differently (color/size etc).

I know that what you suggest will work, but I was trying to be "correct" and abstract out the display: inline so that I don't need to specify "display: inline " for each individual ul..

I'm pretty green at this, so I could be ttoally off the mark..

[Andyram2k]

No, that sounds fine to me. What's the issue that you're having with the CSS? It all seems to be working fine when you remove the inline class, it remove the style etc as expected.

[realmuffin]

For some reason it works now that I removed the ul tag from the CSS. It's really odd, it should have worked before as per my understanding...


CSS:
ul.inline {
display: inline;
list-style-type: none;
}

li { /*list items are displayed differently dependant on the parent list class (.inline or not) */
display: inherit;
}

ul #top_nav{
font: 2.0em Tahoma, sans-serif;
color: white;
}

[Andyram2k]

Cool. One other thing.. If you were after changing the link color, you'd have to add:

#top_nav a {
color: white;
}

Ignore this if you weren't, just trying to save you having to post again

[realmuffin]

oh, yes thanks!

[criterion9]

I think the issue with having the space between ul and your id was what was causing the unexpected behavior. An html element and a space followed by an id is the same as saying all instances of the id within the html element. Generally you are fine using just the id as the selector since they should always be unique for well formed pages.

[realmuffin]

Generally you are fine using just the id as the selector since they should always be unique for well formed pages.

Really good point, I'm going to change accordingly. Thanks!