17 replies [Last post]
mzvarik
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-02
Posts: 3
Points: 0

This is the part of code, which is not working in Firefox (works only in IE):

When I change it to type='input' it works!
I do not understand what is wrong with this Sick

Thanks for ideas.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

What be this?

what does input type='file' mean????

will u please explain???

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

In my experience, styling

In my experience, styling the file input control effectively across different browsers is very difficult, if not impossible, and not worth the effort. Tell your client/designer, that is the way it comes and you can't change it.

mzvarik
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-02
Posts: 3
Points: 0

You know, many people

You know, many people supporting XHTML and CSS think Firefox is such a cool browser, they do exactly what w3c.org command - but the truth is that Firefox is the one that took off the possibility of free creation on the web... we have bugs in IE, but 99% of them we can handle (hacks etc.)... and then we have "bugs" (such as input='file' width='100%' ... changing width is really not so much of a styling, don't u think?) in Firefox and there's nothing we can do about them...

So, this is what I tell my client: Get Maxthon

Martin

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

mzvarik wrote:but the truth

mzvarik wrote:
but the truth is that Firefox is the one that took off the possibility of free creation on the web...

Shock

mzvarik, you need to get a grip. Chances are for most websites, the client isn't the user. Telling them to get any particular browser is irrelevant. The users of the website are the masses of internet users and they could be using any browser.

Firefox is popular now because of what it does and how people can use it. If people didn't want those things then Firefox would be nowhere, its not as if it comes preloaded on any computer. It got so big so quickly because the main browser makers (read Microsoft and to a lesser extent Apple) didn't really give a monkeys. Rail against that if you like, but thats democracy and freedom choice. People voted with their feet. Maybe next week or next year they'll vote with their feet for something else. If Maxthon does the business maybe they'll have their glory time.

Don't you find it a pretty big coincidence that since its come along Microsoft has built IE7 and Apple Safari 3?

Out of interest:
- are you involved in Maxthon?
- does Maxthon use the IE rendering engine? (ie. will it suffer from the same "features" as the particular IE version its using to render the pages?)

PS. If the other web developers here are anything like me, they like Firefox because of Firebug (and before it Venkman, Webdeveloper Toolbar & DOM Explorer). I build sites to work in as many browsers as possible. I develop using Firefox because it makes my job easier and faster. I (sometimes) rant against IE6 because it consumes the most time and gives me the most headaches. I'll rant against any other browser with equal fervour if it supplants IE6 in that position!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

mzvarik wrote:You know, many

mzvarik wrote:
You know, many people supporting XHTML and CSS think Firefox is such a cool browser, they do exactly what w3c.org command - but the truth is that Firefox is the one that took off the possibility of free creation on the web...

You've got to be kidding me.

@-moz-document url-prefix(http://www.cdg.net/forums/) { table.forumline { border: none; width: 95%; margin: 0 auto; background-color: #424242; padding: 0; border-collapse: collapse; margin-bottom: 1em; } a, * a {color: #6f9fc8;}

span.postbody a {color: #6f9fc8; font-weight: bold;}
span.postdetails {font-style: italic;}

td[align][valign="bottom"]{background: #464646; width: 100%; padding: 0.3em;}
td[align="left"][valign="bottom"][colspan="2"] * {color: #d8ded3;}

/* New Topic/Post Reply bar */

td[align="right"][valign="bottom"][class="nav"][nowrap="nowrap"],
table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] {
border-collapse: collapse;
background: #686a65;
overflow: auto;
}

td[align="right"][valign="bottom"][class="nav"][nowrap="nowrap"] {
background: url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/steam_loader.gif) no-repeat top right;
padding-right: 3em;
}

table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a.nav,
table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a[href^="postin"] {
display: inline-block;
border: 1px solid #000;
height: 24px;
width: 140px;
font-weight: normal;
background: #7d8078;
float: left;
color: #fff;
line-height: 24px;
-moz-border-radius: 4px;
padding-left: 4px;
margin-left: 10px;
}

a[href^="posting.php?mode=q"], a[href^="posting.php?mode=e"], a[href^="posting.php?mode=d"] {
border: 1px solid #000;
float: left;
background: #7d8078;
color: #fff;
-moz-border-radius: 4px;
font-size: 0.6em;
padding: 0.6em;
}

span.nav {font-size: 0;} /* hides that damn -> which isn't wrapped in an element */

span.nav a {display: block;}

a[href^="posting.php?mode=q"] img, a[href^="posting.php?mode=e"] img, a[href^="posting.php?mode=d"] img {display: none;}

a[href^="posting.php?mode=q"]:before {content: 'Quote';}
a[href^="posting.php?mode=e"]:before {content: 'Edit';}
a[href^="posting.php?mode=d"]:before {content: 'Delete';}

table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a.nav:before {content: '^ ';}
table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a.nav:hover {text-decoration: none; color: #c4b550;}

table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a[href^="posting.php?mode=newt"]:before {content: ' New Topic'; font-size: 0.65em; text-decoration: none;}
table[width="100%"][cellspacing="2"][cellpadding="2"][border="0"] a[href^="posting.php?mode=reply"]:before {content: ' Post Reply';}

a[href^="posting.php?mode=n"] img, a[href^="posting.php?mode=r"] img {display: none;}

#divTabs {float: left; margin-left: 1em; padding-top: 2em;}

a[name="top"] {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

a.tab, a#divForums, a.tab:hover { /* Links at top */
font-size: 1.2em;
background: #424242;
color: #d8ded3;
font-weight: normal;
border: 1px solid #747474;
width: 8em;
margin: auto;
margin-right: 2px;
border-bottom: 0;
text-indent: 5px;
-moz-border-radius: 3px 3px 0 0;
}

a#divForums {color: #c4b550; background: #686a65;}

a.tab:hover {color: #c4b550; }

th.thLeft, th.thRight, th.thHead, td.catLeft, td.rowpic {
text-transform: uppercase;
background: #3c3d3e;
color: #bbbdbf; text-align: left; }

hr {border-top: 1px solid #000;}

.code, .quote {background: #4c5844; color: #000; border: 1px solid #666; -moz-border-radius: 5px;}

input, textarea, select {background: #4c5844; color: #000;}

img[src*="logo"] {border: 4px solid #000; margin: 1em 0 0 1em; -moz-border-radius: 8px;}

td.catBottom {
background: #1f1f1f url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/valvelogo.png) no-repeat 2% 50%;
border-top: 2px solid #000;
height: 71px;
-moz-border-radius: 0 0 8px 8px;
}

td.catBottom:after {
content: '© 2007 Valve Corporation. All rights reserved. All trademarks are property of their respective owners in the US and other countries.';
font-size : 10px;
color: #626366;
}

td[align="left"][valign="bottom"][colspan="2"] span.gensmall {display: none;}

span.maintitle {padding-right: 1em;}

th {border: none;}

th {background: none;}
/*th.thCornerL {background: #424242 url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/steam_topics_bg.png) no-repeat center center; height: 150px; }*/
th.thTop {background: #4c5844 url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/steam_lines2.gif);}
th.thCornerL + th.thTop {background: #4c5844 url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/steam_header1.gif) no-repeat top left; height: 50px;}
th.thCornerR {background: #4c5844 url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/steam_thright.gif) no-repeat top right;}
td.row2, td.row3 {background-color: #232323 }
td.row3Right {background: #232323 url(http://i4.photobucket.com/albums/y136/thepineapplehead/CDG/rightfade.png) repeat-y top right;}
}

That's my user stylesheet for PHPBB forums. Firefox supports everything in there. I'd say IE supports about 2% of the CSS I'm using there.

Verschwindende wrote:
  • CSS doesn't make pies

mzvarik
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2007-11-02
Posts: 3
Points: 0

and I simply need only

:thumbsup: and I simply need only following: INPUT{width:111px} ... and there's no clean solution for ffox.

It is questionable which browser is better and I am not going to continue discussing it.

Many people use firefox because it actually is safer - I installed it to my grandfather, grandmother... so I don't had to get antispyware etc., very cool

Many use firefox because they don't want to support Microsoft.

And most people use firefox because they heard it is safer, quicker and for free. -- otherwise it sucks }:) - my opinion

----

Chris..S wrote:

Chances are for most websites, the client isn't the user. Telling them to get any particular browser is irrelevant. The users of the website are the masses of internet users and they could be using any browser.

:rolleyes: Of course, I am developing administration and there are 1-3 particular users which will be using it...

Btw. I have nothing to do with Maxthon neither other browsers, I just don't like ffox

Anyways, thank you for replies.

Aloha

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Well, could you please post

Well, could you please post ALL the code you're using, not just little snippets, so we can try and replicate the problem ourselves?

mzvarik wrote:

Many people use firefox because it actually is safer - I installed it to my grandfather, grandmother... so I don't had to get antispyware etc., very cool

Many use firefox because they don't want to support Microsoft.

And most people use firefox because they heard it is safer, quicker and for free. -- otherwise it sucks }:) - my opinion

so, it's safer, faster, free, and anti-MS - and your opinion is that it sucks?

That's like saying I won't buy an Aston Martin, even though it's faster, cheaper and safer than a Ferrari.

Verschwindende wrote:
  • CSS doesn't make pies

sparkyfied
Offline
newbie
London, UK
Last seen: 12 years 42 weeks ago
London, UK
Joined: 2008-01-03
Posts: 2
Points: 0

Hmm... I had to register to reply to this...

mzvarik wrote:
You know, many people supporting XHTML and CSS think Firefox is such a cool browser, they do exactly what w3c.org command - but the truth is that Firefox is the one that took off the possibility of free creation on the web...
....

What?? Are you serious? the reason people use FF is because its an alternative browser. As developers, it's nicer, purely because they adhere to the standards. They haven't damaged free creation on the web, they have just adhered to the standards as all browser vendors should. What are you going to do when IE8 comes out? Tell the world IE is bad, and stick with Maxthon, oh wait, Maxthon will start to use the IE8 rendering engine.

The only problem you have with FF is that it challenges you to learn to code properly, as you should. It does not limit, it enables you to create websites, as they should be created, standard compliant so that all can view the same site, in whatever browser, on whatever platform.

And now on topic...: http://www.quirksmode.org/dom/inputfile.html, this is the only hack I have seen in which one can change the appearance on a File input. It's a hack. But it does allow you to change the appearance.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Shaun Inman came up with a

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

sparkyfied
Offline
newbie
London, UK
Last seen: 12 years 42 weeks ago
London, UK
Joined: 2008-01-03
Posts: 2
Points: 0

Tyssen wrote:Shaun Inman

Tyssen wrote:
Shaun Inman came up with a similar solution: http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Very nice indeed!

burhankhan
Offline
newbie
Last seen: 12 years 27 weeks ago
Joined: 2008-04-15
Posts: 4
Points: 0

Here is another simple way

Here is another simple way to apply style in file input box.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 52 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Works in FF?

thepineapplehead wrote:
That's my user stylesheet for PHPBB forums. Firefox supports everything in there.

Really? I tawt I taw display: inline-block in there (but no -moz display: inline-box/block). Or was that for IE/haslayout?

I did input type="file" once and decided to leave it. It's not CSS-able because it's not made by css-- the browser builds it (just like the Browser makes the File, Edit, View etc buttons). This kinda sucks for a site which is multi-lingual and you want a person's account to be able to have a language associated with it (like every time a realtor from Italy logs in, the page displays in Italian because he chose that option), and yet if the user is using a browser set to Dutchn (say he's traveling to Amsterdam on business and is on another computer), he'll get a "Browse" box which says "Leaves" (Bladeren)!

I'm no expert, but I fake one on teh Internets

Mythago
Offline
newbie
UK
Last seen: 12 years 13 weeks ago
UK
Joined: 2008-07-23
Posts: 1
Points: 0

Not CSS so probably useless but...

...you can change the size within the control itself, by using the size parameter.
E.g. INPUT type="file" size=50

speedlearner
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-5
Joined: 2008-10-28
Posts: 6
Points: 0

Internet Explorer 8

This comment has been moved here.

davidhomer
davidhomer's picture
Offline
newbie
Last seen: 11 years 41 weeks ago
Joined: 2009-01-07
Posts: 1
Points: 0

Thanks Mythago I'd forgotten

Thanks Mythago I'd forgotten that field, pitty I had to wade through a page of my browser's better than yours crap to find it.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 52 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You cannot be certain every

You cannot be certain every browser will let you set the size like that-- some browsers simply want more control than others, esp with the input type="file" button--- like, in English it's a certain width because it says "Browse".

In Dutch it's another width, because it says "Bladeren". So what happens if you had set a width that was too short to accommodate some language you're not expecting? So many browsers simply take that possibility out of your hands (for a reason). Esp mostly form controls.

I'm no expert, but I fake one on teh Internets

yitwail
Offline
newbie
Last seen: 11 years 20 weeks ago
Timezone: GMT-10
Joined: 2009-06-05
Posts: 1
Points: 0

useful but not CSS

setting size in the element itself as suggested by Mythago does work, but setting the size in CSS doesn't, which is pretty odd. still, it's a start. :thumbsup: