www.webdeveloper.com
Results 1 to 5 of 5

Thread: Cannot remove bullet points from li tag

  1. #1
    Join Date
    Jun 2010
    Posts
    28

    Cannot remove bullet points from li tag

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

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    First of all, you can combine them all into a single declaration:

    Code:
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jun 2010
    Posts
    28
    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.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    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/
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Jun 2010
    Posts
    28
    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:
    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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles