Setting TD background image

[Mabden]

Hello All,

I have some tags that don't validate. I have been using tags like the
following on some of my tables to give a top and bottom border (note tags
are changed to parens):

======================================
(table)
(tr)(td id="borders" height="18" background="back3.gif")(/td)(/tr)

(tr)
(td id="content")
Some content
(/td)
(/tr)

(tr)(td id="borders" height="18" background="back3.gif")(/td)(/tr)

(/table)
======================================

It works OK, but W3C tells me this is illegal. So how do I make an image
repeat across a TD area? I tried DIV and P, but no luck. I tried putting the
following into a style sheet, and again no luck:

..borders
{
BACKGROUND-IMAGE: blue URL("Back3.gif");
BACKGROUND-REPEAT: repeat-x;
}

 

[Andrew Urquhart]

Hello All,

I have some tags that don't validate. I have been using tags like the
following on some of my tables to give a top and bottom border (note
tags are changed to parens):

======================================
(table)
(tr)(td id="borders" height="18" background="back3.gif")(/td)(/tr)

(tr)
(td id="content")
Some content
(/td)
(/tr)

(tr)(td id="borders" height="18" background="back3.gif")(/td)(/tr)

(/table)
======================================

It works OK, but W3C tells me this is illegal. So how do I make an
image repeat across a TD area? I tried DIV and P, but no luck. I
tried putting the following into a style sheet, and again no luck:

.borders
{
BACKGROUND-IMAGE: blue URL("Back3.gif");
BACKGROUND-REPEAT: repeat-x;
}

Problems:
1. Use of tables for presentation
2. Duplicate id attribute values (id value must unique in a document)
3. Depreciated attributes
4. CSS selector was for a class named 'borders', not an id.
5. 'blue' is not a valid value for the 'background-image' property
6. You're advised to specify a (contrasting) colour at the same time as
specifying a background colour


<!-- markup -->
<div class="container">
<div class="content">
Some Content
</div>
</div>


/* CSS */
..container {
padding-top: 18px;
color: #ffff00;
background: #0000ff url(back3.gif) top left repeat-x;
}
..container .content {
padding-bottom: 18px;
color: #ffff00;
background: #0000ff url(back3.gif) bottom left repeat-x;
}

 

[Toby A Inkster]

background="back3.gif"
BACKGROUND-IMAGE: blue URL("Back3.gif");

URLs are CaSe-SeNsItIvE.

Whatsmore, you can't put 'blue' as a background image. Try:

background-color: blue;
background-image: url("back3.gif");

or:

background: blue url("back3.gif");

 

[Mabden]

Problems:
1. Use of tables for presentation

Hence the question...

2. Duplicate id attribute values (id value must unique in a document)

Oops, that was added to the email to give an example and wasn't directly
from my style sheet, where I had bordertop and borderbot. I was trying to
not get yelled at for using two styles where on is needed...

3. Depreciated attributes

Again, that's why I'm asking...

4. CSS selector was for a class named 'borders', not an id.

Got that in #2. If I'm mixing stuff up in the example, it's just 'coz it's
new to me and I'm confused about class vs name vs id.

5. 'blue' is not a valid value for the 'background-image' property

I guess I had a background in there at one time, and changed it for the
example. Got me on that one (again). I'm not actually using blue, see #6
below.

6. You're advised to specify a (contrasting) colour at the same time as
specifying a background colour

News to me. How can I find the contrasting color of something like #C2BEDF

(!-- markup --)
(div class="container")
(div class="content")
Some Content
(/div)
(/div)


/* CSS */
.container {
padding-top: 18px;
color: #ffff00;
background: #0000ff url(back3.gif) top left repeat-x;
}
.container .content {
padding-bottom: 18px;
color: #ffff00;
background: #0000ff url(back3.gif) bottom left repeat-x;
}

This worked great... almost. The only thing missing is the border. My TD's
allowed a thin black line below and above the border image. With this style
sheet method I can't figure out how to make that happen. I can make a 2
pixel black line on the top border by simply changing the padding-top from
18px to 20px. But when I change the padding-bottom to 20px it adds 2 pixels
of blue, not black.

I don't see HR in the HTML 4.01 spec. Besides, adding an HR tag puts a huge
border around the line and I couldn't see how make the border 0. So, what is
the preferred replacement for the HR tag? I just need a simple black line
across the entire cell 2px in height that appears on top of the
padding-bottom image.

I tried:

(div class="line")(/div)

And the style of:

..line
{
background-color: black
height: 2px;
}

This make a huge black line appear. I can make it larger, but I can't seem
to get down to 2 pixels.

Thanks for all the help so far!

 

[Mabden]

URLs are CaSe-SeNsItIvE.

Whatsmore, you can't put 'blue' as a background image. Try:

Yeah, that was changed in the email, it was originally just "background".

My background image is actually named Back3.gif. Is this a problem? Am I
unkewl, or do I lose my l33t badge?

 

[Andrew Urquhart]

News to me. How can I find the contrasting color of something like
#C2BEDF

#3D4120 is the inverse of #C2BEDF (via PaintShopPro), but the latter is
light blue so any very dark colour should be sufficiently contrasting.
www.w3.org/QA/Tips/color

