bullet points not working!

[Fashy]

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

[Fashy]

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.

[rkolling]

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

[opifex]

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?

[aj_nsc]

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.

[Fashy]

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.

[opifex]

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

navigation li {

should be

.navigation li {

IF it's a class.

Have you validated the html & css by any chance?

[Fashy]

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>

[peachskittle]

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.

[opifex]

Concur with the confusion.
It seems that my clairvoyant powers are waning lately.

[Fashy]

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.

[opifex]

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.

[peachskittle]

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.

[criterion9]

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...