Previous Message
Next Message

Lists in menus and elsewhere on the same page

Sent by Pringle, Ron on 15 March 2006 19:07


Ian-

Disregard my private email to you. I sent it by accident before fully
realizing the problem. The information below will sort you out.



Ian wrote:


> I'm getting in a knot over list items. I am using one for a  
> horizontal menu and that is working fine. However, I want also to  
> have a regular unordered list on one of my pages and it is 
> not working.
> 

<SNIP>

> However, on the page the list items seem to be displaying inline and  
> with borders top and bottom - i.e. like the menu list items. I tried  
> enclosing the menu buttons in a <div> and then defining the menu  
> button styles like this:
> 
> #mainNav ul {
> ...
> }
> 
> but it seems to make no difference. In all, it is not working. You  
> can see the page where it is all going wrong here: http:// 
> www.tellura.co.uk/tsc/strategy.htm.
> 
> Any guidance much appreciated.
> 
> Ian 

Ian-

Your problem is specificity and the fact that you're not applying the ID
to the top horizontal div as you think you are.

Your structure currently looks like:

<div id="mainNavigation">
<ul id="mainNav">
<li class="home"><a href="index.htm">Home</a></li>
<li class="strategy"><a href="strategy.htm">Strategy</a></li>
<li class="materials"><a href="materials.htm">Materials</a></li>
<li class="surfaces"><a href="surfaces.htm">Surfaces</a></li>
<li class="manufacturing"><a
href="manufacturing.htm">Manufacturing</a></li>
<li class="partners"><a href="partners.htm">Partners</a></li>

</ul>
</div>

Your css is written like:

#mainNavigation {	
}

ul {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	margin: 5px 10px 20px 10px;
	padding: 5px 0;	
	list-style: none;
	display: inline;
	float: left;
	width: 740px;
}

etc.

You are feeding absolutely no rules specifically to the unordered list
in the mainNavigation div.

You have two choices. You can rewrite your css specific to the DIV ID,
or specific to the UL ID.

DIV ID would be like:

#mainNavigation ul {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	margin: 5px 10px 20px 10px;
	padding: 5px 0;	
	list-style: none;
	display: inline;
	float: left;
	width: 740px;
}

UL ID would be like:

ul#mainNav {

etc.

}

You then will have no need to override the horizontal nav rules for any
other unordered list. You can simply apply whatever rules you want to
the generic UL.

Regards,
Ron
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: