Ron, Thanks very much for helping me with this. Your advice worked nicely!
Regards, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? On 15 Mar 2006, at 7:58 pm, Pringle, Ron wrote: > 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 PROTECTED] > 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/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/