bullet points not working!

@FashyNov 24.2009

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.

~~[QUOTE]~~

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

[/QUOTE]

to post a comment

CSS

13 Comments(s) _↴

@FashyauthorNov 24.2009 — #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.

@rkollingNov 24.2009 — #I had the same problem. Try increasing your left margin.

@opifexNov 25.2009 — #
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.[/QUOTE]

What you posted works just fine.

The answer is in what you DIDN'T show.

list-style:none is still in effect?

@aj_nscNov 25.2009 — #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.

@FashyauthorNov 25.2009 — #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;}[/QUOTE]

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

}[/QUOTE]

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;

}[/QUOTE]

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;

}[/QUOTE]

Works in IE but none of the others. I have tried using images and i cannot find anything on google. ?

@opifexNov 25.2009 — #ok.... put a link to a live version....

there is too much css and not enough html to apply it to.

here¡s one error, but has nothing to do with the problem
[code=html]navigation li {[/code]
should be
[code=html].navigation li {[/code]
IF it's a class.

Have you validated the html & css by any chance?

@FashyauthorNov 25.2009 — #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>[/QUOTE]

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>[/QUOTE]

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>[/QUOTE]

@peachskittleNov 25.2009 — #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.

@opifexNov 25.2009 — #Concur with the confusion.

It seems that my clairvoyant powers are waning lately.

@FashyauthorNov 26.2009 — #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.

@opifexNov 26.2009 — #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.

@peachskittleNov 27.2009 — #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.

@criterion9Nov 27.2009 — #
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;}
[/quote]

Found towards the top of the thread...

Also in #CSS _↴

getting footer text to align on same line Layout problem with Explorer -> drop down menu Page Elements Shifting...

Success!

Help @Fashy spread the word by sharing this article on Twitter...

Tweet This

bullet points not working!

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

bullet points not working!

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