HTMLHelp Forums > Background color only in Opera...

Full Version: Background color only in Opera...

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

ALSumner

Oct 15 2006, 09:39 AM

Hi there,

I am taking a web design class, and my HTML is working fine, except for one thing: my background color is only showing up in Opera. I've tried it in IE6, Firefox, and Safari in addition to Opera...

Can someone help me? I have a feeling it has to do with my DOCTYPE declaration, since I really don't understand how to use this yet; I had to copy it from my text book...

Thanks SO much!
Amanda

p.s. Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Resume</title>
<style type="text/css">

body {
background-color: #123456
}
</style>
</head>
<body> <a name ="address">

Christian J

Oct 15 2006, 10:01 AM

Both the Doctype and the code example look OK, but you shouldn't use SGML comments like

CODE

in a style sheet. Use the following syntax instead:

CODE

/*here is my background color */

Side-notes:

* The link in your example is not closed (neither is the <body> or <html> elements, but in their case it's optional).

* I recommend not putting anything before/above the Doctype (not even a comment), since doing so puts IE6 into "quirksmode" where it emulates the bugs of IE5.

stjepan

Oct 15 2006, 10:46 AM

QUOTE

background-color: #123456

There should be semicolon at the end.

jimlongo

Oct 15 2006, 11:00 AM

QUOTE

There should be semicolon at the end.

By definition you don't need it unless there's another property following, but i have found in practice it's a good idea to have it.

Christian J

Oct 15 2006, 11:05 AM

QUOTE(stjepan @ Oct 15 2006, 05:46 PM)

QUOTE

background-color: #123456

There should be semicolon at the end.

You don't have to use a semi-colon if it's the last style declaration (like in this case), even though it's a good habit.

See also http://htmlhelp.com/reference/css/quick-tutorial.html

ALSumner

Oct 15 2006, 02:27 PM

Thank you for replying so very quickly; however, I made the changes recommended, and they didn't work (even though they were not necessary, I want to get in the habit of writing good HTML...

There is more syntax to my page, but I only included what I was having trouble with. Perhaps that was a mistake.

Here is the whole page.

Thanks again!
Amanda

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Resume</title>
<style type="text/css">

body {
background-color: #123456;
}
</style>
</head>
<body> <a name ="address">

<center> Amanda Person 
123 Anywhere Street 
Indianapolis, Indiana, 46000 
317-555-1212 
 <a href= "http://www.yahoo.com/">e-mail@domainname.com
</a>
</center>
<hr />

<di>
<dt>Objective</dt>
 
<dd>To pursue a career in which I can use my professional abilities and computer skills.</dd>
 
 
Work History 
<ul>

<li>2002-present: Veterinary Hospital, Indianapolis, Indiana.</li> Skills: phlebotomy, catheter placement, anesthesia monitoring, computer and equipment upgrades and maintenance, customer service, patient recovery.</li> 
 
<li>1997-2002: Large University, Indianapolis, Indiana. Skills: used office equipment, including fax, credit card terminal, computer, customer service, answered multi-line telephone system, dealt with cash.</li> 
</ul>
 
Education: 
<ul>
<li> Anywhere High School, Indianapolis, Indiana; graduated with honors in 1997</li> 
<li> Large University, Indianapolis, Indiana; will graduate in 2010</li>
</ul> 
<center><a href ="#address">Back to address information</a></center> 
</body>
</html>

pandy

Oct 15 2006, 02:44 PM

You use XHTML syntax in a HTML document (the extra slashes in for instance . That's not the cause of your problem though. Some of the other errors shown by the validator may be. Also, you still have the HTML comment in your style sheet.
http://www.htmlhelp.com/tools/validator/

All that said, I see the background color just fine. Are you sure this is all you have?

jimlongo

Oct 15 2006, 08:14 PM

It is the html comment in your style sheet that is causing the problem.
at least in the older version of Safari (1.3.2) I just checked it in.

Remove

CODE

pandy

Oct 15 2006, 08:31 PM

But IE doesn't mind one bit so there must be something more.

jimlongo

Oct 15 2006, 09:51 PM

QUOTE(pandy @ Oct 15 2006, 09:31 PM)

But IE doesn't mind one bit so there must be something more.

I find it funny you would defend the correctness of IE's rendering.

Safari, Firefox, Omniweb, Camino browsers display no background color with that comment in, all display the background color intended with the comment out.
Oh, that even goes for Explorer 5.2Mac.

Interesting that BBedit (my editor) doesn't even recognize the comment as such in source syntax coloring. IOW it isn't grey as html comments usually are.

Change the comment to

CODE

/* here is my background color */

and it's all okay, both in browsers and editors.

You'll have to check in IE to see if that fixes it.

pandy

Oct 15 2006, 09:55 PM

QUOTE

I find it funny you would defend the correctness of IE's rendering.

I don't. The OP said the color doesn't show in IE. With the code he posted it does show. So there must be something other than what we have seen that makes IE not show the background color.

jimlongo

Oct 15 2006, 10:03 PM

Well i see what you're saying, but the proof seems to be in the pudding (as they say). Put it the comment in, it doesn't render the color . . . take it out it does.
As to why the color didn't render for the OP, I guess she'll have to answer that . . . maybe the list of browsers wasn't right?
My suspicion would be that it only renders in IE6, and not the others.

pandy

Oct 15 2006, 10:15 PM

Nope, previous versions don't mind either. Of course the comment shouldn't be there. All of us have pointed that out.

jimlongo

Oct 15 2006, 10:20 PM

should have said only Windows explorer, and not the others.
5,6,7 I'm sure they're all equally standards compliant.

stjepan

Oct 16 2006, 09:46 AM

I just removed comments before 'body', left anything as it was, and background works.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 ***************
<html>
<head>
<title>Resume</title>
<style type="text/css">

 ****************

body {
background-color: #123456;
}
</style>
</head>
<body> <a name ="address">

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.