Table Cell Background-Color

Hello,

I have the following applied to a table cell:

tr.Alternate td {background: url('../Image/Cell_Background.gif') no-
repeat;}
tr.Go td {background: green url('../Image/CellGo_Background.gif') no-
repeat;}

For a table row as follows:
<tr class="Go Alternate">

The green color is not applied. Only if I use:
tr.Alternate td {background: inherit url('../Image/
Cell_Background.gif') no-repeat;}

But in this case it is not validated.

Could someone, please, tell me how to solve this problem?

Thanks,
Miguel

shapper wrote:

Hello,

I have the following applied to a table cell:

tr.Alternate td {background: url('../Image/Cell_Background.gif') no-
repeat;}
tr.Go td {background: green url('../Image/CellGo_Background.gif') no-
repeat;}

For a table row as follows:
tr class="Go Alternate"

The green color is not applied. Only if I use:
tr.Alternate td {background: inherit url('../Image/
Cell_Background.gif') no-repeat;}

But in this case it is not validated.

Could someone, please, tell me how to solve this problem?

Of course! Do you understand what happens when you use a shortcut property?

"Given a valid declaration, the 'background' property first sets all the
individual background properties to their *initial* values, then assigns
explicit values given in the declaration."

http://www.w3.org/TR/CSS21/colors.html#propdef-background

Well your...

tr.Alternate td {background: url('../Image/Cell_Background.gif')
^^
....has no color definition so the background-color defaults to
"transparent" not "inherit", you set it with class "Go" then reset it
with "Alternate"

One solution is not to use the shortcut property for 'Alternate' if you
are not going to set all properties

tr.Alternate td {
background-color: url('../Image/Cell_Background.gif'),
background-repeat: no-repeat;
}


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Mar 17, 5:11*pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

shapper wrote:
Hello,

I have the following applied to a table cell:

tr.Alternate td {background: url('../Image/Cell_Background.gif') no-
repeat;}
tr.Go td {background: green url('../Image/CellGo_Background.gif') no-
repeat;}

For a table row as follows:
tr class="Go Alternate"

The green color is not applied. Only if I use:
tr.Alternate td {background: inherit url('../Image/
Cell_Background.gif') no-repeat;}

But in this case it is not validated.

Could someone, please, tell me how to solve this problem?

Of course! Do you understand what happens when you use a shortcut property?

"Given a valid declaration, the 'background' property first sets all the
individual background properties to their *initial* values, then assigns
explicit values given in the declaration."

http://www.w3.org/TR/CSS21/colors.html#propdef-background

Well your...

tr.Alternate td {background: url('../Image/Cell_Background.gif')
* * * * * * * * * * * * * * *^^
...has no color definition so the background-color defaults to
"transparent" not "inherit", you set it with class "Go" then reset it
with "Alternate"

One solution is not to use the shortcut property for 'Alternate' if you
are not going to set all properties

tr.Alternate td {
* *background-color: url('../Image/Cell_Background.gif'),
* *background-repeat: no-repeat;

}

You meant:
tr.Alternate td {
background-image: url('../Image/Cell_Background.gif'),
background-repeat: no-repeat;
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

It is working.

Thank you,
Miguel

shapper wrote:

On Mar 17, 5:11 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

One solution is not to use the shortcut property for 'Alternate' if you
are not going to set all properties

tr.Alternate td {
background-color: url('../Image/Cell_Background.gif'),
background-repeat: no-repeat;

}

You meant:
tr.Alternate td {
background-image: url('../Image/Cell_Background.gif'),
background-repeat: no-repeat;
}

Yes I did. Brain went one way and fingers when another...

If you newsreader does not do it, you should manually snip signatures in
your posts

<cut from here>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

to here

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little schrieb:

shapper wrote:
You meant:
tr.Alternate td {
background-image: url('../Image/Cell_Background.gif'),

^

background-repeat: no-repeat;
}

Yes I did.

I guess you meant a semi-colon following the first property value. Just
for the records.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

shapper wrote:

I have the following applied to a table cell:

Not posting a URL is equivalent to saying "Suckers, I expect you to do my
homework for me, and I won't even tell you what the assignment was."

tr.Alternate td {background: url('../Image/Cell_Background.gif') no-
repeat;}
tr.Go td {background: green url('../Image/CellGo_Background.gif') no-
repeat;}

From this odd fragment, it is impossible to deduce whether your actual
stylesheet has a line break in the value no-repeat. Of course, we cannot
even know whether you are referring to some existing images here.

For a table row as follows:
tr class="Go Alternate"

The green color is not applied.

You have set a a background image _and_ background color. The background
color then matters, in visual rendering, in some cases only. It is
impossible to see, from the crappy fragment, whether the background color
has any chances of becoming visible.

Some browsers fail to implement duplicate classes as in class="Go
Alternate", but you're not telling which browser(s) you tested in.

Could someone, please, tell me how to solve this problem?

You first need to define what your problem is. Then, if you cannot solve it
on your own, you really need to share both the real problem and the URL of
your best effort to solve it.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On Mar 17, 8:37*pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

shapper wrote:
I have the following applied to a table cell:

Not posting a URL is equivalent to saying "Suckers, I expect you to do my
homework for me, and I won't even tell you what the assignment was."

tr.Alternate td {background: url('../Image/Cell_Background.gif') no-
repeat;}
tr.Go td {background: green url('../Image/CellGo_Background.gif') no-
repeat;}

From this odd fragment, it is impossible to deduce whether your actual
stylesheet has a line break in the value no-repeat. Of course, we cannot
even know whether you are referring to some existing images here.

For a table row as follows:
tr class="Go Alternate"

The green color is not applied.

You have set a a background image _and_ background color. The background
color then matters, in visual rendering, in some cases only. It is
impossible to see, from the crappy fragment, whether the background color
has any chances of becoming visible.

Some browsers fail to implement duplicate classes as in class="Go
Alternate", but you're not telling which browser(s) you tested in.

Could someone, please, tell me how to solve this problem?

You first need to define what your problem is. Then, if you cannot solve it
on your own, you really need to share both the real problem and the URL of
your best effort to solve it.

--
Yucca,http://www.cs.tut.fi/~jkorpela/

Jonathan,

No worries. I got it ... I mentioned the error just if someone else
sees this post and doesn't spot it.

Thank you for the link. It is useful.

Thanks,
Miguel