1,105,380 Community Members

bullets missing in UL

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
carrieathomer
Light Poster
37 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

in your CSS file

check for

ol, ul {
	list-style: none;
}

remove it

Member Avatar
carrieathomer
Light Poster
37 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

even check

li{ list-style:none}
Member Avatar
lps
Posting Whiz in Training
208 posts since Jul 2011
Reputation Points: 3 [?]
Q&As Helped to Solve: 43 [?]
Skill Endorsements: 2 [?]
 
0
 

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

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
carrieathomer
Light Poster
37 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

paste your complete CSS file.

Do you have internal and inline stylesheet as well?

Member Avatar
teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 3 [?]
Q&As Helped to Solve: 60 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Dandello
Posting Whiz in Training
258 posts since May 2010
Reputation Points: 8 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
lps
Posting Whiz in Training
208 posts since Jul 2011
Reputation Points: 3 [?]
Q&As Helped to Solve: 43 [?]
Skill Endorsements: 2 [?]
 
0
 

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)

Member Avatar
Dandello
Posting Whiz in Training
258 posts since May 2010
Reputation Points: 8 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks guys!

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

Geoff

Member Avatar
carrieathomer
Light Poster
37 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

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;
}
Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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!

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
lps
Posting Whiz in Training
208 posts since Jul 2011
Reputation Points: 3 [?]
Q&As Helped to Solve: 43 [?]
Skill Endorsements: 2 [?]
 
0
 

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.

Member Avatar
ggeoff
Posting Whiz in Training
249 posts since Aug 2007
Reputation Points: 4 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi lps

Thanks a million:)

Geoff

Question Answered as of 2 Years Ago by carrieathomer, lps, Dandello and 1 other
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: