Basic CSS - Can't see why it's not working

[simontheak]

Thanks for taking the time to read this.

I'm just trying to style a list in order to create a menu, and for the life I can't see why it's not working.

Here's the HTML:

<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<ul id="mainlevelmain_menu"><li><a href="#" id="active_menumain_menu">Home</a></li>

<li><a href="#" >News</a></li>
</ul>			
</td>
</tr>
</table>

and the CSS:

ul.mainlevelmain_menu{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
margin-left: 0;
background-color: #426208;
color: white;
width: 100%;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 18px;
}

ul li.mainlevelmain_menu
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
padding-top: 5px;
} 

Is the problem because the content is inside a table cell? Or am I doing something else wrong?

Any help would be really appreciated!

[DaveWoods]

Alter your CSS to this and it should work

#mainlevelmain_menu{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
margin-left: 0;
background-color: #426208;
color: white;
width: 100%;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 18px;
}

#mainlevelmain_menu li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
padding-top: 5px;
}

Within CSS:

. = class
# = id

You'd also not quite grasped how to apply styles to a decendant.

You're first style was nearly correct and just required switching the class for an id. However, your second style would be looking for an li with the class="mainlevelmain_menu" which obviously doesn't exist within your CSS.

Also, keep in mind that using display: inline; may make the <li> difficult to style as it won't recognise width, height or margin's so I'd usually use float: left; instead.

Hope that helps.

[simontheak]

Thanks Dave,

Still no luck I'm afraid though.

You can see the site as it currently stands HERE (The menu's at the top of the page).

I'm trying to get it to look like THIS (The CSS code can be seen in the source code in the last example.

The site itself is using Joomla.

[osgood]

#mainlevelmain_menu DOESNT have a <ul> IT IS the <ul>

Therefore you need to delete all the 'uls' after the selector

This

#mainlevelmain_menu ul

should be

#mainlevelmain_menu

This

#mainlevelmain_menu ul li

should be


#mainlevelmain_menu li


etc etc

Simple error

[DaveWoods]

That's because in your code you've not copied my code exactly

You've currently still got

#mainlevelmain_menu ul
#mainlevelmain_menu ul li

Change this too...

#mainlevelmain_menu
#mainlevelmain_menu li

Basically, what you were doing was trying to apply the styles to an li, within a ul which was within an element called #mainlevelmain_menu. However, this doesn't exist because it's the actual ul that has this id.

If you wanted to include the ul within your css then you'd need to have done

ul#mainlevelmain_menu
ul#mainlevelmain_menu li

Although, as you can onyl use one ID on a page anyway then I wouldn't usually include the ul part.

Hope that explains it a little better.

[simontheak]

Thanks guys - that's got it.

Really appreciate your help!