bullets missing in UL

Question

ggeoff 4 Junior Poster- 72 years old :)

13 Years Ago

Hi
Most people want to disable bullets! I can't see mine. If I disable my CSS external stylesheet I see the bullets, and as a consequence disable my horizontal list used to create navigation for my website!

I thought that assigning a class to the real list that is part of the content of the website would mean that the list would function properly. Well it does except for the missing bullets!

Has anyone any information as to why I have missing bullets on my UL?

Thanks

Geoff

html-css web-design

5 Contributors
19 Replies
2K Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by ggeoff

carrieathomer 0 Light Poster

13 Years Ago

in your CSS file

check for

ol, ul {
	list-style: none;
}

remove it

Edited 13 Years Ago by peter_budo because: Keep It Clear - Do use code tags when posting any code

carrieathomer 0 Light Poster

13 Years Ago

even check

li{ list-style:none}

Edited 13 Years Ago by peter_budo because: Keep It Clear - Do use code tags when posting any code

lps 71 Posting Pro in Training

13 Years Ago

sometime is the margin and padding problem where the bullet is hidden to left.

carrieathomer 0 Light Poster

13 Years Ago

paste your complete CSS file.

Do you have internal and inline stylesheet as well?

Edited 13 Years Ago by carrieathomer because: n/a

teedoff 3 Posting Pro

13 Years Ago

Disabling the stylesheet proves that the bullets are there

No actually that may prove that you could have styled the list to remove the bullets, or you might have a box model issue...or a number of things.

As suggested, speculation is the best anyone can do without seeing your code or even better your live test site link.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ggeoff 4 Junior Poster- 72 years old :) · Answer 1 · 2011-10-13T19:23:56+00:00

Thanks Ips,

I have tried alterations to the padding and margins. The ul looks fine except for the fact that the bullets are not visible. Disabling the stylesheet proves that the bullets are there, so there is something wrong with the stylesheet. Since I am using a dark grey background I thought that maybe the bullets are not showing, so I altered the background color but that doesn't solve the problem. Both the html and CSS validates ok except for warnings about color and background color set to the same. Maybe its something to do with that?

Geoff

ggeoff 4 Junior Poster- 72 years old :) · Answer 2 · 2011-10-14T03:01:55+00:00

Thanks carriehomer I am not using inline styles and internal styles. I have corrected a few instances where color and background-color were the same and the ul works correctly in MSIE9 bullets shown but not in the other browsers. Safari is so slow cannot use.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
body {
  background-color: #222;
  line-height: 120%;
  font-size: 11px;
  color: #999;
   font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-align: center; /* Centers the page content container in IE 5 browsers. */
  margin: 0 0 0 0; 
  padding: 0 0 0 0; 
}
body#home a#nav-home,
body#2 a#nav-2,
body#3 a#nav-3,
body#4 a#nav-4,
body#5 a#nav-5
{
	color: #fff;
	background-color:#222;
}

html, body{
	height:100%;
}

h1 {
  line-height: 120%;
  color: #999;
  background-color:#222;
  font-size: 18px;
  font-weight: bold;
}
h2 {
  line-height: 120%;
  color: #999;
   background-color:#222;
  font-size: 14px;
  font-weight: bold;
}
h3 {
	line-height:120%;
	color: #999;
	 background-color:#222;
	font-size: 12px;
	font-weight: bold;
}
p{
	line-height:120%;
	font-size:12px;
	color:#999;
	 background-color:#222;
}
.centre{
text-align:center;
}
	
#outerWrapper {
  background-color: #222;
  color:#999;
  width: 960px;
  min-height:100%;
     
  text-align: left; /* Redefines the text alignment defined by the body element. */
  margin: 0 auto 0 auto; 
}
#outerWrapper #header {
  background-color: #222;
  line-height: 120%;
  font-size: 30px;
  padding: 20px 10px 10px 10px; 
  font-weight: normal;
  color:#999;
  border-bottom: solid 2px #999; 
}


#outerWrapper #topNavigation ul{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #fff;

width: 100%;
font: normal 130% arial, helvetica, sans-serif;

text-align: center;
}

li { 
display: inline;
margin:0 .2em;
font-size:16px;
text-decoration: none;
}
li a
{ 
padding: 3px 10px;
background-color: #222;
color: #999;
text-decoration: none;
}
a:link
{
color:#999;
background-color:#222;
text-decoration: none;
}
a:focus
{
	color:#fff;
}
li a:active
{
text-decoration: none;
background-color: #222; 
color: #fff;
}


#outerWrapper #contentWrapper #content {
  padding: 10px 10px 10px 10px; 
  margin: 0 0 0 0; 
  overflow:auto;
  padding-bottom: 44px;
  border-top:2px solid #999; 
    /* border-bottom:2px solid #999;*/
  border-color: #999;
  background-color:#222;
  color:#999;
  
}
#outerWrapper #contentWrapper #content #contact {
  padding: 10px 10px 10px 10px; 
  margin: 0 0 0 0; 
  overflow:auto;
  padding-bottom: 20px;
  border-color: #999;
  color:#000;
  background-color:#222;
  
}
form {
	margin:0;
	padding: 0;
}
.formbackground {
	background-color:#999;
	color:#000;
}
.inputbackground {
	background-color:#b4b4b4;
	}
	
#content a{
	color:#fff;
	text-decoration:none;
	}	
#content a:link{
	color:#999;
	 background-color:#222;
		}
#content a:visited{
	color:#999;
	 background-color:#222;
		}
#content a:hover{
	color:#fff;
}		

