Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
Medium Priority
?
1,188 Views
Last Modified: 2012-05-06
Cannot get the bullets to show in unordered list. The cause is because it is inside a table td which is inside a div. How do i make the circle bullet show up for each list item. I would like to do this in css.

The basic structure is
<body>
<div class="main">
<div class="marg">
<div class="dt content_1">
<table><tr><td><ul><li></li></ul></td></tr></table>
</div>
</div>
</div>
</body>

<tr>
        <td><br/><strong><font color="#000000"><span style="text-decoration:underline;">Advantages:</span></font>
            <ul type="circle">
                  <li><strong>RC D&D 3 thoroughly cleans workstring, casing, riser, and surface equipment prior to completion operations.  Its use reduces or eliminates the need for filtering brine completion fluids.</strong></li><br/><br/>
                  <li><strong>When used as directed and tested according to the U.S. Environmental Protection Agencys Static Sheen Test, RC D&D 3 does not form or create a sheen on the surface of receiving waters.</strong></li>
            </ul>
        </td>
      </tr>

Open in new window

0
Comment
Question by:techpr0
13 Comments
 
LVL 16

Expert Comment

by:Robin
ID: 24029972
You should be able to set it in css via

list-style-type: disc;

See http://www.w3schools.com/CSS/pr_list-style-type.asp

0
 

Author Comment

by:techpr0
ID: 24030071
I have tried this solution prior to the request.
This would only worked when using outside of the table and div.

This is the reason I put the structure and stated that it was inside of a table in  the main question. Sorry if I wasn't clear on this from the beginning
0
 
LVL 16

Expert Comment

by:Robin
ID: 24030210
Can you show us the css, especially for the classes (main, marg, dt content_1)
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Philip_Spark
ID: 24030476
Why do you specifically need the tables?
0
 
LVL 16

Expert Comment

by:Robin
ID: 24030514
Because probably some css code is overruling the specified type="circle".

I do see the bullets. And that's because I don't have your css files (yet).
Try disabling the css in your page. It should show the bullets again.
0
 

Author Comment

by:techpr0
ID: 24030954

