Bullets not showing in unordered list
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></l
</div>
</div>
</div>
</body>
The basic structure is
<body>
<div class="main">
<div class="marg">
<div class="dt content_1">
<table><tr><td><ul><li></l
</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>
ASKER
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
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
Can you show us the css, especially for the classes (main, marg, dt content_1)
Why do you specifically need the tables?
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.
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.
ASKER
.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;
}
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?
Do you have this page online for us to look at? Or post all the css code?
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.
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.
ASKER
The page can be viewed here:
http://www.techprotest.com/rigchem/products/rcdd3.html
Under advantages it should be a bulleted list.
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;
}
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;
}
ul {margin:0; padding:0; list-style:none;}
Change this to
ul {
margin:0;
padding:0;
list-style-type: disc;
list-style-position: inside;
}
ASKER
This works, but how can i get the second line indented like the first?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That was it. Thanks.
list-style-type: disc;
See http://www.w3schools.com/CSS/pr_list-style-type.asp