Solved

Bullets not showing in unordered list

Posted on 2009-03-31
13
1,172 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
Independent Software Vendors: 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
A responsive image gallery using flexbox 6 78
center navbar (navigation menu) on web page 3 66
Set css in function 11 54
CSS styling problem 3 27
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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