Forums

erikdwallace

Something I run into frequently is conflicting styles with multiple unordered lists]. For example in navigation I use a list with list style set to none and I also use lists with bullets. It seems simple, but often the declarations conflict. I've tried different syntax and giving the lists unique IDs with no success.

Does anyone have a good suggestion for a best practice way to manage multiple lists?

Brett_Santore

Can you show an example?

erikdwallace

I'm working from home today and my files are on my machine at work. Sorry Brett, here's essentially what I'm working with:

#navigation { list-style-type:none; } /* I've tried list-style as well */
#bullets ( list-style-type:disc; }

<ul id="navigation">
	 <li><a href="#">Link One</a></li>
	 <li><a href="#">Link Two</a></li>
	 <li><a href="#">Link Three</a></li>
</ul>
<ul id="bullets">
	 <li>Item One</li>
	 <li>Item Two</li>
	 <li>Item Three</li>
</ul>

Brett_Santore

I am struggling to still understand your problem. However, if the CSS you posted above was pasted than here is your answer:

#bullets ( list-style-type:disc; }
should be
#bullets { list-style-type:disc; }

the opening brace should be { and not (

erikdwallace

Brett,
That was a typo on my part, that's unfortunately not the issue. To summarize I have different types of navigation and lists both using unordered lists. Even though I'm using unique id's I can't get bullets to appear when I've set list style to none in previous declarations. You'd think the last style would overwrite as it usually does, but in this case it isn't. Does that make more sense?

Thanks,
Erik

Brett_Santore

ul#elementID

example ul#bullets

tried that?

erikdwallace

I have indeed. I read an article about best practices on this site which mentioned that ul#elementID is not the best way to code, so I've been gradually changing that approach. When possible I just use the id name.

Brett_Santore

I guess I still don't understand the problem, sorry I could not fix your issues.

TT_Mark

Are you using a reset stylesheet? Or any kind of reset that removed the margins/padding from all elements? You'll need to reintroduce the padding on the left (I think) on the ul to make the bullets appear

TheDoc

You should always be more specific in your CSS. For example:

#wrapper #main-navigation { ... }

#wrapper #content ul { ... }

erikdwallace

I am using Eric Meyer's reset and have tried adding margin-left and padding-left. I appreciate everyone's help, I don't want to waste anyone elses time until I have the exact HTML and CSS I'm using. Thanks to everyone for their help.

TT_Mark

Fair enough, I'd recommend using something like Firebug or similar tool, selecting the incorrectly styled element and seeing what CSS rules are being applied

noahgelman

Try adding {list-style:inside;} to the #bullets list. They might be showing up but are outside of view. It's happened to me a couple of times actually.

erikdwallace

Thanks TT_Mark and noahgelman, I'll try both when I'm back in the office tomorrow.

erikdwallace

I tried all of the suggestions again with no success. So, I came to the conclusion that I'm obviously coding something wrong with in my CSS. When I switched the unordered list to an ordered list the bullets appeared.

Thanks to everyone for their help.

MerlinMason

Perhaps it was because you were targeting the whole list rather than the list items?

So it would be more like:

#bullets li {stuff:stuff;}

That may or may not work!

StephBertha

Yeah, I would think the last one, Merlin. I'd love to see Erik's CSS, I love debugging CSS issues!

zackw

Putting your site on the internet where people can see it and debug it is the best way to get help, posting snippets of code leaves us guessing. If you target an ul with a specific id in your css than those styles should not cascade to other lists, my guess is you need some left padding for the bullets to showup

erikdwallace

MerlinMason: A good thought, but that didn't fix the problem. I'm really starting to think it's a colossal error on my part and not something simple.

zackw: I'd love to post a URL but since I work for a software company and it's part of our next release it's not an option.

StephBertha: If you'd like to see the CSS I'd be happy to email you the file, all 518 lines of it.

erikdwallace

I just reread my post from before and apologize to anyone if it sounded curt. I appreciate everyone's help and am sorry this isn't a personal project I can post a URL for. I know it's extremely hard to diagnose a problem without seeing the HTML and CSS. So, if anyone is interested I'll be happy to send the CSS, but not the HTML for the reason I mentioned in my previous post.

Thanks again, have a good weekend.

treehouse : what would you like to learn today?

Forums

The best way to handle multiple unordered lists?