SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    File Selection Field with IE and Firefox

    hey there,

    I've written in my stylesheet:

    Code:
    	input, textarea{
    	border:1px solid #dddddd;
    	font:normal 11px verdana;
    	background:#ffffff;
    	}
    to get this design:



    but with Firefox, the file selection field is to much shorten.

    the file selection field in the html page with size="33":

    Code:
    <INPUT TYPE=FILE name=upload size="33">
    how can I be sure that the file selection field has the same lenght, in both IE and Firefox?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    the file upload button is pretty near impossible to style cross browser.

    You could try something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    input, textarea{
     border:1px solid #dddddd;
     font:normal 11px verdana;
     background:#ffffff;
    }
    * html input#upload {width:254px}
    </style>
    </head>
    <body>
    <form action="" method="get">
    <input id="upload" name="upload" type="file" size="33" />
    </form>
    </body>
    </html>
    Hope it helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    it works a little bit, with your solution you can modi the lenght of the field in the IE. but it didn't reach my expectation for a good solution.

    is something like this possible?

    if the browser = IE, then:

    Code:
    <INPUT TYPE=FILE name=upload size="33">
    if another browser:

    Code:
    <INPUT TYPE=FILE name=upload size="35">

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    it works a little bit,.......but it didn't reach my expectation for a good solution
    What do you mean works a bit lol - it either works or it doesn't and it works exactly like you requested ion that it makes the buttons the same size.

    I don't see the difference in expectation either. Surely the css is basically saying exactly the same thing as you just described with your if browser routine.

    You could code something serverside to do what you want but I don't see the point in going to those lengths when a simple css hack will work

    There is also another method here:

    http://www.quirksmode.org/dom/inputfile.html

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, I've tested it again. now it works.

    but Opera didn't like it, we have worked enough.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •