MitchellVII
asked on
Firefox <input type="file"> control is having some formatting problems on my ASP page...
Hi,
I'm just finishing up my ASP web form and having some problems with <input type="file">.
Here is the HTML:
<input type=file name="Resume" id="Resume" class="file" tabindex=1 onFocus="playClick();clear Input(this );" onChange="this.style.backg round='non e';" tabindex=1>
and here is the CSS:
.file {
font-family: arial;
font-size: 9px;
color: #6565B6;
height: 18px;
width: 100%;
border: solid;
border-color: #CBCBCB;
border-width: 1px;
padding-left: 3px;
padding-top: 2px;
background:#FCFAF6;
}
but for some weird reason, Firefox ignores the "width" attribute and just sizes the control the same (rather small, IMHO), no matter what width I set.
Why is this and is there a work-around?
P.S., I know there are many Firefox lovers and IE detractors out there, but for my money, stuff just "looks" better in IE. I think this is because IE is designed to make a web page look like a Word .doc and Firefox looks like, well a browser. Anyway, doesn't matter, I have to design for both anyway :)
I'm just finishing up my ASP web form and having some problems with <input type="file">.
Here is the HTML:
<input type=file name="Resume" id="Resume" class="file" tabindex=1 onFocus="playClick();clear
and here is the CSS:
.file {
font-family: arial;
font-size: 9px;
color: #6565B6;
height: 18px;
width: 100%;
border: solid;
border-color: #CBCBCB;
border-width: 1px;
padding-left: 3px;
padding-top: 2px;
background:#FCFAF6;
}
but for some weird reason, Firefox ignores the "width" attribute and just sizes the control the same (rather small, IMHO), no matter what width I set.
Why is this and is there a work-around?
P.S., I know there are many Firefox lovers and IE detractors out there, but for my money, stuff just "looks" better in IE. I think this is because IE is designed to make a web page look like a Word .doc and Firefox looks like, well a browser. Anyway, doesn't matter, I have to design for both anyway :)
Ive never really run into this before but it is surprising to me that Firefox does not apply a width! usually Firefox is pretty good compared to IE anyway. I found an article here which may be of some use to you. That is all I can offer:
http://www.quirksmode.org/dom/inputfile.html
http://www.quirksmode.org/dom/inputfile.html
ASKER
Hey Eternal,
Thanks for that but I failed to mention one important aspect. The <input> in question is inside a table cell that is 739px wide. It takes up the whole cell with no padding. I think your code is designed to fit the window rather than the table cell. How can we change it for that?
The table-layout is set to fixed so 739 is gonna be pretty constant no matter the browser window size.
Thanks for that but I failed to mention one important aspect. The <input> in question is inside a table cell that is 739px wide. It takes up the whole cell with no padding. I think your code is designed to fit the window rather than the table cell. How can we change it for that?
The table-layout is set to fixed so 739 is gonna be pretty constant no matter the browser window size.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hey TName,
I've seen that solution before. I hate workarounds like that and from what I've tested they don;t work as well as advertised.
One does wonder though, why would M$. Firefox and Opera all make such a commonly used control almost totally unstylable?
I've seen that solution before. I hate workarounds like that and from what I've tested they don;t work as well as advertised.
One does wonder though, why would M$. Firefox and Opera all make such a commonly used control almost totally unstylable?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
</style>
<script type='text/javascript'>
var myWidth = 0;
var myHeight = 0;
function getWindowSizeAndSetInputWi
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if( document.documentElement &&
( document.documentElement.c
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.c
myHeight = document.documentElement.c
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight
}
var inputFile
inputFile = document.getElementById('d
inputFile.size = (myWidth/7);
}
window.onload = function()
{
getWindowSizeAndSetInputWi
}
window.onresize = function()
{
getWindowSizeAndSetInputWi
}
</script>
</head>
<body>
<input type="file" name="datafile" id="datafile">
</body>
</html>