bullets missing in UL

[ggeoff]

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

[carrieathomer]

in your CSS file

check for

ol, ul {
	list-style: none;
}

remove it

[carrieathomer]

even check

li{ list-style:none}

[lps]

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

[ggeoff]

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

[carrieathomer]

paste your complete CSS file.

Do you have internal and inline stylesheet as well?

[teedoff]

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.

[ggeoff]

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]

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]

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]

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

[ggeoff]

Thanks guys!

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

Geoff

[carrieathomer]

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]

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]

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]

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]

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]

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

[lps]

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]

Hi lps

Thanks a million:)

Geoff