Closed
Bug 146096
Opened 22 years ago
Closed 22 years ago
CSS on input type=file ignores border and renders sloppy browse button
Categories
(Core :: Layout, defect, P4)
Tracking
()
RESOLVED
FIXED
Future
People
(Reporter: nl, Assigned: john)
References
Details
(Keywords: testcase)
Attachments
(2 files)
Screenshot of the problem
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)
|
Reporter | |
Comment 1•22 years ago
|
||
note shading above the button. IE 6 top aligns the button - not sure what the
correct behaviour is.
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
|
||
Comment 6•22 years ago
|
||
Reassigning to John
Assignee: attinasi → jkeiser
Priority: P3 → P4
Target Milestone: --- → Future
|
||
Comment 7•22 years ago
|
||
This got fixed when bug 167236 landed.
You need to log in
before you can comment on or make changes to this bug.
Description
•