Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
1,170 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:robinu
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:robinu
ID: 24030210
Can you show us the css, especially for the classes (main, marg, dt content_1)
0
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 18

Expert Comment

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

Expert Comment

by:robinu
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:robinu
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:robinu
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:
robinu earned 250 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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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