Possibly OT. IE6 and background colors..

[The Natural Philosopher]

Another extremely weird feature from iE6

I have a site, whose predominant colors are green background with white
writing.

There is a style sheet with many styles, of which all either specify a
green background, or don't specify any. Body defaults to green.

At the customer site, some <INPUT type="TEXT"> elements showed up with a
white background on one machine running IE6. I didn't have a chance to
investigate further. Highlighting the white on white entered text showed
it was there, just invisible

Further madness occurred when on this machine a form containing about 10
of such inputs, that as far as I know were identical HTML, showed up
with some white and some green background.

My own test machine running AFAICT the same IE6 version does NOT display
this problem.

Her is a code snippet that gave some fields white, some green:-


<TABLE width=90% border="0">
<TR><TD align="right">Name:</td><TD align="left"><INPUT type="text"
maxlength="32"name ="name" value=""></td>

<TD align="right">Phone:</TD><TD align="left"><INPUT type="text" name=
"phone" maxlength="32" value=""></td>
</TR><TR>
<TD align="right">Address 1:</td><TD align="left"><INPUT type="text"
name="address1" maxlength="30" value=""></td>
<TD align="right">Mobile Phone:</TD><TD align="left"><INPUT
type="text" name=" phone2" maxlength="30" value=""></td>
</TR><TR>
<TD align="right">Address 2:</td><TD align="left"><INPUT type="text"
name="address2" maxlength="32" value=""></td>
<TD align="right">Fax:</TD><TD align="left"><INPUT type="text"
name="fax" maxlength="32" value=""></td>

</TR><TR>
<TD align="right">Address 3:</td><TD align="left"><INPUT type="text"
name="address3" maxlength="32" value=""></td>
<TD align="right">Email:</TD><TD align="left"><INPUT type="text"
name="email" maxlength="32" value=""></td>
</TR><TR>
<TD align="right">Town:</td><TD align="left"><INPUT type="text"
name="town" maxlength="32" value=""></td>
<TD align="right">Web:</TD><TD align="left"><INPUT type="text"
name="web" maxlength="32" value=""></td>
</TR><TR>

<TD align="right">County/state:</td><TD align="left"><INPUT
type="text" name="county" maxlength="32" value=""></td>
<TD align="right">Credit Limit:</TD><TD align="left"><INPUT
type="text" name="credit_limit" maxlength="32" value="0"></td>
</TR><TR>
<TD align="right">Post/ZIP code:</td><TD align="left"><INPUT
type="text" name="postcode" maxlength="32" value=""></td>
<TD align="right">Status:</TD>
<TD align="left">
Cash<input type="radio" name="credit_status" value="cash" checked>

Credit<input type="radio" name="credit_status" value="credit" >
On Hold<input type="radio" name="credit_status" value="hold" >
</td>
</TR>


At the least I would have thought that this would override any other
styles - from the relevant stylesheet.


INPUT, TEXTAREA, SELECT, OPTION {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
color: white;
font-size: 12px;
background-color: #60a060;

}

No HTML errors or warnings are given: No errors are shown..


Any ideas? graphics issue maybe?

 

[David Mark]

Another extremely weird feature from iE6

I have a site, whose predominant colors are green background with white
writing.

There is a style sheet with many styles, of which all either specify a
green background, or don't specify any. Body defaults to green.

At the customer site, some <INPUT type="TEXT"> elements showed up with a
white background on one machine running IE6. I didn't have a chance to
investigate further. Highlighting the white on white entered text showed
it was there, just invisible

Further madness occurred when on this machine a form containing about 10
of such inputs, that as far as I know were identical HTML, showed up
with some white and some green background.

IE changes background colors of text inputs to indicate it has auto-
fill choices available.

Regardless, white text on a green background is a bad idea for text
inputs.

My own test machine running AFAICT the same IE6 version does NOT display
this problem.

Her is a code snippet that gave some fields white, some green:-

<TABLE width=90% border="0">
<TR><TD align="right">Name:</td><TD align="left"><INPUT type="text"
maxlength="32"name ="name" value=""></td>

<TD align="right">Phone:</TD><TD align="left"><INPUT type="text" name=
"phone" maxlength="32" value=""></td>
</TR><TR>
<TD align="right">Address 1:</td><TD align="left"><INPUT type="text"
name="address1" maxlength="30" value=""></td>
<TD align="right">Mobile Phone:</TD><TD align="left"><INPUT
type="text" name=" phone2" maxlength="30" value=""></td>
</TR><TR>
<TD align="right">Address 2:</td><TD align="left"><INPUT type="text"
name="address2" maxlength="32" value=""></td>
<TD align="right">Fax:</TD><TD align="left"><INPUT type="text"
name="fax" maxlength="32" value=""></td>

</TR><TR>
<TD align="right">Address 3:</td><TD align="left"><INPUT type="text"
name="address3" maxlength="32" value=""></td>
<TD align="right">Email:</TD><TD align="left"><INPUT type="text"
name="email" maxlength="32" value=""></td>
</TR><TR>
<TD align="right">Town:</td><TD align="left"><INPUT type="text"
name="town" maxlength="32" value=""></td>
<TD align="right">Web:</TD><TD align="left"><INPUT type="text"
name="web" maxlength="32" value=""></td>
</TR><TR>

