Link to home
Start Free TrialLog in
Avatar of MitchellVII
MitchellVIIFlag for United States of America

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();clearInput(this);" onChange="this.style.background='none';" 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 :)


Avatar of Eternal_Student
Eternal_Student
Flag of United Kingdom of Great Britain and Northern Ireland image

I think this is some kind of bug in FF to be honest. You could use javascript though, here is an example I found:

<!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 getWindowSizeAndSetInputWidth() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  }
  else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }
  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('datafile');
 inputFile.size = (myWidth/7);
}      

window.onload = function()
{
     getWindowSizeAndSetInputWidth();
}

window.onresize = function()
{
     getWindowSizeAndSetInputWidth();
}
      </script>
</head>

<body>

<input type="file" name="datafile" id="datafile">

</body>
</html>
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
Avatar of MitchellVII

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.
ASKER CERTIFIED SOLUTION
Avatar of TName
TName

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?