19 replies [Last post]
DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

I don't remember how I came across this site (www.htmlhelp.com/tools/csscheck/) (maybe a recommendation from here or perhaps via one of my circular-thinking-type runs with the google search), but I used it to see what kind of information would pop up. Now I know the tool is too old to really be useful anymore but one thing it reminded me of was about background and color properties.

As of my last validation, everything passed. I still have a few minor layout issues on which I am still pursuing the answers but those are for me to hash through in a little while.

Here's the addy: http://www.soulgazersundries.com/ & the css file in question is http://www.soulgazersundries.com/styles/global.css.

In the body element, I set the sitewide properties thus:

* {
margin:0;
padding:0;
border:0;
text-decoration: none;
}
body {
background: #fff url("../images/bkgndGold.GIF");
color: #933;
font-family:verdana,sans-serif;}
blockquote {padding:15px;width:95%;}
div {padding: 5px;}
h1, h2, h3, h4, h5 {
font-weight: bold;
padding: .5em;
text-align:center;
}
img {border: 0;}
#left li,.menunav li{white-space:nowrap;}/*.menunav specific to labels menus */
ul {list-style-type:none;}

My question is this: How do I define a background color if I am using a background image? It validates via w3c, it works in every browser I can test it in, but it doesn't fit the "If you define one, you SHOULD define the other" school of thought.

a.menuitem {
display:block;
background: url("../images/button.gif") 0 0 no-repeat;
color: #093060;
font-family: Papyrus, sans-serif;
font-weight: bold;
width:120px;
}
a.menuitem:visited {
color: #808;
}
a.menuitem:hover {
background-position: -120px 0;
color: #b22a2a;
}
a.menuitem:active {
background-position: -240px 0;
color: #633100;
}

I was going to say "I'm comfortable with it." or possibly even "I can live with it." but was recently told those are copout statements. So I would like assistance with this after all..... Laughing out loud

DeprecatedDiva

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

DeprecatedDiva wrote:
How do I define a background color if I am using a background image?

Try
background: #delicateshadeofpink url("../images/button.gif") 0 0 no-repeat; 
color: #093060; 

Just put in another background color in the same way as you have the body.
Laughing out loud

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

Addendum: The rationale is to have something in the background to contrast with the text color if a visitor dares to surf with images turned off.
hth

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

background and color properties

Lorraine wrote:
DeprecatedDiva wrote:
How do I define a background color if I am using a background image?

Try
background: #delicateshadeofpink url("../images/button.gif") 0 0 no-repeat; 
color: #093060; 

Just put in another background color in the same way as you have the body.
Laughing out loud

So much for conservation of bandwidth! Laughing out loud I was hoping there might have been a different answer. But I guess one can take "shortcuts" just a little too far.

DeprecatedDiva

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

It really comes down to the design. If you design for a background color in the body that will still work with foreground colors in other elements, when images are turned off, you're laughing. Laughing out loud If the design demands differing color schemes on various elements - you'll have to live with bandwidth :? But it's only a little part of an existing line of css, we're talking about here.

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

background and color properties

Laughing out loud You're right about that. I'm glad you reminded me to test that. By the way, it doesn't look half bad being nekked. Laughing out loud

DeprecatedDiva

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background and color properties

Specifying a background color to a background image is actually a W3C recommendation that ones meant to observe. I think the validator should point out the lack of one as a warning if I remember correctly.

http://www.w3.org/TR/REC-CSS1#background-image

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

background and color properties

Hugo wrote:
Specifying a background color to a background image is actually a W3C recommendation that ones meant to observe. I think the validator should point out the lack of one as a warning if I remember correctly.

http://www.w3.org/TR/REC-CSS1#background-image

Hugo.
But it didn't....I wonder why. I had to be reminded of this by an outdated css validator (htmlhelp.com/tools/csscheck/).

DeprecatedDiva

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

When I first started web development, the validator frequently reminded me about background-color and color pairs if I forgot one or the other. I think I automatically put a color behind a background image because most of my visitors are visually-impaired and I suspect they were not backward in telling me when I forgot :roll:

I notice now in strict doctypes that timely reminder doesn't appear. I want my money back W3C - I relied on you to help correct my sloppy code. Oups

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background and color properties

Hmm maybe I was thinking of the lack of background and color properties specified; which is the error thrown up by the htmlhelp css validator. if you specify a color property for text you should specify a background color as well to avoid potential conflicts with user sheets i.e you specify black text and the user has a user preference for a black background you have no visible text.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

Quite so :? I er... think.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background and color properties

