a colored square

[ashkaan57]

Hi,
I was trying to display a small colored square using <table> tag. It
worked fine on the screen but when I do print preview, the square shows
up as white. I used both:
<table width="15" height="15" style="border: 1px solid #000;
background:#00c c00">
....
</tabel>

and

<table width="15" height="15" style="border: 1px solid #000">
<tr><td bgcolor="00cc00 "></td></tr>
</table>

but none works.
Can someone tell me why this does not get printed? Is there a CSS
method to create this that would print?

TIA.

[David Dorward]

as*******@hotma il.com wrote:

I was trying to display a small colored square using <table> tag.
Eugh. http://allmyfaqs.net/faq.pl?Tableless_layouts
Can someone tell me why this does not get printed?

Most browsers have an option "Print background colours and images" that is
turned off by default. This is an ink saving measure.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Jukka K. Korpela]

as*******@hotma il.com wrote:

I was trying to display a small colored square using <table> tag.
Why? The most obvious method is to use an image. This approach would let
you specify a textual alternative, and you should actually _start_ from
that. First think what the element is supposed to say. If it is mere
decoration, use alt="". But probably you are not using it for mere
decoration, since you are worrying about what happens when the page is
printed. Try explaining the purpose and context, preferably with a URL.

To create a colored square _using CSS_, you could use e.g.

<div style="width: 15px; height: 15px; background: #0c0;">&nbsp;</div>

but it would be better to use a class attribute and a <style> element or
external style sheet where you make the corresponding settings as well
as display: none for @media print, because normally such an element
should be completely ignored in printing. If it needs to be printed, it
should be content (an image).
It
worked fine on the screen but when I do print preview, the square shows
up as white.
That's because browsers generally don't print backgrounds. No, you
cannot force them. Or even suggest, in CSS.
I used both:
<table width="15" height="15" style="border: 1px solid #000;
background:#00c c00">
...
</tabel>
That's poor practice, since you are using a nonstandard and unreliable
height="..." attribute in a <table> tag, when you could have used it in
a <td> tag. But I digress; that's HTML authoring.
<table width="15" height="15" style="border: 1px solid #000">
<tr><td bgcolor="00cc00 "></td></tr>
</table>
There's no relevant difference, of course.
Can someone tell me why this does not get printed?
Your browser is configured not to print backgrounds. So are most other
people's browsers. Besides, even if configured to print backgrounds,
most browsers are incapable of printing green background on a so-called
black and white printer, and people increasingly use good black and
white laser printers instead of color printers that are poor in printing
texts well.
Is there a CSS
method to create this that would print?

As mentioned, an image would do it without any CSS, naturally assuming
that a color printer is used. But if it is mere decoration, a CSS method
is _better_ just _because_ it will cause the colored square to be
suppressed. We don't want to waste the user's ink, do we?

[Nick Theodorakis]

as*******@hotma il.com wrote:

Hi,
I was trying to display a small colored square using <table> tag. It
worked fine on the screen but when I do print preview, the square shows
up as white. I used both:
[snip]

but none works.
Can someone tell me why this does not get printed? Is there a CSS
method to create this that would print?

If you really need a colored image, why not just make a small image
(perhaps even 1 x 1 pixel) and scale it (perhaps adding a border with
CSS if needed)? I'm not sure why you need or want a <table>.

I played around once with making colored square with CSS, and you can
see two examples here:

<http://theodorakis.net/cssart.html>

but I would admit it's really only a "trick."

Nick

--
Nick Theodorakis
ni************* *@hotmail.com
contact form:
http://theodorakis.net/contact.html

[Stan Brown]

Sat, 18 Feb 2006 14:53:28 GMT from Nick Theodorakis
<ni************ **@hotmail.com> :

I played around once with making colored square with CSS, and you can
see two examples here:

<http://theodorakis.net/cssart.html>

but I would admit it's really only a "trick."

Most impressive! Sometimes things like this are worth doing just for
the sheer fun of stretching the boundaries, even though they might
not be appropriate for production use.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[ashkaan57]

Stan Brown wrote:

Sat, 18 Feb 2006 14:53:28 GMT from Nick Theodorakis
<ni************ **@hotmail.com> :

I played around once with making colored square with CSS, and you can
see two examples here:

<http://theodorakis.net/cssart.html>

but I would admit it's really only a "trick."

Most impressive! Sometimes things like this are worth doing just for
the sheer fun of stretching the boundaries, even though they might
not be appropriate for production use.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Thank you all for your input.
The reason I needed to display these colored squares is that I have a
form that allows the user to configure some properties of an item. One
of the properties is the color scheme. So, if they selected green and
red (they have a choice of 64 colors), at the end I wanted to present
them with a summary of their configuration and wanted to show their
selected colors as small colored squares. Therefore, I don't know
beforehand what he color is going to be (I am using php to create the
resulting summary page) and it wouldn't make sense to say that one of
the colors they chose was 00CCFF.
I will get rid of the tble and use your CSS suggestions. I am begining
to learn CSS and would love to design the site in a way I could get rid
of all the <table> and spacer.gif tags.

[kchayka]

as*******@hotma il.com wrote:

(they have a choice of 64 colors), at the end I wanted to present
them with a summary of their configuration and wanted to show their
selected colors as small colored squares. Therefore, I don't know
beforehand what he color is going to be (I am using php

If you're using php to generate this, then you can create an image on
the fly and color it with whatever choice they made. ImageMagick or GD
libraries should do it. Ask in a php forum for more info.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Sid Ismail]

On Sat, 18 Feb 2006 14:53:28 GMT, Nick Theodorakis
<ni************ **@hotmail.com> wrote:

: > I was trying to display a small colored square using <table> tag. It
: > worked fine on the screen but when I do print preview, the square shows
: > up as white.
That's because it actually is a _background_ color.

Sid