Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
1,167 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

705 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now