Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
1,175 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

627 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