Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
1,171 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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