The best way to handle multiple unordered lists?

[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; }

Link One


Link Two


Link Three






Item One


Item Two


Item Three

[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.

[Author]

Posts