www.webdeveloper.com
Results 1 to 14 of 14

Thread: bullet points not working!

  1. #1
    Join Date
    Aug 2005
    Posts
    45

    bullet points not working!

    This is getting a bit frustrating to say the least. I do not normally work with bullet points but i kind of have to for this site. However they are not working!

    I have set the main LI tag as list-style:none as there is a navigation across the top of the site that DO NOT want bullet points. However for my content i need them and they are not showing.


    <ul class="disc">
    <li class="disc">text</li>
    </ul>



    ul.disc {
    list-style-type:circle;
    width: 400px;
    }
    li.disc {
    margin:0px;
    list-style-type:circle;
    list-style-position: outside;
    font:normal 12px arial,verdana,helvetica,sans-serif;
    }
    www.emma-designs.co.uk

  2. #2
    Join Date
    Aug 2005
    Posts
    45
    Also there seems to be a block of white space at the very start of the li tag pushing the first sentence in too far. It will go if i set margin: 0 but i need to put a top margin on.
    www.emma-designs.co.uk

  3. #3
    Join Date
    Oct 2009
    Posts
    14

    Bullet lists

    I had the same problem. Try increasing your left margin.

  4. #4
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Quote Originally Posted by Fashy View Post
    I have set the main LI tag as list-style:none as there is a navigation across the top of the site that DO NOT want bullet points. However for my content i need them and they are not showing.
    What you posted works just fine.
    The answer is in what you DIDN'T show.
    list-style:none is still in effect?
    ...but stupidity is terminal.

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    Opifex is right, the CSS you posted works fine...your problem lies in the fact that you most likely have other CSS that interferes with this stuff. Post it all or, if possible, provide a link to the page.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    Aug 2005
    Posts
    45
    Ok I have managed to get it working....in IE. But in the other browsers nothing shows at all. I have been trying to fix this all day and with no joy at all.

    I think the main problem is that i am a using navigation across the top with classes. I am not sure it’s confusing me.


    Here is the code for the default li tags:

    ul {
    width: 500px;
    height: auto;
    }
    li {
    font:bold 11px verdana,arial,helvetica,sans-serif;
    color: #000;
    list-style:none;
    display: inline;
    margin-right: 20px;
    margin-left: 20px;}
    Here is the code for the top navigation:

    .ulsubnavigation {
    width: 900px;
    height: 33px;
    float: left;
    list-style: none;
    display: inline;
    clear: both;
    margin: 0px;
    padding-top: 0px;
    }
    navigation li {
    width: 170px;
    height: 36px;
    float: left;
    list-style: none;
    display: inline;
    margin: 0px;
    background-image: url(../images/slices/get-involved.jpg);
    }
    li.navigation-involved a {
    width: 140px;
    height: 26px;
    float: left;
    display: inline;
    list-style: none;
    padding-top: 10px;
    padding-left: 30px;
    background-image: url(../images/slices/get-involved.jpg);
    }
    li.navigation-visitors a {
    float: left;
    width: 120px;
    height: 26px;
    display: inline;
    padding-top: 10px;
    padding-left: 50px;
    list-style: none;
    background-image: url(../images/slices/visitors.jpg);
    }
    li.navigation-presenters a {
    float: left;
    width: 140px;
    height: 26px;
    display: inline;
    padding-top: 10px;
    padding-left: 30px;
    list-style: none;
    background-image: url(../images/slices/presenters.jpg);
    }
    li.navigation-contact a {
    float: left;
    width: 130px;
    height: 26px;
    display: inline;
    padding-top: 10px;
    padding-left: 40px;
    list-style: none;
    background-image: url(../images/slices/contact.jpg);
    }
    li.navigation-involved a:hover, li.nav-button a:active {
    background-color: #ffffff;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-image: url(../images/slices/get-involved-hover.jpg);
    }
    li.navigation-visitors a:hover, li.nav-button a:active {
    background-color: #ffffff;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-image: url(../images/slices/visitors-hover.jpg);
    }
    li.navigation-presenters a:hover, li.nav-button a:active {
    background-color: #ffffff;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-image: url(../images/slices/presenters-hover.jpg);
    }
    li.navigation-contact a:hover, li.nav-button a:active {
    background-color: #ffffff;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-image: url(../images/slices/contact-hover.jpg);
    }

    I also have a sub navigation menu:

    li.subnavigation {
    width: 170px;
    height: 26px;
    float: left;
    display: block;
    margin: 0px;
    background-image: url(../images/slices/get-involved.jpg);
    }
    li.subnavigation-bookingform a {
    float: left;
    width: 126px;
    height: 23px;
    display: inline;
    list-style: none;
    text-align:center;
    padding-top: 10px;
    }
    li.subnavigation-floorplan a {
    float: left;
    width: 140px;
    height: 23px;
    list-style: none;
    display: inline;
    text-align:center;
    padding-top: 10px;
    }
    li.subnavigation-timings a {
    float: left;
    width: 126px;
    height: 23px;
    display: inline;
    list-style: none;
    text-align:center;
    padding-top: 10px;
    }
    li.subnavigation-venue a {
    float: left;
    width: 160px;
    height: 23px;
    display: inline;
    list-style: none;
    text-align:center;
    padding-top: 10px;
    }
    li.subnavigation-holders a {
    float: left;
    width: 160px;
    height: 23px;
    display: inline;
    list-style: none;
    text-align:center;
    padding-top: 10px;
    }
    li.subnavigation-bookingform a:hover, li.nav-button a:active {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #885D8C;
    }
    li.subnavigation-floorplan a:hover, li.nav-button a:active {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #885D8C;
    }
    li.subnavigation-timings a:hover, li.nav-button a:active {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #885D8C;
    }
    li.subnavigation-venue a:hover, li.nav-button a:active {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #885D8C;
    }
    li.subnavigation-holders a:hover, li.nav-button a:active {
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #885D8C;
    }
    Ok now i want bullet points in the content for plain text not links:

    ul.disc {
    width: 580px;
    list-style-image: url(../images/slices/note.jpg);
    margin-bottom:20px;
    display: block;
    list-style-position: outside;
    }
    li.disc {
    list-style-image: url(../images/slices/note.jpg);
    list-style-position: outside;
    margin-top: 15px;
    font:normal 12px arial,verdana,helvetica,sans-serif;
    display: block;
    }
    Works in IE but none of the others. I have tried using images and i cannot find anything on google.
    Last edited by Fashy; 11-25-2009 at 09:23 AM.
    www.emma-designs.co.uk

  7. #7
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    ok.... put a link to a live version....
    there is too much css and not enough html to apply it to.

    here&#161;s one error, but has nothing to do with the problem
    HTML Code:
    navigation li {
    should be
    HTML Code:
    .navigation li {
    IF it's a class.

    Have you validated the html & css by any chance?
    ...but stupidity is terminal.

  8. #8
    Join Date
    Aug 2005
    Posts
    45
    Ah yes i just changed that fiddling with it. Its not been validated yet as i have only just started to code the site. My contract ends on Friday so i want to get as much done before i leave.
    Though if it will help seek the issue i will do so now.

    http://eiconnectmaint/visitor.html

    If the link dosn't work (as its in house) here is the html for some bullet points:

    <ul class="disc">
    <li class="disc">Take part in hourly presentations with the leading operators and contractors who are there to inform the UK supply chain of the business opportunities available with them. </li>

    <li class="disc">Speaker companies hold pre-arranged One 2 One appointments with attendees on a pre-arranged basis for the half of the day that they aren’t presenting, each lasting 15 minutes.</li>

    <li class="disc">Each speaker company is allocated a theatre for their 3 presentation slots and a director’s box in the stadium for their One 2 One appointments.</li>

    <li class="disc">Certain theatres will be on a silent audio set up whereby the speaker has a headset and mic (as do the audience) to minimize sound transference from surrounding presentations.</li>

    <li class="disc">Each presentation lasts approx 20minutes allowing the remainder of the hour for Q & A and networking with the audience.</li>
    </ul>
    Top navigation:

    <div id="top-nav">
    <ul class="ulnavigation">
    <li class="navigation-involved"><a href="#">GET INVOLVED</a></li>
    <li class="navigation-visitors"><a href="#">VISITORS</a></li>
    <li class="navigation-presenters"><a href="#">PRESENTERS</a></li>
    <li class="navigation-contact"><a href="#">CONTACT</a></li>
    </ul>
    </div>
    Sub Navigation:

    <div id="sub-navigation">
    <ul class="ulsubnavigation">
    <li class="subnavigation-bookingform"><span class="subnav"><a href="#">BOOKING FORM</a></span></li>
    <li class="subnavigation-floorplan"><span class="subnav"><a href="#">EVENT FLOOR PLAN</a></span></li>
    <li class="subnavigation-timings"><span class="subnav"><a href="#">TIMINGS</a></span></li>
    <li class="subnavigation-venue"><span class="subnav"><a href="#">DIRECTIONS TO VENUE</a></span></li>
    <li class="subnavigation-holders"><span class="subnav"><a href="#">LIST OF STAND HOLDERS</a></span></li>
    </ul>
    </div>
    Last edited by Fashy; 11-25-2009 at 10:03 AM.
    www.emma-designs.co.uk

  9. #9
    Join Date
    Jun 2009
    Posts
    112
    Wait, I'm getting confused by what you are posting.

    Are you saying these lists are not nested within each other? Then they should not affect each other.

    Remove your list style nones and discs and whatever and start bottom up. If you are only trying to remove the list style from the main nav, then a list-style none on ul.ulnavigation should be all you need.

  10. #10
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Concur with the confusion.
    It seems that my clairvoyant powers are waning lately.
    ...but stupidity is terminal.

  11. #11
    Join Date
    Aug 2005
    Posts
    45
    It is very confusing I am trying to explain the best I can. Basically the manager wants content listed as bullet points 9as what they should be used for). However because i have two navigations that have bullet points switched off, even though they are in a class it is having a blanket effect on all li tags even though they all have a different class. I cannot get bullet points to show up at all in Firefox and other browsers apart from IE. The navigations are fine, removing the bullet points wasnít a problem itís getting them to show up on content that is the problem! It is a conflict in the CSS somewhere.
    www.emma-designs.co.uk

  12. #12
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    The point is that people cannot see what is going on with only part of the code.
    Put the page on-line somewhere in a test folder so that people can have a look at it. You will receive better assistance that way. Like I said, my clairvoyant powers are just not up to speed lately.
    ...but stupidity is terminal.

  13. #13
    Join Date
    Jun 2009
    Posts
    112
    I understand you are having some sort of strange inheritance problem.

    What I'm telling you is it is extremely unlikely if these lists are separate entities. It doesn't make any sense if you point to a specific UL to have an effect, it should not, and I'm pretty confident, will not affect anything else.

    This leads me to believe there is something we don't know or you're not showing us possibly some part of the syntax that is wrong, and causing this problem. Without a site to see, we at least need a full view, not chunks, of your code.

  14. #14
    Join Date
    Jan 2009
    Posts
    3,346
    Here is the code for the default li tags:

    Quote:
    ul {
    width: 500px;
    height: auto;
    }
    li {
    font:bold 11px verdana,arial,helvetica,sans-serif;
    color: #000;
    list-style:none;
    display: inline;
    margin-right: 20px;
    margin-left: 20px;}
    Found towards the top of the thread...

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