Cannot remove bullet points from li tag

[hmhair]

I am a little stumped. I cannot for the life of me get rid of a bullet point from my li tag. There are many li tags on my site and I have not had trouble removing the bullet point until now.

I have put the list-style: none on both ul and li tag as a demonstration just in case I get told to do that.


ul.hairraising-nav {
width: 210px;
height: auto;
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
background-color: green;
}
li.hairraising-nav {
width: 190px;
height: 40px;
line-height: 20px;
font: normal 1.3em Arial, Verdana, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
background-color: pink;
}
.hairraising-nav a:link {
line-height: 20px;
font: normal 1.3em Arial, Verdana, Helvetica, sans-serif;
padding: 5px 0px 5px;
display: block;
background-color: pink;
}

[aj_nsc]

First of all, you can combine them all into a single declaration:

list-style: none;

Second, if it's not working then it is because a) your stylesheet is cached (refresh your page a couple of times) or b) (most likely) because you have rules elsewhere in your stylesheet that allow set a bullet point on some ul or li that is of higher precedence than these rules.

The best way to determine if b is your issue is to open your web page in chrome, right click on your list item and select "Inspect element" - it will open a window that shows your HTML and, on the right side, shows you a list of CSS rules that are applied to it.

[hmhair]

I have noticed that I can’t fully style the li tag either. For example I can put a border on it but I can’t put a background color on it. I also can’t set the height on my li tag. Its very frustrating. It is a big site I am trying to add a page too but I have never had this problem before. If it is B then i won't be able to do anything about that as maybe bullets are needed on that area of the site however how can i make it less priority? The original li and ul tags do not have bullet points.

[aj_nsc]

Take a look at what I said doing - open your page up in chrome and right click and click "Inspect Element" - all the rules that your element is obeying, you may find that it's obeying a few rules from elsewhere in your stylesheet that you didn't expect it to.

For a primer in understanding CSS priorities (or specificities) this article on net tuts+ is quite good:

http://net.tutsplus.com/tutorials/ht...s-specificity/

[hmhair]

Ok i got it working but now i have another issue:

This was working this morning but when I clicked on one of my li links to test it everything went tits up. The hover is working but the li tag is now all of a sudden not reading from the CSS. Can anyone let me know why this is because its driving me nuts.

Image below:
http://img.photobucket.com/albums/v123/Fashy/liwtf.jpg

The pink box is a hover and the other links should be in boxes like the hover but blue and in the same font. I have even cut and paste the over css into my li and still no joy.

Code below:
ul.hairraising-lnk a {
width: 215px;
height: auto;	
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;	
list-style: none;
list-style-image: none;
}
li.hairraising-lnk a {
width: 200px;
height: 40px;
padding: 0px;
margin: 0px;
margin-top: 10px;
list-style-type: none;	
list-style: none;
list-style-image: none;	
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.hairraising-lnk a:link {
width: 180px;
height: 40px;
font: bold 13px Arial, Verdana, Helvetica, sans-serif;
color: #fff;
background-color: #E70089;
padding: 10px;
margin-left: 0px;
text-decoration: none;
display: block;
list-style-type: none;	
list-style: none;
list-style-image: none;
}
.hairraising-lnk a:hover, li.hairraising-lnk a:active a:visited {
width: 180px;
height: 40px;
font: bold 13px Arial, Verdana, Helvetica, sans-serif;
color: #fff;
background-color: #E70089;
padding: 10px;
margin-left: 0px;
text-decoration: none;
display: block;
list-style-type: none;	
list-style: none;
list-style-image: none;
}