18 replies [Last post]
presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Here's the code I'm working with:
.firstBullet {
display: list-item;
list-style-type: disc;
list-style-position: inside;
}

For some reason, I am not able to display black discs, they consistently pick up the color of the text.

How do I fix this before I go absolutely nuts?

Smile

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Unordered List Disc Colors

Show us all your HTML and CSS, perhaps?

Verschwindende wrote:
  • CSS doesn't make pies

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

I've included a snippet of HTML
<td><span class="bodystyle"><a href="2.6.2CreateTrainingPlan.html" target="_self" class="firstBullet">2.6.2
Create Training Plan</a></span></td>
</tr>

Here's my CSS. Please keep in mind that I'm a noobee! I'm feeling embarrased! :oops:

body {
font-family: Tahoma;
font-size: 12px;
color: #000000;
}

td {
font-family: Tahoma;
font-size: 14px;
color: #000000;
font-style: normal;
}

th {
font-family: Tahoma;
font-size: 12px;
}

.bodystyle {
font-family: Tahoma;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-align: left;
}

.firstBullet {

list-style-type:disc; color:#000000;
list-style-position: inside;

}
.secondBullet {

display: list-item;
list-style-type: square;
list-style-position: inside;
}
.thirdBullet {
font-family: Tahoma;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: underline;
display: list-item;
list-style-position: inside;
list-style-type: circle;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
left: auto;
text-indent: 45px;
}

.small {
font-family: Tahoma;
font-size: 9px;
}

.medium {
font-family: Tahoma;
font-size: 12px;
}

.big {
font-family: Tahoma;
font-size: 16px;
}

.xbig {
font-family: Tahoma;
font-size: 24px;
vertical-align: middle;
text-align: center;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
background-position: center center;
}

.expanded {
font-family: Tahoma;
font-size: 12px;
line-height: 16px;
letter-spacing: 2px;
}

.justified {
font-family: Tahoma;
text-align: justify;
}

.footer {
font-family: Tahoma;
font-size: 9px;
color: #999999;
}

.box1 {
padding: 3px;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
font-style: italic;
word-spacing: 2pt;
padding: 3px;
border-width: thin;
border-style: solid;
}
.links {
font-family: Tahoma;
font-size: 14px;
color: #FF0000;
text-decoration: none;
}
.footText {
font-family: Tahoma;
font-size: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
color: #000000;
background-color: #FFFF66;
margin: 2px;
padding: 3px;
clear: none;
float: left;
width: auto;
position: relative;
height: auto;
font-weight: bold;
display: table;
border: thin inset #FFFFFF;
}
.footNav {
font-family: Tahoma;
font-size: 10px;
font-style: normal;
line-height: normal;
color: #000099;
text-decoration: underline;
background-color: #FFFF66;
padding: 2px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
}
.nav {
background-position: center center;
}
.quickNav {
font-family: Tahoma;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background-position: center center;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
word-spacing: normal;
white-space: normal;
}
.bodystyleBOLD {

font-family: Tahoma;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
font-stretch: normal;
text-align: left;
}
.tableHeader {
font-family: Tahoma;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #000000;
background-color: #C0c0c0;
text-align: center;
vertical-align: middle;
padding: 2px;
background-position: center center;
display: table-header-group;
line-height: normal;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
clear: none;
float: none;
height: auto;
width: auto;
margin: auto;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
}
.tableBody {
padding: 1px;
color: #000000;
border-top-width: 1;
border-right-width: 1;
border-bottom-width: 1px;
border-left-width: 1;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
}

.footerSmall {
font-family: tahoma;
font-size: 9px;
font-style: normal;
line-height: normal;
color: #666666;
}
.centTableText {
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background-position: center center;
display: table-row;
text-align: center;
vertical-align: middle;
}
.boldBlueURL {
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000099;
text-align: center;
background-position: center center;
}
.xBigSmaller {
font-family: Tahoma;
font-size: 23px;
font-style: normal;
}
.tableBodyCentered {
padding: 1px;
color: #000000;
border-top-width: 1;
border-right-width: 1;
border-bottom-width: 1;
border-left-width: 1;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
text-align: center;
}
.bodyBulleted {
font-family: Tahoma;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
font-stretch: normal;
text-align: left;
background-color: #FFFFFF;
background-repeat: no-repeat;
display: list-item;
list-style-type: disc;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unordered List Disc Colors

They are the colour of the text - that's the idea Smile

To change them, place your text in another element, div or span, depending on its content.

e.g.

li { color: black; }
.li { color: blue; }

<ul>
  <li><div class="li">this is my list</div></li>
  <li><div class="li">this is my list</div></li>
  <li><div class="li">this is my list</div></li>
</ul>

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

Thanks! I'll give that a try...

jlhaslip
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Unordered List Disc Colors

Why div's?

Wouldn't a span tag be appropriate here? Aren't div's used for structure and span for inline elements?

li { color: black; }
.li { color: blue; }

<ul>
  <li><span class="li">this is my list</span></li>
  <li><span class="li">this is my list</span></li>
  <li><span class="li">this is my list</span></li>
</ul>

Just asking...

I'm having a good day...so far.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unordered List Disc Colors

My post said to use <DIV> or <SPAN> as required by the content. An <LI> can contain block elements. For those cases, a <SPAN> is inappropriate. If its only text, images and/or form controls, a <SPAN> will suffice.

jlhaslip
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Unordered List Disc Colors

And without the html to review, we don't know what the correct answer is.
Thanks for the clarification.

I'm having a good day...so far.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Unordered List Disc Colors

thepineapplehead wrote:
Show us all your HTML and CSS, perhaps?

Verschwindende wrote:
  • CSS doesn't make pies

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

Sorry, I'm not allowed to do that...

Anonymous
Anonymous's picture
Guru

Unordered List Disc Colors

presley wrote:
Sorry, I'm not allowed to do that...
Do you value our help?

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 51 weeks 12 hours ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Unordered List Disc Colors

The point is, it is better to show us the code now and get help than struggling on. After all if we can't see the code now, we can read it later when the site goes live. Laughing out loud

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

I absolutely do value your help! Otherwise, why would I bother to even post a question. My problem stems from my employer...I am not allowed to post anything to public places. Sorry if that seems wrong somehow...it's my reality.

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

my sites are on an intra net, btw.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 43 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Unordered List Disc Colors

In this case it seems to have been fixed without seeing the code?
Did Chris' solution work for you or not?

Anonymous
Anonymous's picture
Guru

Unordered List Disc Colors

presley wrote:
I absolutely do value your help! Otherwise, why would I bother to even post a question. My problem stems from my employer...I am not allowed to post anything to public places. Sorry if that seems wrong somehow...it's my reality.
You can post a mock-up with all information replaced by Lorem etc.

presley
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2006-03-03
Posts: 7
Points: 0

Unordered List Disc Colors

that's a good idea. as I mentioned in my first post, I am rather new to all this, including posting to public boards.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Unordered List Disc Colors

We were all at that point once. Fortunately, my early experience predates the internet, which is why I am so perfect now. Shock Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Unordered List Disc Colors

presley wrote:
that's a good idea. as I mentioned in my first post, I am rather new to all this, including posting to public boards.
It really would help us to help you. Smile We are willing.