Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Possibly OT. IE6 and background colors..

Reply
Thread Tools

Possibly OT. IE6 and background colors..

 
 
The Natural Philosopher
Guest
Posts: n/a
 
      10-26-2007
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?
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      10-26-2007
On Oct 26, 4:56 am, The Natural Philosopher <(E-Mail Removed)> wrote:
> 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.

 
Reply With Quote
 
 
 
 
Espen Koht
Guest
Posts: n/a
 
      10-26-2007
In article <(E-Mail Removed). com>,
David Mark <(E-Mail Removed)> wrote:

> 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.
 
Reply With Quote
 
The Natural Philosopher
Guest
Posts: n/a
 
      10-26-2007
David Mark wrote:
> On Oct 26, 4:56 am, The Natural Philosopher <(E-Mail Removed)> wrote:
>> 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.
>


Hmm.

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


Why? It looks great and has good contrast..

>> 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?


Why not?

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.

>
>> </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.
>


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

>> 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.)
>


I noticed that

However it looks OK to me.


>> }
>>
>> 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.
>


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

 
Reply With Quote
 
The Natural Philosopher
Guest
Posts: n/a
 
      10-26-2007
Espen Koht wrote:
> In article <(E-Mail Removed). com>,
> David Mark <(E-Mail Removed)> wrote:
>
>> 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.


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.
 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      10-26-2007
On Oct 26, 6:56 am, Espen Koht <(E-Mail Removed)> wrote:
> In article <(E-Mail Removed). com>,
> David Mark <(E-Mail Removed)> wrote:
>
> > 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.


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


 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      10-26-2007
On Oct 26, 6:58 am, The Natural Philosopher <(E-Mail Removed)> wrote:
> David Mark wrote:
> > On Oct 26, 4:56 am, The Natural Philosopher <(E-Mail Removed)> wrote:
> >> 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.

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

>
> 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.)

>
>
>
>
> >> 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?

>
> 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.

>
>
> >> </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.

>
> 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.

>
>
>
>
>
> >> 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.)

>
> 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.)

>
> >> }

>
> >> 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.

>
> 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.

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      10-26-2007
On Oct 26, 7:00 am, The Natural Philosopher <(E-Mail Removed)> wrote:
> Espen Koht wrote:
> > In article <(E-Mail Removed). com>,
> > David Mark <(E-Mail Removed)> wrote:

>
> >> 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.

>
> 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.

 
Reply With Quote
 
Erwin Moller
Guest
Posts: n/a
 
      10-26-2007
The Natural Philosopher wrote:

<snip>

>>> 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>
>>>


Hi,

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

Regards,
Erwin Moller
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      10-26-2007

"Espen Koht" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <(E-Mail Removed). com>,
> David Mark <(E-Mail Removed)> wrote:
>
>> 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.


Google will help you here. Search newsgroups.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE6 Garbage Collection and general IE6 slowness problems timothytoe Javascript 4 06-03-2008 05:17 PM
AJAX problem: slow response using IE6 on Win2000 versus IE6 on XP Pugi! Javascript 0 02-05-2007 10:34 AM
IE6 SP1 rendering vs IE6 SP2 rendering Peter Mount HTML 4 01-31-2006 08:01 AM
Bug in IE6 , cant remove ie6 to replace Ockerr Computer Support 2 01-21-2005 04:01 PM
Just one ie6 template that works with ie6!? Ivor O'Connor HTML 4 11-25-2003 09:16 PM



Advertisments