what is this bullet point <li> not showing up with circles? - html

Question

I'm trying to show some bullet point list circles on my webpage, but it doesn't seem to show, and I tried using firebug but I can't find what's wrong, I went through my whole css file, and I don't see where the problem is, i want the list to be vertical with circles!
Please can you help me, here is the code :
/* Browser resets. */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 1em;
font-family: inherit;
vertical-align: baseline;
line-height: 1.5em;
}
#fancy_ajax .note{ cursor:default; }
/* Three styles for the notes: */
.yellow{
background-color:#FDFB8C;
border:1px solid #DEDC65;
}
.blue{
background-color:#A6E3FC;
border:1px solid #75C5E7;
}
.green{
background-color:#A5F88B;
border:1px solid #98E775;
}
/* Each note has a data span, which holds its ID */
span.data{ display:none; }
/* Green button class: */
a.green-button,a.green-button:visited{
color:black;
display:block;
font-size:10px;
font-weight:bold;
height:15px;
padding:6px 5px 4px;
text-align:center;
width:60px;
text-shadow:1px 1px 1px #DDDDDD;
background:url(../img/button_green.png) no-repeat left top;
}
a.green-button:hover{
text-decoration:none;
background-position:left bottom;
}
.author{
/* The author name on the note: */
bottom:10px;
color:#666666;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
position:absolute;
right:10px;
}
#main{
/* Contains all the notes and limits their movement: */
margin:0 auto;
position:relative;
width:980px;
height:500px;
z-index:10;
background:url(img/add_a_note_help.gif) no-repeat left top;
}
h3.popupTitle{
border-bottom:1px solid #DDDDDD;
color:#666666;
font-size:24px;
font-weight:normal;
padding:0 0 5px;
}
#noteData{
/* The input form in the pop-up: */
height:200px;
margin:0px 0 0 0px;
width:350px;
}
.note-form label{
display:block;
font-size:10px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
padding-bottom:3px;
}
.note-form textarea, .note-form input[type=text]{
background-color:#FCFCFC;
border:1px solid #AAAAAA;
font-family:Arial,Verdana,sans-serif;
font-size:19px;
font-weight: bold;
height:60px;
padding:5px;
width:300px;
margin-bottom:0px;
}
.note-form input[type=text]{ height:auto; }
.color{
/* The color swatches in the form: */
cursor:pointer;
float:left;
height:10px;
margin:0 5px 0 0;
width:10px;
}
#note-submit{ margin:20px auto; }
body {
height:100%;
background-color: white;
font-size: 14px;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* custom selection colors */
::-moz-selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
::selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
/* Links */
a {
text-decoration: none;
color: #19558D;
font-size: inherit;
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
background-color: inherit;
color: #336699;
}
a img {
border: none;
}
/* Input fields + label */
input, textarea {
border: 1px solid #999999;
padding: 5px;
}
label {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0pxpx;
width: 120px;
font-size: 22px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
#error {
font-size: 14px;
}
/* Lists */
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display:inline;
}
li a {
margin-left: inherit;
}
#like_text {
float: left;
color: #0099CC;
cursor: pointer;
font-size: inherit;
}
.like_list_element {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
}
.like_list_element:hover {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
background-color: #EDEDED;
}
.micro_avatar {
float: left;
width: 30px;
height: 30px;
margin-right: 15px;
margin-top: -7px;
padding: 2px;
background-color: #ffffff;
-moz-box-shadow: 2px 2px 4px #D1D1D1;
-webkit-box-shadow: 2px 2px 4px #D1D1D1;
box-shadow: 2px 2px 4px #D1D1D1;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* "Super" headline */
h1 {
font-weight: bold;
font-style: italic;
font-size: 38px;
color: #666666;
font-family: Georgia, "Times new roman", serif;
}
/* "Medium (bold)" headline */
h2 {
font-size: 20px;
font-weight: bolder;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* Normal headline (used on profile page) */
.normal_headline {
font-size: 22px;
float: left;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* "Standard" headline */
h3 {
font-size: 15px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* page structure */
/* Container - main content goes here */
#container {
min-height: 100%;
height:100%;
width: 897px;
margin-bottom: 30px;
margin: 0 auto;
}
/* Left (main) content */
#left_content {
float: left;
width: 485px;
font-size: 1em;
padding-left: -15px;
}
ul.statuses{
margin:10px 0;
}
ul.statuses li {
position:relative;
padding:15px 15px 15px 10px;
list-style:none;
font-size:12px;
}
div.tweetTxt{
float:left;
width:400px;
overflow:hidden;
}
ul.statuses a img.avatar{
float:left;
margin-right:10px;
border:1px solid #446600;
}
div.date{
line-height:18px;
font-size:10px;
color:#999999;
}
.question_link{
float:left;
font-weight: bold;
margin-left:40px;
color:blue;
}
#answerText {
float:left;
width:480px;
margin-left:40px;
margin-bottom: 5px;
}
#answerText ul{
margin-left:40px;
}
#answerText li {
list-style-type: circle;
font-size:30px;
}
.answerActions {
float:left;
margin-left:40px;
font-size:9px;
}
.thanks{
font-weight:bold;
}
.content{
float:left;
}
/* Used for seperating content eg. Timeline && photos */
.left_content_seperator {
width: 485px;
float: left;
border-bottom: 1px solid #999999;
margin-top: 15px;
margin-bottom: 30px;
height: auto;
}
/* Used in eg. postphoto.php */
.big_content_seperator {
width: 897px;
float: left;
border-bottom: 1px solid #999999;
margin-bottom: 30px;
}
/* Right side content */
.right_content {
float: right;
width: 200px;
font-size: 14px;
margin-right:80px;
}
/* Used for seperating content eg. Timeline && photos */
.right_content_seperator {
width: 200px;
float: right;
margin-top: 33px;
margin-bottom: 15px;
}
.right_content_seperator_home {
width: 200px;
float: right;
margin-top: 25px;
margin-bottom: 15px;
}
/* For footer + header (outside the main container) */
.small_container {
margin: 0 auto;
width: 900px;
}
/* The bar on the top of the page */
.top_bar {
width: 100%;
height: 50px;
margin-bottom: 30px;
background:none repeat scroll 0 0 black;
}
#search {
width: 502px;
padding: 10px;
height:20px;
margin: 10px 0px 0px -30px;
background-color:#505759;
float:left
}
.question_box{
background: none repeat scroll 0 0 #FFFFFF;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
border-style: solid;
border-width: 1px;
color: #000000;
font: 16px arial,sans-serif;
margin: -5px 0px 0px -5px;
padding: 5px 8px 0px 6px;
width:380px;
height:25px
}
input.blur {
color: #999;
}
#search a {
color: #E5E5E5;
text-decoration: none;
font-weight: bold;
}
#search a:hover {
text-decoration: underline;
}
/* Logotype container */
.logotype {
background-color:#671E1E;
font-size: 20px;
float: left;
color:white;
padding:10px;
margin: 10px 30px 0px 0px;
}
/* The menu on the top of the page */
.top_menu {
float: right;
text-align: right;
background-color: inherit;
color: #ffffff;
margin: 15px 0px 0px 0px;
}
.top_menu a {
color: #E5E5E5;
text-decoration: none;
}
.top_menu a:hover {
text-decoration: underline;
color: inherit;
}
/* Main content + form container on the front page */
.text_box {
margin: 0 auto;
margin-top: 70px;
text-align: center;
width: 590px;
}
/* Box for the iPhone image on the front page */
.iphone_promo {
margin: 0 auto;
margin-top: 70px;
margin-bottom: 30px;
text-align: center;
width: 590px;
}
/* Red arrow next to the iPhone picture */
.arrow {
margin: 0 auto;
margin-left: 210px;
margin-bottom: -145px;
}
/* Typography */
.small_copy {
font-size: 12px;
}
#menu_list ul{
}
#menu_list li{
}
.not_selected {
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
color: #444444;
cursor: default;
}
.not_selected:hover{
background-color:lightblue;
}
.selected{
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
background-color: #E0E0E0;
color: #444444;
cursor: default;
}
#menu_list li{
margin-left: inherit;
}
.right_seperator {
width: 200px;
float: left;
border-bottom: 1px dotted #999999;
margin-top: 15px;
margin-bottom: 10px;
height: auto;
}
.light_gray_serif {
font-family: Georgia, "Times new roman", serif;
font-size: inherit;
color: #999999;
font-size: 14px;
}
/* Forms */
#email_form {
width: 285px;
height: 40px;
font-size: 22px;
margin-right: -1px;
outline: none;
font-weight: bold;
color: #999999;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: left;
}
#submit_button {
width: 295px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#username_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
#password_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
.standard_big_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
/* Big login button */
#login_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#login_button:active {
position: relative;
top: 1px;
}
/* Standard buttons */
.big_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
.big_button:active {
position: relative;
top: 1px;
}
.profile_name_container {
width: auto;
}
.follow_container {
float: left;
width: auto;
margin-top: 7px;
margin-left: 15px;
}
.follow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.follow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.unfollow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.unfollow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.push_footer {
margin-bottom: 200px;
}
/* Footer (container) of the page */
.footer {
float: left;
margin-top: 30px;
padding-bottom: 15px;
width: 897px;
height: 49px;
border-top: 1px solid #999999;
}
/* "Photoblogging through events." text. */
.footer_info {
font-size: 14px;
float: left;
margin-top: 15px;
}
/* The link to 'Support & Feature requests' */
.footer_link {
font-size: 14px;
float: right;
margin-top: 15px;
}
/*** Colors ***/
/* Blue gradient (css gradients, #336699 is used for IE and older browsers) */
.blue_gradient {
background: #336699;
background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#336699));
background: -moz-linear-gradient(top, #0099CC, #336699);
}
/* Yellow gradient (for button) #FBAA33 = orange */
.yellow_gradient {
background: #FBAA33;
background: -webkit-gradient(linear, left top, left bottom, from(#FBF16E), to(#FBAA33));
background: -moz-linear-gradient(top, #FBF16E, #FBAA33);
}
.yellow_gradient:hover {
background: #F6D05A;
}
/* Image design */
.photo {
float: left;
min-width: 200px;
min-height: 200px;
padding: 5px;
margin-right: 15px;
margin-bottom: 15px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.photo_thumbnail:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.big_photo_container {
text-align: center;
width: 666px;
margin-bottom: 15px;
}
.event_name {
height: 20px;
margin-right: 5px;
width: 169px;
float: left;
}
.trash_can {
height: 17px;
width: 14px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 3px;
padding-left: 2px;
float: right;
}
.trash_can:hover {
cursor: pointer;
margin: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
}
/* Image design */
.big_photo {
margin-top: 15px;
max-width: 656px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.profile_photo {
float: left;
width: 50px;
height: 50px;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
background-color: #ffffff;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
-moz-border-radius: 5px;
border-radius: 5px;
}
.profile {
padding-top: 15px;
}
/* Heart sign */
.fav {
margin-left: 0px;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px 4px;
}
.fav:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED;
}
.highlight {
margin-left: 0px;
color: #0099CC;
cursor: pointer;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px -13px;
}
.highlight:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px 4px #EDEDED;
}
/* Heart sign */
.likes {
font-size: inherit;
}
/* Views */
.views {
padding-left: 20px;
float: right;
}
/* Costum */
/* Removes underlines for eg. buttons */
.no_underline:hover {
text-decoration: none;
}
/* Margins */
.small_margin_top {
margin-top: 15px;
}
.negative_margin_top {
margin-top: -4px;
}
.custom_margin_top {
margin-top: 48px;
}
.no_margin_left {
margin-left: 0px;
}
.no_margin_top {
margin-top: 0px;
}
/* Paddings */
.no_padding_top {
padding-top: 0px;
}
.normal_font_weight {
font-weight: normal;
}
.photo_label {
margin-right: auto;
padding-left: 6px;
text-align: left;
}
/* button basics */
a.minibutton {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:11px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.minibutton>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.minibutton:hover, a.minibutton:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}
a.minibutton.mousedown{background-position:0 -60px; }
a.minibutton.mousedown>span{background-position:100% -60px; }
/* answer button */
a.answer {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:18px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.answer>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.answer:hover, a.answer:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.answer:hover>span, a.answer:focus>span {background-position:100% -30px;}
a.answer.mousedown{background-position:0 -60px; }
a.answer.mousedown>span{background-position:100% -60px; }
/* with icon */
a.btn-download .icon {
float:left;
margin-left:-4px;
width:18px;
height:22px;
background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;
}
a.btn-download .icon {background-position:-20px 0;}
a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-20px -25px;}
#profile_pic{
padding:5px;
border:1px #AAAAAA solid;
float:left;
}
ul.stats{
width:auto;
float:left;
display:inline;
margin: 20px 0px 0px 0px;
}
ul.stats li{
display:inline-block;
text-align:left;
}
.stats_number{
font-weight:bold;
font-size:10px;
}
.stats_text{
font-size:9px;
color:#505759;
}
ul.followingBar{
width:auto;
float:left;
margin: 0px 0px 0px 0px;
}
.watchingTopics{
float:left
}
ul.followingBar li{
display:block;
margin: 10px 0 0 0 ;
border-bottom:1px #999999 solid;
}
.topicFollow{
padding-bottom:10px;
font-weight:bold;
float:left;
}
.related_questions{
padding-bottom:10px;
font-weight:bold;
}
.panel
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; padding:6px; width:400px;
display:none; float:left;
}
.load_comment
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:auto; padding:6px; width:400px; font-size:12px;
float:left;
}
.flash_load
{
margin-left:50px; margin-right:50px; margin-bottom:5px;height:20px; padding:6px; width:400px;
display:none; }
.loadplace{
margin-top:70px;
}
<ul class="statuses">
<li>
<div id="answerText">
<ul>
<li>google</li>
<li>yahoo</li>
<li>quora</li>
</ul>
</div>
</li>
</ul>

Answer 1

li only gets its list-style-related styles applied if it has display: list-item

Answer 2

Your style for <li> is wrong:
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display: inline;
}
should be
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
}

Answer 3

Try ensuring there are no:
list-style-type: none;
in your css file.

Answer 4

You attributed display:inline; to the LI tag, which explains why they're showing up horizontally instead of vertical. Get rid of that attribute.

Answer 5

I found that having overflow-x: hidden; (which I had applied to *) was hiding my bullets.

Answer 6

list not display bullet points
list-style-type:none;
Hey , you may have a problem in selector for example we have this code for list
some text
soke text
so our css code become like this
#ls{ list-style-type: circle;}
select with id value if you have multiple list .

Answer 7

My issue was caused by:
::marker {
content: none;
}
I was able to resolve by updating the CSS for my element to include:
li::marker {
content: initial;
}