This worked great... almost. The only thing missing is the border. My
TD's allowed a thin black line below and above the border image. With
this style sheet method I can't figure out how to make that happen. I
can make a 2 pixel black line on the top border by simply changing
the padding-top from 18px to 20px. But when I change the
padding-bottom to 20px it adds 2 pixels of blue, not black.

Someone changed the requirements! So you want something such as:

border image
border
content
border
border image

The blue background was defined in the CSS, change it to black.
Alternatively put the black border on the images. To use CSS borders I
think you'd need another nested block element to apply (one or both
borders) to.

 

[Mabden]

#3D4120 is the inverse of #C2BEDF (via PaintShopPro), but the latter is
light blue so any very dark colour should be sufficiently contrasting.
www.w3.org/QA/Tips/color

Wow! A lot of information that didn't tell me much at first glance. I _will_
look into contrast though, now that you've taught me to be aware of it. I am
always looking for these kind of tips; usability, accessability, conformity,
etc. In the couple of months of lurking I have had cause to change all my
sites to the better.

Someone changed the requirements! So you want something such as:

border image
border
content
border
border image

Yes, I guess I "changed the requirements". I should have given the URL, but
it's a personal (read: dumb) site...

http://www.sitenook.com/

(But I'm fighting another battle over whether The Sharks Nook
(http://sharks.sitenook.com/) is the right width and I posted that link, so
I guess the world will find me... sigh.)

I will not put the suggested changes out on the web just yet, so you can see
the old page (altho it's dated May 5 2004). I have the newest changes on my
local server. Perhaps I need to add a link to "View Andrew Urquhart's
Version" on my site! ;-)

The blue background was defined in the CSS, change it to black.
Alternatively put the black border on the images. To use CSS borders I
think you'd need another nested block element to apply (one or both
borders) to.

Yes I did this. The background around the image changes to black, as well.
Not the same effect. See, my image has a small "border" around it that is
the background color because I set the width of the table to 10px more than
the image. When I make the background black this "border" turns black as
well. I suppose you are going to say I should be putting an explicit CSS
border around the image.

I have a new DIV that creates a black bar where I want it, but it is very
thick. I can expand it to 200px or something, but I can't make it smaller
than about 20px. I need it to be 2px.

I tried using HR, but I couldn't see it in the HTML 4.01 spec. Is HR
"depreciated"?

It seems to me that you cannot change over to CSS piecemeal. You have to
change every-f***ing-thing at once. I was really just trying to get my
border to work, but now I feel like I'm approaching the problem with the
wrong attitude. It seems to be more of a "Resistance is Futile. You will be
Assimilated." situation.

 

[The Doormouse]

do I lose my l33t badge?

LOL!

The Doormouse

 

[Neal]

How can I find the contrasting color of something like #C2BEDF

http://www.juicystudio.com/services/colourcontrast.asp

http://www.colorschemer.com/online.html

 

[Toby A Inkster]

My background image is actually named Back3.gif. Is this a problem?

Depends on your server. On many servers the following are two different
files:

http://server/file.gif
http://server/File.gif

If the first one works, perhaps the other one will be 404!

 

[Andrew Urquhart]

Yes I did this. The background around the image changes to black, as
well. Not the same effect. See, my image has a small "border" around
it that is the background color because I set the width of the table
to 10px more than the image. When I make the background black this
"border" turns black as well. I suppose you are going to say I should
be putting an explicit CSS border around the image.

I have a new DIV that creates a black bar where I want it, but it is
very thick. I can expand it to 200px or something, but I can't make
it smaller than about 20px. I need it to be 2px.

I started a mock-up of the layout box about 7 hours ago, but got
interrupted by a DDOS issue. The slightly unfinished version is at:
www.andrewu.co.uk/temp/sitenook/ (there's an image of the original as
well as the mockup itself)

I tried using HR, but I couldn't see it in the HTML 4.01 spec. Is HR
"depreciated"?

No, but some of it's attributes are:
www.w3.org/TR/html4/present/graphics.html#edef-HR

 

[Mabden]

I started a mock-up of the layout box about 7 hours ago, but got
interrupted by a DDOS issue. The slightly unfinished version is at:
www.andrewu.co.uk/temp/sitenook/ (there's an image of the original as
well as the mockup itself)

Andrew I need to warn you about something. I think that you are breaking a
law, doing what you are doing. You see, you have managed to answer all my
questions in a helpful and, even, outstanding way. Including mock-ups and
working code! You did it in a non-condescending way that was in complete
opposition to all the usenet standards. Run! Run, and hide, before they come
for you!

Er, what I mean to say is thank you very much for your help. I have working
code on my test site, but I now have to duplicate it across all my other
"bad" code and try the validation again. You definitely went "above and
beyond". Next trip to the UK I will buy you a few Boddingtons. ...and then
I'll drink them in your honor, of course.

I don't yet understand exactly what is going on, but I'm researching it. For
instance, the construct
".container1 .container2" is confusing to me. I had not seen this before, so
I'm learning new stuff. Thank God HTML and CSS will live forever; I wouldn't
want to have to go through another paradigm shift! ;-)

Thanks again for your help!

 

[Mabden]

LOL!

The Doormouse

.... I made the Doormouse giggle! Yay!