input fields do not correclty render text when using stylesheets that specify an input background color

RESOLVED DUPLICATE of bug 182107

Status

()

Product:
Core
Component:
Web Painting
Status:
RESOLVED DUPLICATE of bug 182107
Reported:
16 years ago
Modified:
4 months ago

People

(Reporter: dpalm, Assigned: roc)

Tracking

({testcase})

Version:
Trunk
Platform:
x86
Linux
Keywords:
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments, 1 obsolete attachment)

This is to demonstrate this bug
68.99 KB, text/html
Details
absolute positioned z-index:-1 prevent text in input to be shown
136 bytes, text/html
Details
(Reporter)

Description

•
16 years ago 
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.3a) Gecko/20021212
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.3a) Gecko/20021212

This problem reproduces in our companies webpages, but you can only view the
pages with an account at our company (NetLedger.com). (I am a QA engineer at
Netledger, and as I work under Linux, I cannot use Internet Exploder, but it is
difficult to use our product with current versions of Mozilla, because of this bug)
The problem is that certain text fields (input type='text') use a style, and the
style specifies that the background of the input be #FFFFE5 (which is a light
yellow color) and that the text color is black. However, when newer version of
mozillas (and even some not as new versions like 1.2) the text is invisible (I'm
assuming that the text is being displayed as #FFFFE5 on an #FFFFE5 background,
therefore invisible, but maybe its not displaying at all)

I've seen this in both the XFT and regular builds of mozilla. It also appeared
in Pheonix in windows, so I know it's not just a linux issue. Its something in
Gecko. 

It is hard to enter text when you cannot read it. 
I've included a portion of our css that I hope may be helpful( I dont know a lot
about CSS) 

.inputrtreq         { font-size: 9pt; color: #000000; background-color: #FFFFE5;
text-align: right; }

contact me if you need html and full css files, I will try and get them to you.
(Though I am including snippets)


Reproducible: Always

Steps to Reproduce:
1. Go to a website where input fields use the CSS shown in the details
2. Notice that the text you enter is invisible
3.

Actual Results:  
I can't see the text against the yellow background

Expected Results:  
Displayed black text against the yellow background.

