i am using this code... for a Horizontal CSS menu which is working fine on jsFiddle but when i am using it in my site.. it is giving me bullets of the list, see the image below....
HOW TO GET RID OF THESE BULLETS
F1 F1
Help !!!
Any Key
+5
A:
Modify this style:
#menu li {
margin: 1px;
padding: 0;
float: left;
}
Like this: (You are missing list-style property)
#menu li {
margin: 1px;
padding: 0;
float: left;
list-style:none; // this should remove the bullets
}
More Info:
Sarfraz
2010-10-19 18:43:47
That is the simple truth :), jsFiddle uses a [reset-css](http://developer.yahoo.com/yui/3/cssreset/) I believe, so that's why you don't see any bullets there! This reset removes all the default-browser settings.
Justus Romijn
2010-10-19 18:45:31
@Justus Romijn: True i should have mentioned that in my answer but thanks for adding that :)
Sarfraz
2010-10-19 18:47:28
+1 for the reference to w3schools. Great reference site!
Mike Webb
2010-10-19 19:16:35
+2
A:
Have you tried list-style?
ul {
list-style: none;
...
...
}
Antonio Cangiano
2010-10-19 18:45:25
Sure, it's just an example of how you'd use list-style. :) He can reduce the scope to a specific id or class like you did in your answer.
Antonio Cangiano
2010-10-19 18:53:53
+2
A:
You need to override the default <li> style by adding list-style: none; to #menu. Adding that to #menu li will have the same effect, but it takes 3 extra characters. :)
The reason jsFiddle looks fine is that the CSS they're applying to the whole page is dealing with it for you.
Read more about list-style-type, and the short-hand list-style (used above).
misterkeg
2010-10-19 18:53:44