Closed Bug 146096 Opened 19 years ago Closed 18 years ago

CSS on input type=file ignores border and renders sloppy browse button

Categories

(Core :: Layout, defect, P4)

x86
All
defect

Tracking

()

RESOLVED FIXED
Future

People

(Reporter: nl, Assigned: john)

References

Details

(Keywords: testcase)

Attachments

(2 files)

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Q312461; 
APC; .NET CLR 1.0.2914)
BuildID:    20020304

Using CSS styles on input type=file creates bad layout. This may be related to 
bug 52500. 

It appears the button is bottom aligned and the text is top aligned, but there 
is some overpainting or something if the background color is set.

Reproducible: Always
Steps to Reproduce:
Save & try this file:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.text { border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background-color: #eeeeee;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	height: 12px;
	}

.file { border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background-color: #eeeeee;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	height: 12px;
	}

</style>
</head>

<body bgcolor="#FFFFFF">
<form>
<input type="file" name="file" enctype="multipart/form-data" class="file">
<br /><br /><br />
<input type="text" name="text" class="text">
</form>
</body>
</html>


Actual Results:  Button & text field are different sizes and have different 
alignments, and there are display artifacts around the button

Expected Results:  Button & text field should be the same size

(I can't investigate further because I upgraded to Mozilla 1.0 RC2 and now 
can't start Mozilla - see bug 146093)
note shading above the button. IE 6 top aligns the button - not sure what the
correct behaviour is.
Changing QA contact to Moied
QA Contact: petersen → moied
I am also seeing this, 2002052508 WXP.

Could this be related to bug 52500?
Status: UNCONFIRMED → NEW
Ever confirmed: true
I experienced the same problem when I put the document in standard mode.

Another thing I have noticed: If you try it in IE, Microsoft will arbitrarily
shrink the font down to a size that fits (in this case, about 7px). The font, as
styled, would not fit accounting for padding and such. However that does not
mean the document should break as it does, just that the text should fall below
the bottom of the text field (without being visible outside the borders as it
occurs now). The regular textbox behaves correctly.

Sorry about not noticing that you also found bug 52500 similar.
Summary: CSS on input type=file doesn't work → CSS on input type=file ignores border and renders sloppy browse button
Priority: -- → P3
Reassigning to John
Assignee: attinasi → jkeiser
Priority: P3 → P4
Target Milestone: --- → Future
Keywords: testcase
OS: Windows 2000 → All
This got fixed when bug 167236 landed.
Status: NEW → RESOLVED
Closed: 18 years ago
Depends on: 167236
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.