heres the full CSS file that I believe is being used:.portletlabel {  font-size:
8pt; font-weight: bold }
.crumb {  font-size: 8pt }
.headbarsub { font-size: 8pt; font-weight: normal }
.ontab {  font-size: 8pt; text-decoration: none; font-weight: bold}
.offtab {  font-size: 8pt; text-decoration: none; font-weight: bold}
.ontabbottom {  font-size: 8pt; text-decoration: none; }
.offtabbottom {  font-size: 8pt; text-decoration: none; }
.bgontabbottom {  font-size: 8pt;}
.bgofftabbottom {  font-size: 8pt;}
.ontabhover {  font-size: 8pt; text-decoration: underline; font-weight: bold }
.offtabhover {  font-size: 8pt; text-decoration: underline; font-weight: bold}
.btntext {  font-size: 8pt; text-decoration: none}
.btntexthover {  font-size: 8pt; text-decoration: underline}
.medtext         	{ font-size: 9pt }
.medtextbold     	{ font-size: 9pt; font-weight: bold }
.medtextboldnolink	{ font-size: 9pt; font-weight: bold ; color: #000000 ;
text-decoration: none}
.text               { font-size: 8pt }
.textctr            { font-size: 8pt; text-align: center}
.textrt             { font-size: 8pt; text-align: right}
.inputrt            { font-size: 9pt; color: #000000; text-align: right; }
.inputrtreq         { font-size: 9pt; color: #000000; background-color: #FFFFE5;
text-align: right; }
.textnolink         { font-size: 8pt; text-decoration: none}
.textul             { font-size: 8pt; text-decoration: underline}
.textbold           { font-size: 8pt; font-weight: bold }
.textboldctr        { font-size: 8pt; font-weight: bold; text-align: center }
.textboldrt         { font-size: 8pt; font-weight: bold; text-align: right }
.textboldul         { font-size: 8pt; font-weight: bold ; text-decoration:
underline}
.textboldnolink     { font-size: 8pt; font-weight: bold ; color: #000000 ;
text-decoration: none}
.textdark           { font-size: 8pt; color: #FFFFFF; background-color: #666666}
.textdarkbold       { font-size: 8pt; color: #FFFFFF; background-color: #666666;
font-weight: bold}
.textdarkboldnolink { font-size: 8pt; color: #FFFFFF; background-color: #666666;
font-weight: bold; text-decoration: none}
.textdarkboldul     { font-size: 8pt; color: #FFFFFF; background-color: #666666;
font-weight: bold; text-decoration: underline}
.textdarkctr        { font-size: 8pt; color: #FFFFFF; background-color: #666666;
text-align: center}
.textdarkrt         { font-size: 8pt; color: #FFFFFF; background-color: #666666;
text-align: right}
.textboldul         { font-size: 8pt; color: #000000; font-weight: bold;
text-decoration: underline}
.input              { font-size: 9pt; color: #000000; }
.inputreq           { font-size: 9pt; color: #000000; background-color: #FFFFE5 }
.nlbutton           { font-size: 9pt; color: #000000; font-weight: bold; }
.bgbutton           { font-size: 9pt; color: #000000; font-weight: bold; }
.textwhite          { font-size: 8pt; color: #FFFFFF}
.textwhitenolink    { font-size: 8pt; color: #FFFFFF; text-decoration: none }
.textwhitert        { font-size: 8pt; color: #FFFFFF ; text-align: right}
.textmedium         { font-size: 8pt; color: #000000; background-color: #AAAAAA}
.textmediumctr      { font-size: 8pt; color: #000000; background-color: #AAAAAA
; text-align: center}
.textmediumrt       { font-size: 8pt; color: #000000; background-color: #AAAAAA
; text-align: right}
.smalltext {  font-size: 8pt }
.tinytext {  font-size: 7pt}
.smalltextul { font-size: 8pt ; text-decoration: underline}
.smalltextrt { font-size: 8pt ; text-align: right}
.smalltextctr { font-size: 8pt ; text-align: center}
.smalltextb { font-size: 8pt ; font-weight: bold}
.smalltextbrt { font-size: 8pt ; font-weight: bold; text-align: right}
.smalltextbnolink { font-size: 8pt ; font-weight: bold; text-decoration: none}
.smalltextnolink { font-size: 8pt ; text-decoration: none}
.smallgraytext { font-size: 8pt ; ; color: #666666;}
.tinygraytext { font-size: 7pt ; ; color: #666666;}
.smallgraytextul { font-size: 8pt ; ; color: #666666; text-decoration: underline;}
.smallgraytextrt { font-size: 8pt ; text-align: right ; color: #666666; }
.smallgraytextnolink { font-size: 8pt ; color: #666666; text-decoration: none}
.smalltextsub1 { font-size: 8pt ; text-indent: 20pt}
.pic {  text-align: center; vertical-align: top;  font-size: 8pt ; font-weight:
normal}
.ctr {  text-align: center}
.rt { text-align: right }
.graylt { background-color: #CCCCCC }
.graymd { background-color: #AAAAAA }
.graydk {  background-color: #666666 }
.errortext {  font-size: 8pt; color: #EE0000; background-color: #FFF4F4}
.tasktitle { font-size: 14 pt;}
.taskstatus { font-size: 14 pt;}
.bigboldtext { font-size: 16 pt; font-weight:bold}
.buttontext { font-size: 8pt ; text-decoration: none ; color: #000000}
.bigbuttontextb { font-size: 10pt ; text-decoration: none ; color: #FFFFFF;
font-weight: bold}
.adtext {  font-size: 8pt; color: #000000; text-decoration: none;}
.segmentnavlarge		{ font-size: 12pt; font-weight: bold; text-align: center}
.segmentnavtext		{ font-size: 10pt}
.segmentnavtexton		{ font-size: 11pt;  color: #CC0000; font-weight: bold;}
.listtable { background-color: white; border-width: 1 0 0 0; border-color:
white; border-style: solid; }
.listheader { height: 100%; padding: 2px; vertical-align: top; border-style:
solid; border-width: 0 1 1 0; background-color: #CCCCCC; border-color:  white
#54647A #54647A white; margin-left: 1; }
.portlet { background-color: #DFE2E7}
.portletlabel { color: #000000; background-color: #DFE2E7; }
.bgbar {  background-color: #C1C8D2}
.bglt {  background-color: #F3F4F7}
.bglttext { background-color: #F3F4F7; font-size: 8pt; color: #000000}
.bglttextctr { background-color: #F3F4F7; font-size: 8pt ; text-align: center;
color: #000000}
.bglttextrt { background-color: #F3F4F7; font-size: 8pt ; text-align: right;
color: #000000}
.bgbutton { background-color: #FFE599 }
.bgmd { background-color: #DFE2E7}
.bgontab {  background-color: #C1C8D2; text-align: center; vertical-align: middle}
.bgofftab { background-color: #8491A4; text-align: center; vertical-align: middle}
.bgontabbottom { color: #000000; background-color: #F3F4F7;}
.bgofftabbottom { color: #666666; background-color: #DFE2E7;}
.bgontabbottommid { color: #000000; background-color: #F3F4F7; border-style:
solid; border-width: 1 0 1 0; border-color: #cccccc white #F3F4F7 white;}
.bgofftabbottommid { color: #666666; background-color: #DFE2E7; border-style:
solid; border-width: 1 0 1 0; border-color: #DFE2E7 white #cccccc white;}
.ontabbottom { color: #000000; }
.offtabbottom { color: #666666; }
.bgon {  background-color: #C1C8D2;}
.bgoff { background-color: #8491A4;}
.headbar { font-size: 8pt; color: #424548; text-decoration: none;
background-color: #C1C8D2}
.headbarsub { color: #424548 }
.crumb { color: #728197 }
.ontab { color: #000000}
.offtab { color: #FFFFFF}
.ontabhover { color: #000000}
.offtabhover { color: #FFFFFF}
.btntext { color: #FFFFFF}
.btntexthover { color: #FFFFFF}
.smalltextlt { font-size: 8pt ; background-color: #F3F4F7; color: #000000}
.tasktitle { color: #000000 }
.taskstatus { color: #8491A4}
.texttable          { font-size: 8pt; color: #000000; background-color: #F3F4F7;
padding: 2 5 2 5 ; border-style: solid; border-width: 1 0 0 0; border-color:
white; vertical-align: top;}
.texttablebold      { font-size: 8pt; color: #000000; background-color: #F3F4F7;
padding: 2 5 2 5; font-weight: bold; border-style: solid; border-width: 1 0 0 0;
border-color: white; vertical-align: top;}
.texttablectr       { font-size: 8pt; color: #000000; background-color: #F3F4F7;
text-align: center; padding: 2 5 2 5; border-style: solid; border-width: 1 0 0
0; border-color: white; vertical-align: top;}
.texttablert        { font-size: 8pt; color: #000000; background-color: #F3F4F7;
text-align: right; padding: 2 5 2 5; border-style: solid; border-width: 1 0 0 0;
border-color: white; vertical-align: top;}
.printtexttable     { font-size: 8pt; color: #000000; padding: 2 5 2 5;
border-style: solid; border-width: 1 0 0 0; border-color: white; vertical-align:
top;}
.printtexttablebold { font-size: 8pt; color: #000000; padding: 2 5 2 5;
font-weight: bold; border-style: solid; border-width: 1 0 0 0; border-color:
white; vertical-align: top;}
.printtexttablectr  { font-size: 8pt; color: #000000; text-align: center;
padding: 2 5 2 5; border-style: solid; border-width: 1 0 0 0; border-color:
white; vertical-align: top;}
.printtexttablert   { font-size: 8pt; color: #000000; text-align: right;
padding: 2 5 2 5; border-style: solid; border-width: 1 0 0 0; border-color:
white; vertical-align: top;}
.seltexttable       { background-color: #737982; font-size: 8pt; padding: 2 5 2
5; color: #ffffff; border-style: solid; border-width: 1 0 0 0; border-color:
white; vertical-align: top;}
.seltexttablectr    { background-color: #737982; font-size: 8pt ; text-align:
center; padding: 2 5 2 5; color: #ffffff; border-style: solid; border-width: 1 0
0 0; border-color: white; vertical-align: top;}
.seltexttablert     { background-color: #737982; font-size: 8pt ; text-align:
right; padding: 2 5 2 5; color: #ffffff; border-style: solid; border-width: 1 0
0 0; border-color: white; vertical-align: top;}
.smalltextrt { color: #000000}
.smalltext { color: #000000}
.tinytext { color: #000000}
.text { color: #000000}
.textbold { color: #000000}
.textboldul { color: #000000}
.textboldnolink { color: #000000}
.listheadernosort { height: 100%; padding: 2 5 2 5; vertical-align: top; color:
#666666; background-color: #F3F4F7; }
.medtext         	{ color: #000000 }
.medtextbold     	{ color: #000000 }
.medtextboldnolink	{ color: #000000 }
.bgltmedtext 		{ background-color: #F3F4F7; font-size: 9pt; color: #000000}
.ddmAnchor {text-decoration: none; cursor: default;}
.ddmInnerTable {border-style: solid; border-width: 1; border-color: #FFFFFF
#8492A5 #8492A5 #FFFFFF;}
.ddmText { FONT-SIZE: 8pt; text-decoration: none; vertical-align: center;}
.ddmTextHasChild  { FONT-SIZE: 8pt; text-decoration: none; vertical-align: center;}
.ddmTextSeperator { FONT-SIZE: 8pt; text-decoration: none;}
.ddmSeperator {background-color: #8492A5}
.ddmSeperatorEmpty {background-color: #FFFFFF}
.ddmTextOver { background-color:#FFFFFF; FONT-SIZE: 8pt; text-decoration: none;
vertical-align: center;}
.ddmDiv {position: absolute; background: #DFE2E7; border-style: solid;
border-width: 1; border-color: #44546B; padding: 0; cursor: default;}
.ddmSpan { }
.ddmArrow {font-family: WebDings; position: absolute; COLOR: #8492A5;
vertical-align: center; FONT-SIZE: 8pt;}
.ddmArrowOver {font-family: WebDings; background-color: #FFFFFF position:
absolute; vertical-align: center; FONT-SIZE: 8pt;}
.dropdownInput { background-color: white; color: black; font-size: 8pt;
padding-left: 1; border-style: solid; border-width: 1; border-color: #999999;
background-image: url(/images/forms/ddarrow.gif); background-repeat: no-repeat;
background-position: center right; cursor: default}
.dropdownDiv { position: absolute; background: white; border-color: #999999;
border-style: solid; border-width: 1; cursor: default; padding: 2;
scrollbar-face-color: #dddddd; scrollbar-highlight-color: #dddddd;
scrollbar-3dlight-color: #dddddd;
scrollbar-darkshadow-color: #dddddd; scrollbar-shadow-color: #999999;
scrollbar-arrow-color: black; scrollbar-track-color: #eeeeee; 
font-size: 8pt; white-space: nowrap;  }	
.dropdownNotSelected { FONT-SIZE: 8pt; color: black; }
.dropdownSelected { FONT-SIZE: 8pt; color: white; background-color: #222288; }
.bg {  background-color: #FFFFFF }
.num { font-size: 8pt; background-color: #FFFFFF; text-align: right}
.numb { font-size: 8pt; background-color: #FFFFFF; text-align: right ;
font-weight: bold }
.stringb { font-size: 8pt; background-color: #FFFFFF ; font-weight: bold }
.stringbctr { font-size: 8pt; background-color: #FFFFFF ; font-weight: bold ;
text-align: center }
.company { font-size: 14pt; font-weight: bold; text-align: center}
.rpttitle { font-size: 16pt; font-weight: bold; text-align: center}
.rptsubtitle { font-size: 14pt; font-weight: bold; text-align: center}
.bgmdtext { background-color: #DFE2E7; font-size: 8pt; color: }
.bgmdtextctr { background-color: #DFE2E7; font-size: 8pt ; text-align: center;
color: #000000}
.bgmdtextrt { background-color: #DFE2E7; font-size: 8pt ; text-align: right;
color: #000000}
.labelRow { visibility: hidden }
textarea { overflow: auto; border-style: solid; border-width: 1; border-color:
#999999 }
input { border-style: solid; border-width: 1; border-color: #999999 }
.inputrt { border-style: solid; border-width: 1; border-color: #999999 }
.inputreq { border-style: solid; border-width: 1; border-color: #999999; }
.inputrtreq { border-style: solid; border-width: 1; border-color: #999999; }
.bgbutton { border-style: solid; border-width: 1; border-color: #999999 }
.nlbutton { border-style: solid; border-width: 1; border-color: #999999;}
@media screen {
body { font-family: Verdana,Helvetica,sans-serif }
td { font-family: Verdana,Helvetica,sans-serif }
select { font-family: Verdana,Helvetica,sans-serif; }
textarea { font-family: Verdana,Helvetica,sans-serif; }
input { font-family: Verdana,Helvetica,sans-serif; }
.noprint { }
.printonly { display: none; }
.scrollarea { overflow: auto; }
}
@media print {
body { font-family: Arial,Helvetica,sans-serif; }
td { font-family: Arial,Helvetica,sans-serif; }
textarea { font-family: Arial,Helvetica,sans-serif; }
select { font-family: Arial,Helvetica,sans-serif; }
input { font-family: Arial,Helvetica,sans-serif; }
.noprint { display: none; }
.printonly { }
.scrollarea { }
}


----------------------------------------------------------------------
HTML SNIPPET

<TD nowrap title='Report Title'><span id="title_fs" style="white-space:
nowrap"><input onChange="window.ischanged =
true;this.isvalid=validate_field(this,'text',true,false);this.checkvalid=false;"
name="title" type="text" maxlength="40" onFocus="if (this.isvalid == true ||
this.isvalid == false) this.checkvalid=true;" class="inputreq" onBlur="if
(this.checkvalid == true)
{this.isvalid=validate_field(this,'text',false,false);}if (this.isvalid ==
false) {this.focus(); this.select(); }" size="20" value="A/P Register"></span>

Comment 1

•
16 years ago 
Created attachment 111206 [details]
Strange input behaviour

I do a testcase with all of you code, but everything seems to be normal. Maybe
there is another cause? Could you made special test page, shown you problem?
(Reporter)

Comment 2

•
16 years ago 
Created attachment 111228 [details]
This is to demonstrate this bug

Hmm it may not have to do with that CSS after all.
Here, I am attaching an html (Outside of its environment it will get
a few errors, like
errors finding empty.html, but ignore those - I dont have time right
now to create an example html to reproduce this, so this will have to
do.)

Load the page in mozilla (it will be horribly broken because i've
ripped it out of it's home, but the error that I'm talking about
shows up). Try to type in the "Report Title" and
"Description" fields-notice
that the text is invisible. 

BTW if this turns out to be a problem with our HTML, let me know and
I'll file it as a bug internally here.

Thanks.

Comment 3

•
16 years ago 
O'k. Source of you trouble is this div:

<div id='sort_tab_div'
style='position:absolute;width:100%;visibility:hidden;z-index:-1'
class='offtab'></div>
</div>

So it's negative z-index trouble (better no use it at all).

Comment 4

•
16 years ago 
Created attachment 111232 [details]
absolute positioned z-index:-1 prevent text in input to be shown

Text in input field could be entered, but for uncertain reason letters is not
shown.
Attachment #111206 - Attachment is obsolete: true

Comment 5

•
16 years ago 
over to views; ccing jkeiser/kin.  This seems like a bizarre invalidation
problem, and I recall seeing this before....
Assignee: form → roc+moz
Component: Layout: Form Controls → Views
Keywords: testcase
QA Contact: tpreston → ian
Whiteboard: DUPEME

Comment 6

•
16 years ago 
Ah! Views then dupe of bug 182107.

Comment 7

•
16 years ago 

*** This bug has been marked as a duplicate of 182107 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → DUPLICATE

Updated

•
5 years ago
Whiteboard: DUPEME
Component: Layout: View Rendering → Layout: Web Painting
Product: Core → Core
You need to log in before you can comment on or make changes to this bug.