.white{
	color:#fff;
}
ul.a li{
	color: #999;
	list-style-type: disc;
	display: block;
	background-color: #222;
	font-size: 12px;
	list-style-position: outside;
	margin-left:40px;
	}
body#profile #content ul li{
	background-color:#222;
	color:#999;
}
#footer  a:link{
	color:#999;
	 background-color:#222;
	}
#footer a:visited{
	color:#999;
	 background-color:#222;
	}
#footer a:hover{
	color:#fff
	}
#footer a:active {outline:none;			
}	
 #footer {

  background-color: #222;
  border-top: solid 2px #999; 
  padding: 10px 10px 10px 10px;
  width: 960px;
  color:#999; 
   
  text-align:center;
  position:relative;
  margin:-44px auto 0 auto;/*negative value of footer height + top & bottom borders re stickyfooter code*/
  height:40px;
  clear:both;    
  }
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

/*end of file */

I had 17 or 18 CSS validation warnings, better than 70 + But on inspection a lot seemed to be wrong! I also use Lytebox but that is not relevant to the page where the UL is used.

Geoff

Dandello 8 Posting Whiz in Training · Answer 3 · 2011-10-14T06:33:14+00:00

Aside from getting the css validation squared away, without a page to look at and run Firebug or another page analyzer on, there's not much we can do. But at a guess this:

list-style-position: outside;

in the

ul.a li

may be pushing the markers under something else. Maybe

lps 71 Posting Pro in Training · Answer 4 · 2011-10-14T08:12:09+00:00

Agree with dandello. But I cannot help you specifically just by watching your css code. I need your html code as well to try it on my server in order to solve it(just the ul part)

Dandello 8 Posting Whiz in Training · Answer 5 · 2011-10-14T08:15:27+00:00

Dandello 8 Posting Whiz in Training

13 Years Ago

Or you can give us a link to the page in question. :)

Edited 13 Years Ago by Dandello because: n/a

ggeoff 4 Junior Poster- 72 years old :) · Answer 6 · 2011-10-14T23:26:43+00:00

Thanks guys!

I will remove the personal stuff from the html and post the page

Geoff

carrieathomer 0 Light Poster · Answer 7 · 2011-10-15T05:22:43+00:00

What i see skimming from your css.

You have set body background-color:#222;

#222 nearly looks like black, so there is a chance that your bullets are in a camouflage .

When you set the body background color to #222 it is pointless to set the same in all your containers and other tags.

and here in the following

#outerWrapper #topNavigation ul{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #fff;
 
width: 100%;
font: normal 130% arial, helvetica, sans-serif;
 
text-align: center;
}

set a class name for the UL and see. Like ul.menu and apply that class name in the HTML. It is just a try..

#outerWrapper #topNavigation ul.menu{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #fff;
 
width: 100%;
font: normal 130% arial, helvetica, sans-serif;
 
text-align: center;
}

ggeoff 4 Junior Poster- 72 years old :) · Answer 8 · 2011-10-19T01:52:44+00:00

What i see skimming from your css.
You have set body background-color:#222;
#222 nearly looks like black, so there is a chance that your bullets are in a camouflage .
When you set the body background color to #222 it is pointless to set the same in all your containers and other tags.
and here in the following
#outerWrapper #topNavigation ul{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #fff;
 
width: 100%;
font: normal 130% arial, helvetica, sans-serif;
 
text-align: center;
}
set a class name for the UL and see. Like ul.menu and apply that class name in the HTML. It is just a try..
#outerWrapper #topNavigation ul.menu{
 
padding:1em 0;
margin: 0px auto;
list-style-type: none;
background-color: #222;
color: #fff;
 
width: 100%;
font: normal 130% arial, helvetica, sans-serif;
 
text-align: center;
}

Thanks carrieathomer,

I have tested different colour schemes to remive this possibility

Geoff

ggeoff 4 Junior Poster- 72 years old :) · Answer 9 · 2011-10-19T01:55:27+00:00

sometime is the margin and padding problem where the bullet is hidden to left.

Thanks 1ps

did some alterations following your advice with no result

Geoff

ggeoff 4 Junior Poster- 72 years old :) · Answer 10 · 2011-10-19T01:57:43+00:00

No actually that may prove that you could have styled the list to remove the bullets, or you might have a box model issue...or a number of things.
As suggested, speculation is the best anyone can do without seeing your code or even better your live test site link.

Thanks teedoff

Useful observation!

Geoff

ggeoff 4 Junior Poster- 72 years old :) · Answer 11 · 2011-10-19T02:11:51+00:00

I have removed a number of declaration for color and background color as most of these are set in the body statement. However in removing most of the unnecssary declarations of color and background color one of which must have influenced matters as the bullets that are visible only in IE9 disappeared. Lytebox.css lists dozens of errors that are not of my making. So stil trying to move from Frontpage 2002 (no problems) to CSS styled websites I am at present stumped. My website

Thanks a million for the interest guys!

ggeoff 4 Junior Poster- 72 years old :) · Answer 12 · 2011-10-19T16:31:00+00:00

Forgot to add where the bullets are missing its the Profile page.

lps 71 Posting Pro in Training · Answer 13 · 2011-10-20T07:09:36+00:00

ok, problem solved. It is your

ul.a li

problem where you set the display to block. Try change that and it shall work fine.

ggeoff 4 Junior Poster- 72 years old :) · Answer 14 · 2011-10-20T16:55:00+00:00

ggeoff 4 Junior Poster- 72 years old :)

13 Years Ago

Hi lps

Thanks a million:)

Geoff