<TD align="right">County/state:</td><TD align="left"><INPUT
type="text" name="county" maxlength="32" value=""></td>
<TD align="right">Credit Limit:</TD><TD align="left"><INPUT
type="text" name="credit_limit" maxlength="32" value="0"></td>
</TR><TR>
<TD align="right">Post/ZIP code:</td><TD align="left"><INPUT
type="text" name="postcode" maxlength="32" value=""></td>
<TD align="right">Status:</TD>
<TD align="left">
Cash<input type="radio" name="credit_status" value="cash" checked>

Credit<input type="radio" name="credit_status" value="credit" >
On Hold<input type="radio" name="credit_status" value="hold" >
</td>

Why the sudden change of case?

</TR>

Regardless of colors, this is an inaccessible mess. Lose the table,
add labels, etc. Try tabbing through it and you will get the idea.

At the least I would have thought that this would override any other
styles - from the relevant stylesheet.

INPUT, TEXTAREA, SELECT, OPTION {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
color: white;
font-size: 12px;
background-color: #60a060;

Verdana is not appropriate for a Web page. 12px Verdana is even less
appropriate. Verdana is a relatively large font, which may or may not
be legible at 12px. When missing, its replacement will invariably be
a smaller font, which is less likely to be legible at 12px.
Regardless of the font, never size text with pixel units (IE won't
scale it.)

}

No HTML errors or warnings are given: No errors are shown..

The HTML doesn't look valid to me. And none of this has anything to
do with JavaScript. You should submit your deezyne to CSS and/or HTML
groups for further assistance.

 

[Espen Koht]

Verdana is not appropriate for a Web page. 12px Verdana is even less
appropriate. Verdana is a relatively large font, which may or may not
be legible at 12px.

Care to make this argument more coherent? Verdana is designed for
legibility on computer screens and by all accounts achieves this, even
at small sizes.

 

[The Natural Philosopher]

IE changes background colors of text inputs to indicate it has auto-
fill choices available.

Hmm.

Regardless, white text on a green background is a bad idea for text
inputs.

Why? It looks great and has good contrast..

Why the sudden change of case?

Why not?

I use different cases to help debug actually - useful when PHP
generation is spewing out a load of similar items.

Regardless of colors, this is an inaccessible mess. Lose the table,
add labels, etc. Try tabbing through it and you will get the idea.

Why? it works the way I want it to..

Verdana is not appropriate for a Web page. 12px Verdana is even less
appropriate. Verdana is a relatively large font, which may or may not
be legible at 12px. When missing, its replacement will invariably be
a smaller font, which is less likely to be legible at 12px.
Regardless of the font, never size text with pixel units (IE won't
scale it.)

I noticed that ;-)

However it looks OK to me.

The HTML doesn't look valid to me. And none of this has anything to
do with JavaScript. You should submit your deezyne to CSS and/or HTML
groups for further assistance.

MM. No errors shown tho.
Not HTML./CS or anything.

 

[The Natural Philosopher]

Care to make this argument more coherent? Verdana is designed for
legibility on computer screens and by all accounts achieves this, even
at small sizes.

Exactly.

When looking for a legible small no serif font, we went through a load
of options testing against IE5,6,7 Firefox and safari, and that
particular one came up looking decent.

 

[David Mark]

Care to make this argument more coherent? Verdana is designed for
legibility on computer screens and by all accounts achieves this, even
at small sizes.

It is not available on all platforms. Ask about this in a CSS group
as this is off-topic here.

 

[David Mark]

Why? It looks great and has good contrast..

Dark on light is harder to read than light on dark. Also, the cursor
is normally a dark color.

Your particular choices are sub-standard in terms of contrast (color
and brightness.)

Why not?

It is silly to have opening tags that don't match their closing
counterparts.

I use different cases to help debug actually - useful when PHP
generation is spewing out a load of similar items.

It makes <TaBlE> or <tR> a bit easier t spot than making it all look the
same.

If you must do that, make the closing tags the same.

Why? it works the way I want it to..

You don't design pages based on what you want. And do you really want
to enter a name, then a phone number, then address 1, then another
phone number, then address 2, etc.?

Furthermore, screen reader users will never be able to make sense of
that table.

I noticed that ;-)

However it looks OK to me.

What looks okay on your monitor is of no concern (unless you are to be
the sole user.)

MM. No errors shown tho.

That would depend on your DOCTYPE. I assume you are using HTML
transitional. Why would you use that for a new page?

Not HTML./CS or anything.

Try an HTML or CSS group for further assistance.

 

[David Mark]

Exactly.

Off the mark actually.

When looking for a legible small no serif font, we went through a load
of options testing against IE5,6,7 Firefox and safari, and that
particular one came up looking decent.

On Windows of course. Users of other operating systems will likely
see a different font, which will be smaller than you intended as you
based your deezyne on 12px Verdana.

 

[Erwin Moller]

The Natural Philosopher wrote:


Hi,