Oooh what have I said wrong Lorraine 8-[

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

Sorry - a joke that needs explaining ceases to be a joke. Sad
But since you ask...

You have quoted accurately from the WDG CSS Validator where it talks about user stylesheets. I did find something implicitly illogical in the example you gave:

Quote:
i.e you specify black text and the user has a user preference for a black background you have no visible text.

IMHO if a user has the knowledge, intellect and common sense even to embark upon writing a stylesheet for own use, it will not take that individual long to realise that one or other of the colours in his/her own stylesheet is wrong. Other people (who are not as moronic as many developers would have you think) will be able to change foreground and background colours in their browser. The rest, who don't know about all this, will just see the colours the developer intended.

Therefore, maybe, W3C are right to drop the "couplet" warnings as being pointless. However, I still use background and foregound colours together and I place a background colour behind images. That's just me, coding in the past, producing unnecessarily bloated stylesheets, but my html is as lean as can be. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background and color properties

I always quote accurately, although that wasn't a quote as such Lorraine.

There are two situations:
1. background images should be declared along with a background color.

2. When declaring a color one should also declare a background.

Case in point: forget user style sheets , I was looking at a layout on another machine, I had not declared backgrounds as they were default white, the user had set a theme on their win box, all window backgrounds were grey. one destroyed layout visually.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

If a user applies a standard Theme, it is set up for good background/foreground contrast in the window. The user then edits a Theme and changes the background colour in the Window option. "Ah ha - some of my apps don't look quite right now". It ain't going to be too big a step for the user to realise what has happened and notice the font colour changer immediately beneath the background changer.

The user may not be a surfer, so would not notice until visiting one of the many "undeclared" websites that abound, but is still probably bright enough to realize 'tis summat to do with the Theme. S/he was bright enough to find Themes and Advanced Appearance Properties in the first place, after all.

However, I take your point. The web developer has no control over what a user may do in Themes and you *should* declare as you have advised in #1 and #2.

The issue to which I was trying to offer a rationale was why the W3C validator did not speak out when one of them was missing

Hugo wrote:
I had not declared backgrounds

Shame on you [-X See #1 and #2 above.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

background and color properties

I know caught me by surprise, it wasn't a styled page as such just some little touches to make it a wee bit more visually appealing, so hadn't been too concerned with stuff like backgrounds :roll:

Some of those widows themes are an absolute disaster, make doing anything simple like reading title bars nigh on impossible, and as for the cursor, christ I couldn't target anything for sure.

Sadly the person in question was oblivious to this fact, and that they were just wasting precious system resources.

Have to admit I wasn't aware that the validator had stopped making mention of this, normally declare backgrounds to colors.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

Right then - off to the pub - I'm in the chair Tongue

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

background and color properties

In line with this discussion, I had my daughter check my site on her system because she is one of those who uses the black background with DARK PURPLE text. I cannot see or read her screen but she seems to have no problem with it. Even so, when she brought my site up, it came up exactly as I had set it up!

Some thoughts: (I hope I make sense with these next paragraphs...)

If there are global declarations made at the beginning of the style sheet that are only affected when individual elements are later modified (such as text color) can the remaining, already inheritable declarations (such as the background image on my button) be removed and still have the stylesheet do its' job? Is it possible that the validators have been written to take this CASCADING EFFECT into consideration when validating?

From all the literature I've read so far, the greatest opening emphasis has been on the CASCADING NATURE of styling, of one style into another, ***going from the import (link or import...whichever is lowest,) to the inline (highest.)*** If that is indeed the case, I should be able to go back and remove them without it affecting the style when a user edits their own system defaults. Hmm?

So whatcha think? Any merit to the above thoughts?

***had it backwards

DeprecatedDiva

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 3 days ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

background and color properties

I'm going on vacation tomorrow. I look forward to reading responses to this thread when I get back (August 1st).

I am, in a twisted way of thinking, a minimalist in some things. This is one of those things. The more bandwidth I can steal back, the more I can use on other endeavors! Laughing out loud

DeprecatedDiva

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

background and color properties

Now that's a bit naughty Diva [-X
I'm off on vacation, so I'll just ask a few more questions to keep the pot boiling while I'm away. Then I can check out the fruits of *their* endeavours when I get back, beautifully tanned and relaxed and enjoy some more entertainment.

So some :?: s for you
Has your daughter changed preferences through IE Tools? If so has she checked the box that says "ignore colors specified on web pages"? Has she adapted a Theme? If so, which one and how? Has she applied her own stylesheet? If so - will she share it with us? What do other websites look like when viewed in your daughter's preferences? Did you say dark purple on black? - sounds like a real teenager Cool

Have you experimented with making various changes yourself? Have you changed the order of your cascade to see what happens? What happens? How much bandwidth are you talking about for the site now? What is the effect on the bandwidth if you don't rely on inheritance, which is possibly more important than the cascade? Why does that amount of "stolen back" bandwidth matter to your site?

B..U..T your original question was *should* I declare both? Is that the right way to go? Is it a cop-out if I don't? or words to that effect. I believe that has been answered Wink

I'm off to the pub for the next few days... ... ...

Hat tip to briski - I hadn't found this smiley site - it's a bit er... rude in places though, isn't it?