.main { width:725px; margin:auto;background-color: #ffffff; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid;  }
 
.marg{margin:0px 0 6px 0;background-color: #ffffff;}
 
.content_1{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color: #000000;
	background:url(images/bgr_2.jpg) top repeat-x;
	background-color:#FFFFFF;
	width:727px;
	height:275px;
	padding:5px 25px 10px 30px;
	BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid;
	
}

Open in new window

0
 
LVL 16

Expert Comment

by:Robin
ID: 24031059
I still see bullets in IE7 and FF3.

Do you have this page online for us to look at? Or post all the css code?
0
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24031085
I can't get it to go wrong either.
I did notice, however, that you have not closed a <strong> tag. As <strong> can contain only inline elements, and <ul> is a block-level element, this may be causing a problem rendering in fussy browsers. Try validating your markup. It can often highlight the causes of strange behaviour.
0
 

Author Comment

by:techpr0
ID: 24031167
The page can be viewed here:
http://www.techprotest.com/rigchem/products/rcdd3.html
Under advantages it should be a bulleted list.

* {
	margin:0; padding:0;
}
 
body{
	background-color: #ffffff;
	background-image: url(images/bg_center.gif);
	height:100%;
	text-align:center;
}
 
html{ height:100%}
.maxheight { height:100%;}
 
input, textarea{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color:#4D4237;
	padding:1px 0 0 7px;
}
input{ width:195px; height:20px; border:1px solid #ACACAC;}
textarea{ width:195px; height:70px; border:1px solid #ACACAC;}
 
.hi{ width:205px; height:25px; margin:0; padding:0;}
 
 
img { border:0px;}
 
.dt { display:table; width:100%;}
 
.dr {
	display:table-row;
	width:100%;
	height:100%;
	
}
 
ul { list-style:square;}
 
.spacer{
	height:10px;
	width: 500px;
	}
 
.mainText {
	display:table-row;
	width:100%;
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
 
.textContact {
	display:table-row;
	width:100%;
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2px;
}
 
.dc { display:table-cell; text-align:left; vertical-align:top; width:100%; }
 
.main { width:725px; margin:auto;background-color: #ffffff; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid;  }
.marg{margin:0px 0 6px 0;background-color: #ffffff;}
.marg_1{margin:51px 0 0 30px;}
.marg_h{ padding:30px 0 0 30px;}
.marg_f{ padding:18px 5px 0 402px;}
.marg_2{ padding:5px 25px 10px 30px;}
.marg_3{ padding:13px 20px 0 0;}
.marg_2_1{ padding:25px 25px 20px 30px;}
.marg_2_2{ padding:30px 60px 0 30px;}
.marg_2_3{ padding:27px 0 0 0;}
.marg_2_4{ padding:30px 20px 0 0;}
.marg_4{ padding:27px 58px 0 30px;}
.marg_4_1{ padding:27px 20px 0 0;}
.marg_4_2{ padding:30px 0 0 30px;}
.marg_5{ padding:0px 10px 0 30px;}
 
.h1{
font-style:italic;
font-size:21px;}
 
.tablecenter{
text-align:center;}
 
.header{
	font:10px/12px tahoma, arial, helvetica, sans-serif;
	color:#727272;
	width:725px;
	height:107px;
	background:url(images/bgr_head.jpg) top repeat-x;
	margin:0; padding:0;
}
.head_up{ width:725px; height:107px;}
.head_left{ width:502px; padding:39px 0 0 30px;}
.head_right{ width:223px; padding:47px 0 0 0;}
.head_menu{ width:725px; height:62px;}
.head_he{ height:107px;}
/*content*/
.content{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color:#4A331A;
	width:725px;
	height:275px;
	
}
 
.content_left{ width:272px; background:url(images/tal.jpg) right top repeat-y; float:left;}
.content_bg{ background:url(images/bgr_1.jpg) right top no-repeat; }
.hig{ height:192px;}
 
.content_right{ width:453px; float:right;}
/*end content*/
/*h*/
.h{
	 width:727px;
	 height:27px;
	 background:url(images/bgr_h.jpg) top left repeat-x;
	 text-align:left;
	 BORDER-RIGHT: black 1px solid;BORDER-left: black 1px solid;
}
 
/*end h*/
/*content_1*/
.content_1{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color: #000000;
	background:url(images/bgr_2.jpg) top repeat-x;
	background-color:#FFFFFF;
	width:727px;
	height:275px;
	padding:5px 25px 10px 30px;
	BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid;
	
}
.content_1 strong{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color: #4D4237;
	font-weight:bold;
}
.content_1_left{ width:242px; height:159px; padding:26px 0 0 30px}
.content_1_c{ width:241px; height:159px; padding:26px 0 0 0;}
.content_1_r{ width:182px; height:159px; padding:28px 30px 0 0;}
/*---*/
.content_2_left{ width:422px; height:159px;}
.content_2_right{ width:303px; height:159px;}
/*---*/
.content_3_left{ width:405px; height:159px;}
.content_3_right{ width:320px; height:159px;}
/*---*/
.content_4_left{ width:364px; height:159px;}
.content_4_right{ width:361px; height:159px;}
/*---*/
.content_5_left{ width:489px; height:159px;}
.content_5_right{ width:236px; height:159px;}
.wiz_5{ width:205px;}
/*end content_1*/
.footer{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	text-align:center;
	color:#000000;
	text-transform:uppercase;
	width:727px;
	height:66px;
	background:url(images/bgr_foot.jpg) top repeat-x;
	BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid;
	
}
.footer b{ text-decoration:underline; font-weight:normal;}
/**/
 
li{
/*<!--list-style:url(images/dot_1.jpg) inside;-->*/
	color:#4D4237;
	padding:2 0 0 5px;
	background-repeat: no-repeat;
	background-position: left center;
	font-size:12px;
}
li a {line-height:18px; color:#4D4237; text-decoration:none; }
li a:hover {text-decoration:underline;}
.col{ color: #FF0000;}
/**/
.links{
	font:10px/12px tahoma, arial, helvetica, sans-serif;
	color:#727272;
	text-transform:uppercase;
	text-decoration:none;
}
.links:hover{
	text-decoration:underline;
}
.links_m{
	background:url(images/bgr_more.jpg) center left no-repeat; padding:2px 22px 2px 6px;
	font:10px/12px tahoma, arial, helvetica, sans-serif;
	color:#9B3700;
	text-transform:uppercase;
	text-decoration:none;
	float:right;
}
.links_m:hover{
	text-decoration:underline;
}
.link_1{
	color:#9B3700;
	text-transform:uppercase;
	text-decoration:none;
	float:right;
}
.link_1:hover{
	text-decoration:underline;
}
.link_1_1{
	color:#9B3700;
	text-transform:uppercase;
	text-decoration:none;
}
.link_1_1:hover{
	text-decoration:underline;
}
 
.link_2{
	color:#CE7412;
	text-decoration:underline;
}
.link_3{
	color:#4D4237;
	text-decoration:underline;
}
.link_3:hover{
	text-decoration:none;
}
 
.link_2:hover{
	text-decoration:none;
}
.links_foot{
	font:11px/14px tahoma, arial, helvetica, sans-serif;
	color:#000000;
	text-transform:uppercase;
	text-decoration:none;
}
.links_foot:hover{
	text-decoration:underline;
}
 
.style6 {
	font-family: JaneAusten;
	font-size: 18px;
	color: #666666;
}
.style1 {
	font-size: 14px;
}
 
table.form
{
background-color:#F0F0F0;
border-bottom:1px solid #FF9900;
border-top:1px solid #FF9900;
border-left:1px solid #FF9900;
border-right:1px solid #FF9900;
}
 
table.ul {margin:0; padding:0; list-style:circle;}
 
form
{
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
form label
{
font-size:12px;
}
 
.contactusheading
{
font-weight:bold;
font-style:italic;
font-size:14px;
color:#FF9900;
}

Open in new window

0
 
LVL 16

Expert Comment

by:Robin
ID: 24031300
In your style.css, you have

ul {margin:0; padding:0; list-style:none;}

Change this to

ul {
 margin:0;
 padding:0;
 list-style-type: disc;
 list-style-position: inside;
}
0
 

Author Comment

by:techpr0
ID: 24031358
This works, but how can i get the second line indented like the first?
0
 
LVL 16

Accepted Solution

by:
Robin earned 1000 total points
ID: 24031535
Yep, you can. Use this:
ul {
 margin:0;
 padding:0;
 padding-left:18px;
 
 list-style-type: disc;
 list-style-position: outside;
}

Open in new window

0
 

Author Comment

by:techpr0
ID: 24031584
That was it. Thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question