- This topic is empty.
-
AuthorPosts
-
January 20, 2011 at 2:42 pm #31329erikdwallaceParticipant
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?
January 20, 2011 at 2:56 pm #65097Brett_SantoreMemberCan you show an example?
January 20, 2011 at 3:13 pm #65098erikdwallaceParticipantI’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; }
- Item One
- Item Two
- Item Three
January 20, 2011 at 3:32 pm #65100Brett_SantoreMemberI 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 (
January 20, 2011 at 3:48 pm #65101erikdwallaceParticipantBrett,
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,
ErikJanuary 20, 2011 at 3:54 pm #65102Brett_SantoreMemberul#elementID
example ul#bullets
tried that?
January 20, 2011 at 4:02 pm #65104erikdwallaceParticipantI 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.
January 20, 2011 at 4:55 pm #65107Brett_SantoreMemberI guess I still don’t understand the problem, sorry I could not fix your issues.
January 20, 2011 at 5:08 pm #65112TT_MarkMemberAre 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
January 20, 2011 at 5:09 pm #65115TheDocMemberYou should always be more specific in your CSS. For example:
#wrapper #main-navigation { … }
#wrapper #content ul { … }
January 20, 2011 at 5:40 pm #65116erikdwallaceParticipantI 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.
January 20, 2011 at 5:44 pm #65117TT_MarkMemberFair enough, I’d recommend using something like Firebug or similar tool, selecting the incorrectly styled element and seeing what CSS rules are being applied
January 20, 2011 at 5:46 pm #65118noahgelmanParticipantTry 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.
January 20, 2011 at 6:22 pm #65056erikdwallaceParticipantThanks TT_Mark and noahgelman, I’ll try both when I’m back in the office tomorrow.
January 21, 2011 at 8:53 am #64903erikdwallaceParticipantI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.