text color

[rsteph]

Ok, so I think I've finally killed my brain. I'm trying to specify some classes for text. I've got one for a speacial header in an announcement section, as well as general text, and text I want to highlight. The highlighted text is basically the same thing as the general text, but red instead of black. Here's the css class:

.announceHL {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #990000;
}

For some reason it's not turning it red though. So what I'm I doing wrong?

[khalidbaloch]

no mistake in your class .. and i tried it it is definetly turning the text red .. i tried it in IE 7 .. let us know which browser du u use ?

[drhowarddrfine]

Need to see the rest of the code to see what's wrong. It should work.

[rsteph]

I'm using IE 7 as well.

That's the part the really confuses me. The rest of the attributes in the class all work, they're all formatting the text as they should. Bolding, them and setting the font type, etc. just color that doesn't seem to want to do it's thing.

I'm not able to get the code posted at the moment. But I can post it tomorrow morning (I don't have it on me atm). I'll try and look around at it a little too, see if I can see what's wrong with it.

Need to see the rest of the code to see what's wrong. It should work.

[rsteph]

One thought I've had is that I may be having problems with conflicting styles.

The text in question is in a nested table in the 'bodycontent' div, between <p> tags:

<td width="400" height="200" align="center" valign="middle">
<table border="8" cellpadding="0" cellspacing="0" align="center" bordercolor="#0000cc" bordercolordark="#000066" bordercolorlight="#0066ff"><tr><td width="400" height="250" align="center" valign="middle">
<p class="announceHeader">Discovering Clermont #101:</p>
<p class="announceBody">Date: November 12<br />
Time: Immediately after the 10:30am service</p>
<p class="announceBody">This class is designed to introduce newcomers to our church's mission and ministry.</p>
[B]<p class="announceHL"> Lunch & Childcare will be provided</p>[/B]
</td></tr></table>
</td>

Here's are some statments from my styles.css page:

#bodycontent p {
font-family: Garamond;
font-size: 20px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

.announceHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

.announceBody {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.announceHL {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #990000;
}

It's the .announceHL class that should show the bold red text within the menu content. To 'highlight' that part of the text.

If you want to see code from the whole page let me know. This is basically just parts of the page dealing directly with my problem. The font style/size/weight all seem to be working properly, the color doesn't though; in IE7 or Firefox.

[drhowarddrfine]

There's something more to it than that because that snippet works in my IE7 and Firefox. Got link? Otherwise, need the complete code.

[rsteph]

Here's the link:
http://rsteph49.tripod.com/default.shtml

And here's the .css:


body {
margin: 10px 10px 0px 10px;
padding: 0px;
}

/* ================================================== =================== */
/* Specific DIVs */
#body {
background-image: url(/images/image01.png);
}

#bannercontent {
position: absolute;
left: 190px;
top: 10px;
height: 226px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 1;
}
html>body #bannercontent {
height: 200px;
}

#menucontent {
position: absolute;
left: 190px;
top: 236px;
width: 900px;
height: 30px;
background-image: url(/images/menu04.png);
z-index: 800;
}

#bodycontent {
position: absolute;
left: 190px;
top: 266px;
height: 1500px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
/* background-image: url(/images/marb009.jpg);
background-repeat: repeat; */
background-color: #ffffff;
z-index: 1;
}
html>body #bodycontent {
height: 800px;
}

#footer {
position: absolute;
left: 190px;
top: 1766px;
height: 40px;
width: 900px;
voice-family: "\"}\""
voice-family: inherit;
background-image: url(/images/menu04.png);
z-index: 1;
}
html>body #footer {
height: 40px;
}

#groupItem {
height: 80px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height: 80px;
width: 800px;
z-index: 2;
}

#datetime {
position: absolute;
left: 815px;
top: 266px;
font-family: arial;
font-size: 14pt;
font-weight: 900;
color: #000066;
z-index: 50;
}

#dropmenudiv{
position: absolute;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
}

#shadowdiv {
width: 360px;
padding: 5px;
filter: shadow(color:blue, strength:6, direction:135);
vertical-align: middle;
text-align: center;
}

#imagediv {
width: 350px;
text-align: center;
padding: 0px;
/* background-image: url(/images/marb009.jpg); */
background-color: #ffffff;
border: 1px solid black;
font-size: 12px;
vertical-align: center;
}

/* ================================================== =================== */
/* Font Elements */

#bannercontent h1 {
font-size: 58px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent h1 {
font-family: Garamond;
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent p {
font-family: Garamond;
font-size: 20px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent h5 {
font-weight: bold;
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent li {
font-size: 18px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#menucontent h1 {
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#menucontent p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#footer p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

a:link {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}

a:visited {
font-weight: bold;
text-decoration: none;
color: #7ad0e1;
}

a:hover, a:active {
text-decoration: underline;
color: #1365ae;
}

/* ================================================== =================== */
/* Random style classes. */

.announceHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

.announceBody {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.announceHL {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #990000;
}

.clCMEvent{position:absolute; z-index:300; width:100%; height:100%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:hidden;}
.clCMAbs{position:absolute; width:10; height:10; left:0; top:0; visibility:hidden;}

.clT,.clTover,.clS,.clSover,.clS2,.clS2over{positi on:absolute; overflow:hidden; width:130; height:30; cursor:hand;}
.clT,.clTover{padding:2px; font-size:16px; font-weight:bold;}
.clT{color:white;}

.clTover{color:#7AD0E1;}

.clS,.clSover{padding:2px; font-size:16px; font-weight:bold;}

.clS2,.clS2over{padding:2px; font-size:16px;}

/* .clS,.clS2{color:white; background-color:#6699CC; layer-background-color:#6699CC;} */
.clS,.clS2{color:white; background-color:#3B3B65; layer-background-color:#3B3B65;}

.clSover,.clS2over{color:#7AD0E1;}

/* .clSover,.clS2over,.clTover,.clB,.clBar{layer-background-color:#0066CC; background-color:#0066CC;} */
.clSover, .clS2over{layer-background-color:#1365AE; background-color:#1365AE;}

.clB{position:absolute; visibility:hidden; z-index:300;}
.clBar{position:absolute; width:10; height:30; visibility:hidden;}

/* ================================================== =================== */

[drhowarddrfine]

The color is red in Firefox and IE7 for me.

[rsteph]

"Lunch & Childcare will be provided" is coming up red for me, but I change the font color in the page itself on that one. with a style="color:#ff0000" in the <p> tag.

In the box next to it the line "HELP IS REALLY NEEDED in some areas!!" should also be red, for some reason for me it's not. In that one I've taken out the style attribute in the <p> tag.

The color is red in Firefox and IE7 for me.

[drhowarddrfine]

That is also red for me.

[rsteph]

hmm... very odd. Maybe my computer just hates me. I won't rule that out.