Printable View
Ciao ragazzi/e vi siente mai imbattuti nel creare un CSS per gestire un campo di tipo file in un form? voi come avete risolto... Io ho un pò di problemi; facendo delle normali assegnazioni tutto ok con IE ma Firefox manda tutto fuori posto... il pulsante 'Sfoglia' va a finirmi al centro del campo dove scrivere e/o copiare il file selezionato dal proprio PC... figuriamoci con gli altri browser...
Che tipo di assegnazioni devi dare? posta la parte del css che utilizzi, forse c'è soltanto una piccola aggiunta o modifica da fare...
CIAO! :D
Ecco il codice:Citazione:
Originalmente inviato da poske
... dove sbaglio? Grazie comunque dell'attenzione... (Provate a vedere il codice con i diversi browser... e i differenti risultati...)Codice:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Prova form upload</title>
<style type="text/css">
.text{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
border: 1px solid #000000;
padding-right: 5px;
padding-left: 5px;
width: 300px;
}
</style>
</head>
<body>
<form name="prova" method="post" action="" enctype="multipart/form-data">
<input type="file" class="text" name="aaa">
</form>
</body>
</html>
Io non ho capito che risultato vuoi ottenere.
per quell'effetto grigio oltre la casella di testo togli "width: 300px;" se ti serve aumentare lo spazio alla destra dopo il bottone aumenta padding-right.
ciao! :D
Sì, hai ragione togliendo quel 'width' tolgo la striscia grigia. Io però è proprio quello che voglio. Cioè:Citazione:
Originalmente inviato da poske
-1- avere la lunghezza della casella + pulsante di 300px;
-2- avere l'effetto sul pulsante
Con IE tutto va (??!!??) Con Firefox hai visto cosa succede...
IE ha una gestione assurda delle dimensioni dei box...
Probabilmente il tuo problema è proprio questo...
Devi quindi effettuare il solito e consueto "Tantel Celik hack" http://www.tantek.com/CSS/Examples/boxmodelhack.html (di9 solito è per IE5, ma alcuni hanno trovato necessario usarlo per IE6, ossia sfruttare il fatto che le assegnazioni del css vengono sovrascritte se ripetute per fare cosi':
tu vuoi width 300?
allora scrivi
width:XXXpx; // per lo stupido IE: width= 300px + margini + bordi + padding
voice-family: "\"}\""; // queste due righe schermano a IE quello che accade dopo fino alla chiusa parentesi graffa successiva (attento quindi a non aggiungere roba li', perché se no IE non vede)
voice-family:inherit;
width:300px; // per i browser normali e decenti
Se cosi' non funziona, allora si vede se per caso il problema +è un altro
P.S. se hai bisogno effettivamente di specificare i px fai pure. Io personalmente preferisco le percentuali...
Tra l'altro ricordati sempre, se hai esigenza di creare un layout completamente scalabile al resize della finestra, che i normali browser scalano anche i caratteri definiti in px, mentre IE ovviamente è troppo stupido per farlo, per ora.
Tra l'altro, stanno sviluppando IE7, speriamo facciano qualcosa di meglio del 6... Il quale non riconosce nemmeno il application/xhtml... vabbè sto andando OT
Grazie pietrovischia, nemmeno col box model hack... Ho visto anche nei siti inglesi e il problema è noto già da tempo... persino il sito dove validare secondo lo standard W3C i css od una pagina HTML se noti ha il bottone così com'è... pazienza... per la lunghezza totale naturalmente ho risolto col semplice 'size' . Grazie a tutti! Potete chiudere il 3d.