text hidden by background - Post ID 1361

User 355448 Photo


Ambassador
3,144 posts

I am at a loss. I am working on a website and the text should have a background. The CSS looks like this:
.box3 {
clear: both;
background-color: #330066;
width: 750px;
border-style: double;
border-width: 2px;
border-color: #cccc00;
font-size: 90%;
padding: 5px;
margin-top: 10px;
font-family:"Comic Sans MS";
color:yellow;
text-align: left;
}
p {
z-index:1;
}

The z-index were added to try to get the text to show up. Here is the applicable HTML:

<div class="box3">
<p><em> 31 Ways to Praise: Creating A Vocabulary of Praise</em><br>
by Bob Hostetler<br></p>
>>>> other <p> text </p> <<<<
</div>

Here is a link to the live problem wiht the last box on the screen:
http://www.firstbaptistgoosecreek.com/test/music.html

If you click and drag over the blue box, you will see the text (which should be yellow).
User 37670 Photo


Registered User
2,138 posts

LOL....sorry for that... ummmm, your text is there but you have to change the color of the text in order to see it. I only laugh cause my Dad did the very same thing with shapes the same color as his background.
If I'm wrong, I'm sorry. I highlighted some of the text from within your text box area with my mouse and it showed up:
Whether you adopt or adapt the following, or compose a praise program of your own, I pray that this suggested "praise program" may help your praise ascend plentifully and purposefully to God in ways that will make the angels blush with envy

OK, having another look, and it would appear that your text should be yellow but isn't, so maybe I am wrong on this one. Try changing the font color just in case.

Taking one more look. You are using the "strict" thing in your doctype, so maybe the use of the word "yellow" instead of the numerical value is what messes it up. It will show yellow in preview, and maybe even in the browser on your computer, but not on the Internet when you have a doctype that might not allow colors to be named. Try using #FFFF00 instead of the word "yellow". That is more what I mean by "changing the color".
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 355448 Photo


Ambassador
3,144 posts

Cliff,

I made the change to #FFFF00 and that did not make any difference.

I changed the DTD from strict to loose and that did not make any difference.

I then changed to #FFFFFF for the text, and still the text is hidden.

I even tried setting the box3 to a z-index: -1 and still the text is hidden.

I lightened the background and saw that the text was actually black (default), so.... I got the idea of taking the text setting out of my div class and putting it in a p.yellow statement.

IT WORKED!!!!!!!!!

Now I know not to put text color in the div css statements, but it works in span and other elements.
User 37670 Photo


Registered User
2,138 posts

WOW.
Glad you got it working. All my ideas worked on the "preview" mode, but not when the file was actually on the web. Strange. I will have to remember this so I don't run into the same problem. Thanks for the update.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 355448 Photo


Ambassador
3,144 posts

Cliff,

The fact that everything worked great in preview and using a browser on my computer was what had me going bonkers.

I don't know if this is an issue with the browsers (all of them?), a CSS issue, or even an issue with the server.

I may upload the file to another server to see if it behaves any different.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.