Small typo there.
I doubt it will solve your problem, but you misplaced the space between
maxlength="32"name ="name".

Regards,
Erwin Moller

 

[rf]

Care to make this argument more coherent? Verdana is designed for
legibility on computer screens and by all accounts achieves this, even
at small sizes.

Google will help you here. Search newsgroups.

 

[The Natural Philosopher]

It is not available on all platforms. Ask about this in a CSS group
as this is off-topic here.

thats why its not the only font specified.

 

[Thomas 'PointedEars' Lahn]

Of course it is appropriate; AFAIK it was designed for the Web. One should
take care of the fact that it could not be available, though, and provide
one or more alternatives, of which the last in the list should be the
generic `sans-serif' font family name, as recommended in the CSS
Specification. (That requires the use of CSS of course.)

IBTD.

Verdana is a typeface especially designed to be legible at small font sizes,
even with anti-aliasing.

Care to make this argument more coherent? Verdana is designed for
legibility on computer screens and by all accounts achieves this, even
at small sizes.

The actual size of a pixel depends on the display resolution, and
IE before version 7.0 does not allow scaling of pixel-sized text.
So David has a small piece of a pix^W point there.


HTH

PointedEars

 

[Espen Koht]

Google will help you here. Search newsgroups.

All that google appears to bring up are pages like this:
<http://www.xs4all.nl/~sbpoley/webmatters/verdana.html> which are
similarly incoherent and manages to summarising the argument for "Why
you should avoid the Verdana font" as "web-authors are recommended to
avoid using Verdana, at least for the main text of the page". How
enlightening, but how about some reasoning before you draw your
conclusion? That said, at least it doesn't make the original claim that
Verdana may not be legible at these sizes, which simply isn't correct.

 

[David Mark]

All that google appears to bring up are pages like this:
<http://www.xs4all.nl/~sbpoley/webmatters/verdana.html> which are
similarly incoherent and manages to summarising the argument for "Why
you should avoid the Verdana font" as "web-authors are recommended to
avoid using Verdana, at least for the main text of the page". How
enlightening, but how about some reasoning before you draw your
conclusion? That said, at least it doesn't make the original claim that
Verdana may not be legible at these sizes, which simply isn't correct.

Go back and re-read my original statement on the subject. You
completely missed the point, perhaps due to the fact that you snipped
half of the argument. If you have further questions about fonts, try
a CSS group.

 

[David Mark]

Of course it is appropriate; AFAIK it was designed for the Web. One should

It is inappropriate for the Web.

take care of the fact that it could not be available, though, and provide
one or more alternatives, of which the last in the list should be the
generic `sans-serif' font family name, as recommended in the CSS
Specification. (That requires the use of CSS of course.)


IBTD.

Of course you do.

Verdana is a typeface especially designed to be legible at small font sizes,
even with anti-aliasing.

It is too big at 100%. That's why most deezyners shrink it down to
something like 12px or 85% or whatever, clueless to the fact that many
users will see a replacement font that is smaller than Verdana,
rendering their carefully tuned presentation illegible.

The actual size of a pixel depends on the display resolution, and
IE before version 7.0 does not allow scaling of pixel-sized text.
So David has a small piece of a pix^W point there.

Thanks professor. And just what is a "pix^W?"

 

[Jules]

It is not available on all platforms. Ask about this in a CSS group
as this is off-topic here.

Isn't that true of *any* font? I thought the only real guarantee was that
a browser will have available at least on serif font, one sans-serif, and
one fixed-width. Beyond that, it's all guesswork...

 

[Jules]

On Windows of course. Users of other operating systems will likely
see a different font, which will be smaller than you intended as you
based your deezyne on 12px Verdana.

Will 12px Verdana be bigger than 12px anything else, then?

 

[David Mark]

Isn't that true of *any* font? I thought the only real guarantee was that

It is more true of Verdana. And *any* font will not have the same
issues as Verdana. Google for "Verdana font Web."

a browser will have available at least on serif font, one sans-serif, and
one fixed-width. Beyond that, it's all guesswork...

Guesswork has nothing to do with it.

 

[David Mark]

Will 12px Verdana be bigger than 12px anything else, then?

Bigger than most.

 

[David Mark]

Depends. In contrast to pt-, em- and percent-sized fonts, for px-sized
fonts the distance from the descent to the cap will always be as many
pixels as the font-size says, provided the font is scalable to that size.

I don't know what "deezyne" means, but the fact above is actually a
disadvantage, because as I have said before the actual size of a pixel
depends on the display resolution. So the higher the display resolution,
the smaller the px-sized font will appear (the same person,
eye-screen-distance, and display device, no virtual desktops provided).

It is unlikely that 12px Verdana would appear bigger than any other
12px-sized font, the same initial conditions provided: font sizes around
12px are likely to be displayed accordingly with fonts that are suited for
the Web (it is unlikely that users will use fonts that don't have this
property).

You are wrong. See for yourself:

<div style="font-family:verdana;font-size:12px">The quick brown fox
jumped over the lazy dog</div>
<div style="font-family:arial;font-size:12px">The quick brown fox
jumped over the lazy dog</div>