lists not showing bullets in html5 css - css

Question

I am using Dreamweaver to edit an HTML5 CSS site, but the bullets refuse to show up on lists. I don’t know whether the issue is Safari or the code for the site.
I have tried many suggestions and been unable to find a solution.
INDEX.HTML
<li id="page_donations">
<div class="contPad">
<div>
<h2>What we Do</h2>
<div class="scrollingDiv">
<ul class="list">
<li>
<div>
<h5>DESIGN</h5>
<p>Concept development, graphic design, web design, and logo design.</p>
</div>
</li>
<li>
<div>
<h5>MARKETING</h5>
<ul class="list">
<li>Identify, segment, or focus on your target market
<ul>
<li>Marketbridge can help you assess and narrow down your target market through a variety of traditional and non-traditional strategies including:
<ul>
<li>Market segmentation, database mining and development, leveraging market intelligence, conducting studies and consumer surveys among some of the strategies applied</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<div>
<h5>BRANDING</h5>
<p>Marketbridge's success will help drive our vision of cultivating a more cohesive professional and social network within businesses and communities which helps to fuel commerce and goodwill within our communities.</p>
</div>
</li>
<li>
<div>
<h5>PUBLIC RELATIONS</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
<li>
<div>
<h5>ADDITIONAL SERVICES</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
STYLE.CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
/* Left & Right alignment */
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
position:relative;
}
.box {
overflow:hidden;
}
.clear {
clear:both;
width: 100%;
}
.last {
background:none !important;
border:none !important;
}
.pad_0 {
padding:0 !important;
}
/* Global properties ======================================================== */
body, html, .extra, #left_bg{
height:100%;
min-width:1220px;
min-height:550px;
}
body {
overflow:hidden;
border:0;
font:14px/20px Arial, sans-serif;
color:#FFF;
background:url(../images/27.jpg) 0 0 repeat;
}
#left_bg{
position:absolute;
width:81px;
background:url(../images/27_left.jpg) 0 0 repeat-y;
z-index:-1;
}
/* Global Structure ============================================================= */
.extra {
overflow:hidden;
margin-bottom:-80px;
}
.main {
position:relative;
}
.page_spinner {
position:fixed;
background: url(../images/main_spinner.gif) 50% 50% no-repeat #fff;
z-index:99;
width:100%;
height:100%;
top:0;
left:0
}
/* ============================= main layout ====================== */
a {
color:#909090;
text-decoration: none;
outline:none;
}
a:hover {
color:#757575
}
h1 {
position:absolute;
padding:0 0 0 0;
}
h2 {
font:35px/35px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
padding-bottom:15px;
text-shadow: 1px 1px 6px #665d58;
}
h3{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#fff;
font-weight:700;
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
h4{
font:14px/20px Arial, sans-serif;
font-weight:normal;
text-shadow: 1px 1px 6px #665d58;
}
h5{
font:16px/16px 'Open Sans Condensed', sans-serif;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#fff;
text-decoration: none;
outline:none;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a:hover{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#757575
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
p{
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
.color1{
color:#74398e !important;
}
.color2{
color:#bd3274;
}
.color3{
color:#15b3f9;
}
V.color4{
color:#afbf44;
}
.color5{
color:#f8cc07;
}
.color6{
color:#ee8d1b;
}
.color7{
color:#e0191c;
}
.color8{
color:#000;
}
.color8 a {
color:#909090;
text-decoration: none;
outline:none;
}
color8 a:hover {
color:#757575
}
div.scrollingDiv
{
overflow-y:scroll;
height: 350px;
}
/* ============================= header ====================== */
header{
position:relative;
overflow:hidden;
width:1220px;
height:502px;
padding-top:145px;
}
#logo {
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width:235px;
height:153px;
background:url(../images/logo.png) 0 0 no-repeat;
}
/* ============================= menu ====================== */
#leftLines{
float:left;
width:81px;
height:502px;
background:url(../images/left_menu_line.png) 0 0 no-repeat;
}
.menu {
float:left;
width:1139px;
height:502px;
}
#menu{
padding-top:121px;
}
#menu > li {
height:27px;
display:block;
margin-bottom:11px;
}
#menu > li > span{
display:inline-block;
width:50px;
height:27px;
}
#menu > li a {
position:relative;
top:-1px;
left:-3px;
font:34px/28px 'Impact', sans-serif;
text-transform:uppercase;
font-weight:normal;
}
#item1 > span{
background:url(../images/menu_line1.png) 0 0 repeat-x;
}
#item2 > span{
background:url(../images/menu_line2.png) 0 0 repeat-x;
}
#item3 > span{
background:url(../images/menu_line3.png) 0 0 repeat-x;
}
#item4 > span{
background:url(../images/menu_line4.png) 0 0 repeat-x;
}
#item5 > span{
background:url(../images/menu_line5.png) 0 0 repeat-x;
}
#item6 > span{
background:url(../images/menu_line6.png) 0 0 repeat-x;
}
#item7 > span{
background:url(../images/menu_line7.png) 0 0 repeat-x;
}
/* ============================= pages ====================== */
#page_home, #page_privacy, #page_more{
background:url(../images/page1_top_line.png) 0 0 repeat-x;
}
#page_mission{
background:url(../images/page2_top_line.png) 0 0 repeat-x;
}
#page_donations{
background:url(../images/page3_top_line.png) 0 0 repeat-x;
}
#page_news{
background:url(../images/page4_top_line.png) 0 0 repeat-x;
}
#page_reports{
background:url(../images/page5_top_line.png) 0 0 repeat-x;
}
#page_links{
background:url(../images/page6_top_line.png) 0 0 repeat-x;
}
#page_contacts{
background:url(../images/page7_top_line.png) 0 0 repeat-x;
}
/* ============================= content ====================== */
#content {
position:absolute;
top:160px;
padding:5px 0px 12px 0px;
width:711px;
height:453px;
background:url(../images/page_plane.png) 0 0 no-repeat;
z-index:5;
}
#content > ul {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
#content > ul > li {
position:absolute;
width:100%;
height:584px;
padding-top:24px;
left: -26px;
top: -18px;
}
.contPad{
padding:0px 30px 0 40px;
}
.padBot1{
padding-bottom:40px;
}
.padBot2{
padding-bottom:25px;
}
.padTop1{
padding-top:20px;
}
.rBorder{
background:url(../images/content_step_line.png) right 0 repeat-y;
}
.more1, .more2{
position:relative;
margin-top:12px;
display:inline-block;
color:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
transition:color 0.5s ease;
padding:7px 14px 10px;
font:18px/ 18px 'PT Sans Narrow', sans-serif;
font-weight:700;
text-shadow: 1px 1px 0px #665d58;
border-top:1px solid #646464;
border-right:1px solid #646464;
background:url(../images/more_1.png) 0 0 repeat-x;
}
.more1:hover{
color:#febe3b;
}
.more2{
margin-top:0px;
padding:5px 14px 8px;
font:22px/ 22px 'PT Sans Narrow', sans-serif;
font-weight:300;
letter-spacing:1px;
text-shadow: 1px 1px 0px #14b1f6;
border-top:1px solid #14b1f6;
border-right:1px solid #14b1f6;
background:url(../images/more_2.png) 0 0 repeat-x;
}
.more2:hover{
color:#3b3019;
}
.imgBot{
padding-bottom:16px;
}
#table1{
margin-bottom:35px;
height:253px;
border-bottom:1px solid #a6a6a6;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#tableHeader{
background-color:#15b3fa;
}
#tableHeader, #table1 .col1{
font-size:14px;
color:#151515;
font-weight:bold;
text-transform:uppercase;
}
#table1 #tableHeader td{
height:41px;
}
#table1 .anotherColor{
background-color:#efeff0;
}
#table1 td{
height:30px;
}
#table1 tr{
vertical-align:middle;
}
#table1 .col1{
border-left:1px solid #e9e9e9;
border-right:1px solid #c9c9ca;
width:43px;
text-align:center;
}
#table1 .col2{
width:440px;
text-indent:20px;
}
#table1 .col3{
border-left:1px solid #c9c9ca;
border-right:1px solid #e9e9e9;
width:149px;
text-align:center;
}
#page1_top{
padding:25px 0px 0px 45px;
width:560px;
height:200px;
background:url(../images/page1_pic1.) 0 0 no-repeat;
}
#page1_top > div{
padding-bottom:13px;
font:34px/ 34px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:300;
text-shadow: 1px 1px 6px #665d58;
}
#page1_top > div > span{
display:block;
font:50px/ 50px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
}
.google_map{
float:left;
width: 360px;
height: 180px;
background: #fff;
}
.address {
width:230px;
padding-left:20px;
float:left;
}
.address > span{
display:block;
width:160px;
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.mailLink{
color:#e0191c;
text-decoration:none;
}
.mailLink:hover{
text-decoration:underline;
}
/* ============================= lists ====================== */
.list1 li{
overflow:hidden;
width:270px;
padding-bottom:20px;
}
.list1 li > img{
float:left;
padding-right:10px;
}
.list1 li > ul{
overflow:hidden;
padding-top:7px;
width:178px;
}
.list2 li{
overflow:hidden;
padding-bottom:8px;
}
.list2 li > img{
float:left;
padding-right:18px;
}
.list2 li > div{
float:left;
overflow:hidden;
width:224px;
}
.list2 li > div a:hover{
text-decoration:underline;
}
.list3 li{
padding-bottom:17px;
}
.list3 li > img{
padding-bottom:16px;
}
.list3 li a{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.list3 li a:hover{
text-decoration:underline;
}
.list4{
margin-bottom:-10px;
}
.list4 li{
overflow:hidden;
padding-bottom:10px;
}
.list4 li > img{
float:left;
padding-right:20px;
}
.list4 li > div{
float:left;
overflow:hidden;
width:354px;
}
.list5 li{
padding-bottom:11px;
}
.list5 p{
line-height:18px;
padding-bottom:8px;
}
.list5 a{
font-size:13px;
font-weight:bold;
color:#ff6400;
}
.list5 a:hover{
text-decoration:underline;
}
.listWithMarker1 li, .listWithMarker2 li {
display:block;
padding-bottom:4px;
}
.listWithMarker1 li a, .listWithMarker2 li a {
display:inline-block;
padding:0 5px 0 17px;
text-decoration:underline;
}
.listWithMarker1 li a, .listWithMarker2 li a {
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
-o-transition:color 0.3s ease;
transition:color 0.3s ease;
}
.listWithMarker1 li a {
color:#ff2a29;
background:url(../images/list_marker_1.png) 0 5px no-repeat;
}
.listWithMarker2 li a {
color:#feb829;
background:url(../images/list_marker_2.png) 0 5px no-repeat;
}
.listWithMarker1 li a:hover, .listWithMarker2 li a:hover {
color:#757575;
}
/* ============================= footer ====================== */
footer{
position:relative;
width:1100px;
font:15px/ 15px 'Open Sans Condensed', sans-serif;
color:#757575;
font-weight:700;
text-align:center;
text-transform:uppercase;
}
footer a{
text-decoration:none;
color:#c2c2c2;
}
footer ul{
padding-top:9px;
}
footer ul li{
display:inline-block;
padding-right:1px;
}
#icon1, #icon2{
display:block;
width:31px;
height:31px;
}
#icon1{
background:url(../images/icon1.png) 0 0 no-repeat;
}
#icon2{
background:url(../images/icon2.png) 0 0 no-repeat;
}
/* ============================= forms ============================= */
#form1 input {
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:15px 0 15px 17px;
width:252px;
box-shadow:none;
}
#form1 textarea {
resize: none;
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:14px 0 5px 17px;
width:330px;
height:92px;
overflow:auto;
line-height:18px;
}
#form1 label {
position:relative;
display:inline-block;
min-height:60px;
}
#form1 .error, #form1 .empty {
position:relative;
top: -3px;
display:none;
font-size:10px;
color:#414040;
text-transform:none;
}
.btns{
float:right;
}
.btns a{
margin:18px 0 0 13px;
}
/* Form defaults */
input, select, textarea {
font:14px/20px Arial, sans-serif;
color:#909090;
}
.blacktext {
color: #000;
}
.fb {
vertical-align: middle;
padding:40px 40 40px 40px;
}
RESET.CSS
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var {
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style-position:inside;
list-style: circle;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
* { border:none}
input, textarea{ outline:none !important}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure,
footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{
display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
LAYOUT.CSS
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
float: left;
}
.rightIndent{
padding-right:10px;
}
.rightIndent1{
padding-right:40px;
}
.rightIndent2{
padding-right:50px;
}
.leftIndent1{
padding-left:40px;
}
.leftIndent2{
padding-left:40px;
}
.height1{
}
.grid_1 {
width:30px;
}
.grid_2 {
width:70px;
}
.grid_3 {
width:110px;
}
.grid_4 {
width:150px;
}
.grid_5 {
width:190px;
}
.grid_6 {
width:230px;
}
.grid_7 {
width:270px;
}
.grid_8 {
width:310px;
}
.grid_9 {
width:350px;
}
.grid_10 {
width:390px;
}
.grid_11 {
width:430px;
}
.grid_12 {
width:470px;
}
.grid_13 {
width:510px;
}
.grid_14 {
width:550px;
}
.grid_15 {
width:590px;
}
.grid_16 {
width:630px;
}
.grid_17 {
width:670px;
}
.grid_18 {
width:710px;
}
.grid_19 {
width:750px;
}
.grid_20 {
width:790px;
}
.grid_21 {
width:830px;
}
.grid_22 {
width:870px;
}
.grid_23 {
width:910px;
}
.grid_24 {
width:950px;
}

Answer 1

Having scotch-taped your code snippets together, I see two reasons for your disappearing bullets: first of all, make sure that the lists have a sufficient margin on the left to actually display the bullets (20px should be enough) and, if the little buggers are still hiding (such as is the case in your example, white text on a white background?), give the list some color. Something like this:
ul.list{
margin-left: 20px;
color: deeppink;
}
You're still going to face the problem that the bullets don't have a text-shadow, for which I cannot give you a quick and dirty answer. Personally, I'd hide the bullets, give my list-items some padding and stick a properly styled background-image in there.

Answer 2

I know this is an old question, but since I had the same issue and resolved it after seeing this, I figured I'd answer the question for someone else.
If you use CSS3 property
display:block;
for list items, the list-style / list-style-type properties will be ineffective. See http://www.w3schools.com/tags/tag_li.asp
Remove display:block; or reset to display: list-item;