Visualizzazione dei risultati da 1 a 10 su 10

Discussione: Form Tabless: incompatibilità tra IE e FF

  1. #1

    Form Tabless: incompatibilità tra IE e FF

    Ciao ragazzi, ho provato ad applicare il suggerimento trovato su Html.it sull'uso di Form tabless completamente realizzato con i CSS di Jeffhowden

    Mentre quanto da me modificato e implementato nel mio sito con IE6 WXPSP2 è perfetto, con FF1.5 ho questi problemi che non riesco a risolvere anche provando a variare valori e parametri (in realtà non riesco ad individuare la parti di codice di jeffhowden interessate)

    * i pulsanti sotto di Submit "Invia" e "Cancella" si trovano troppo sotto
    (escono dal mio layout, dallo sfondo arancione a quello bianco)
    * il pulsante di Sfoglia img non è localizzato al bordo estremo della sua cella

    Sia per IE che per FF
    * la Label "Diario di Viaggio" della textarea non è in linea con il suo bordo sinistro
    * Vorrei cambiare anche i contorni dei pulsanti "grigio" di Submit "Invia" e "Cancella" con dei colori che mettano in rilievo l'arancione frontale rispetto allo sfondo generale dello stesso colore:

    Eccovi le 2 img di IE e FF e il relativo codice *Html* e *CSS*

    img IE

    img FF

    Spero possiate aiutarmi, a fine lavoro ringranzierò ufficialmente chi vorrà farlo e chiunque voglia fornirmi suggerimenti e consigli

    CSS
    codice:
    /* form.css */ modificata (vedi + avanti)
    /* form.import.css */ (l'ho lasciata invariata)
    Li trovate in fondo alla pagina di http://jeffhowden.com/code/css/forms/ 
    
    
    ** 2pag.css**
    /* Parte di codice interessata */
    
    #content { 
    margin-left: 213px; 
    margin-right: 123px; 
    background-image: url(../img/content.gif); 
    height: 652px; }
    
    .contenitore_cx {
    width:426px; 
    \width:428px; 
    w\idth:426px; 
    border-top: 1px solid #AB6400;	
    margin-left: 2px;}
    
    .contenitore_cx_titolo { 
    margin-top: 0px;
    padding: 15px 15px 10px 15px;}
    
    .contenitore_cx_tutto {	
    width:426px; 
    \width:428px; 
    w\idth:426px; 
    border-top: 0px solid #AB6400;	
    margin-left: 4px;  
    margin-top: 10px;}
    
    .testo_cx_sx {
    line-height:13px;	
    text-indent:0px; 
    color: White; 
    text-align: justify; 
    font-size: 11px;}
    ------------------

    /* form.css */ (modificata rispetto all'originale)


    * {
    margin: 0px;
    padding: 0px;
    }

    form {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    /*min-width: 560px;
    max-width: 620px;*/
    width: 420px;
    }

    form fieldset {
    /*clear: both;*/
    font-size: 100%;
    border-color: #ff9900;
    border-width: 1px 0px 0px 0px;
    border-style: solid none none none;
    padding: 2px;
    margin: 0px 0px 0px 25px;
    }

    label {
    font-size: 100%;
    }

    label u {
    font-style: normal;
    text-decoration: underline;
    }

    input, select, textarea {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 100%;
    color: #000000;
    }

    textarea {
    overflow: auto;
    }

    form div {
    clear: left;
    display: block;
    width: 354px;
    height: expression('1%');
    margin: 5px 0px 0px 0px;
    padding: 1px 3px;
    }


    form div fieldset {
    clear: none;
    border-width: 1px;
    border-style: solid;
    border-color: #666666;
    margin: 0px 0px 0px 142px;
    padding: 0px 5px 5px 5px;
    width: 197px;
    }

    form div fieldset legend {
    font-size: 100%;
    padding: 0px 3px 0px 9px;
    }

    form div.required fieldset legend {
    font-weight: bold;
    }

    form div label {
    display: block;
    float: left;
    width: 130px;
    padding: 3px 5px;
    margin: 0px 0px 5px 0px;
    text-align: right;
    }

    form div.optional label, label.optional {
    font-weight: normal;
    }

    form div.required label, label.required {
    font-weight: bold;
    }

    form div label.labelCheckbox,
    form div label.labelRadio {
    float: none;
    display: block;
    width: 200px;
    height: expression('1%');
    padding: 0px;
    margin: 0px 0px 5px 142px;
    text-align: left;
    }

    form div fieldset label.labelCheckbox,
    form div fieldset label.labelRadio {
    margin: 0px 0px 5px 0px;
    width: 170px;
    }

    form div img {
    border: 1px solid #000000;
    }

    form div input, form div select,
    form div textarea {
    width: 200px;
    padding: 1px 3px;
    margin: 0px 0px 0px 0px;
    }

    form div input.inputFile {
    width: 211px;
    }

    form div select.selectOne,
    form div select.selectMultiple {
    width: 211px;
    padding: 1px 3px;
    }

    form div input.inputCheckbox,
    form div input.inputRadio, input.inputCheckbox, input.inputRadio {
    display: inline;
    height: 14px;
    width: 14px;
    background-color: transparent;
    border-width: 0px;
    padding: 0px;
    margin: 0px 0px 0px 140px;
    }

    form div.submit {
    width: 214px;
    padding: 0px 0px 0px 140px;
    }

    form div.submit div {
    display: inline;
    /*float: left;*/
    text-align: left;
    width: auto;
    padding: 0px;
    margin: 0px;
    }

    form div input.inputSubmit,
    form div input.inputButton, input.inputSubmit, input.inputButton {
    background-color: #ff9900;
    color: #ffffff;
    width: auto;
    padding: 0px 6px;
    margin: 0px;
    }

    form div.submit div input.inputSubmit,
    form div.submit div input.inputButton {
    float: right;
    margin: 0px 0px 0px 5px;
    }

    form div small {
    display: block;
    margin: 0px 0px 5px 142px;
    padding: 1px 3px;
    font-size: 88%;
    height: expression('1%');
    }


    =====================================


    HTML Parte di Codice interessata

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/
    xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/
    1999/xhtml" xml:lang="en" lang="it"> 
    
    <head> 
    <title>Title</title>
    <link href="../styles/2pag.css" rel="stylesheet" type="text/css" / >
    <link href="../styles/nolink.css" rel="stylesheet" type="text/css" / >
    <link href="../styles/form.css" rel="stylesheet" type="text/css" />
    
        <style type="text/css">
         @import "../styles/form.import.css";      
        </style>
    </head> 
    
    <body>
    
                <div id="content">
    
    
    <div class="contenitore_cx">
    		
     		
    <div class="contenitore_cx_titolo">
    <h2>Modulo per i Turisti Olandesi</h2>
    </div> 
    
    	
                      
    
    <div class="contenitore_cx_tutto">
    		  
    	
    <div class="testo_cx_sx">
    
    <form action="/code/css/forms/" method="post" 
    enctype="multipart/form-data">
          
    <fieldset>
               
    <div class="required">        
    <label for="first_name">Autore:</label>
    <input name="first_name" id="first_name" 
    class="inputText" 
    size="10" maxlength="100" value="" type="text">
    (Cognome, 
    Nome o solo Nickname)
    </div>
    
     <div class="required">        
    <label for="email">Email:</label>
    <input name="email" id="email" 
    class="inputText" 
    size="10" 
    maxlength="250" value="" type="text">        
          </div>
    
    <div class="required">        
    <label for="city">Citt&agrave;:</label>
    <input name="city" id="city" class="inputText" 
    size="10" maxlength="100" value="" type="text">
    (Amsterdam e dintorni, Bruges, Bruxelles, ecc.)
          </div>
    
          <div class="optional">
    <label for="last_name">Periodo Viaggio:</label>
    <input name="last_name" id="last_name" 
    class="inputText" 
    size="10" maxlength="100" value="" 
    type="text">
    (Da gg/mm/aaaa a gg/mm/aaaa)
          </div>
    
     <div class="optional">
    <label for="last_name">Url mio Sito/Link</label>
    <input name="last_name" id="last_name" 
    class="inputText"
     size="10" maxlength="100" value="www." 
    type="text">
    Inviaci l'Url 
    del tuo Sito Diario Viaggio, 
    Link interessanti a siti amatoriali di 
    documentazione e ricerca per l'Olanda
          </div>
    
    <div class="optional">
    <label for="image">Foto:
    (
    400x400px 50Kb)</label>
    <input name="image" id="image" 
    class="inputFile" type="file">
    <label for="delete_image" 
    class="labelCheckbox">
    <input name="delete_image" 
    id="delete_image" 
    class="inputCheckbox" value="1" type="checkbox">Cancella</label>
          </div>
    
    <div class="required wide">        
    <label for="note_wide">Diario di Viaggio:</label>
    <textarea name="note_wide" id="note_wide" 
    class="inputTextarea" rows="11" cols="21"></textarea>
    Raccontaci il tuo soggiorno, cosa hai 
    visto di pi&ugrave; bello, cosa consiglieresti a 
    potenziali turisti dell'Olanda, ecc.
          </div> 
    
        </fieldset> 
    
    <div class="submit">
    <div>
    <input type="submit" class="inputSubmit" 
    value="Invia &raquo;" />
    <input type="submit" class="inputSubmit" 
    value="Cancella" />
            </div>
          </div>
            Neretto Campi Obbligatori.
      </form>
    </div> 
    
    			
    </div>
     		
      
    </div>
    
    
    </div>                                   
    	
    
    </body>

  2. #2
    Riduco le richieste

    Come posso fare a non far uscire i pulsanti di submit dallo sfondo arancione del mio layout ?

    Ho cercato di delineare i bordi di ogni singolo elemento per capire dove intervenire ma con l'estensione Web Deweloper di FF1.5 da "Utilizza modello bordo box" non ci riesco
    codice:
    HTML
    <div class="submit">
    <div>
    <input type="submit" class="inputSubmit" 
    value="Invia »" />
    <input type="submit" class="inputSubmit" 
    value="Cancella" />
            </div>
          </div>
    codice:
    /* CSS */
    
    form div.submit {
    width: 214px;
    padding: 0px 0px 0px 140px;
    }
    
    form div.submit div {
    display: inline;
    /*float: left;*/
    text-align: left;
    width: auto;
    padding: 0px;
    margin: 0px;
    }
    
    form div input.inputSubmit,
    form div input.inputButton, input.inputSubmit, input.inputButton {
    background-color: #ff9900;
    color: #ffffff;
    width: auto;
    padding: 0px 6px;
    margin: 0px;
    }
    
    form div.submit div input.inputSubmit,
    form div.submit div input.inputButton {
    float: right;
    margin: 0px 0px 0px 5px;
    }
    help...

  3. #3
    mica è facile leggere un codice e capire che effetto abbia senza provarlo, non son mica Beethoven!

    Un paio di cose: è preferibile non usare per nomi di classi o ID delle parole chiave dell'html (tipo submit). Inoltre hai reso submit anche il pulsante cancella!
    Boh ci sono parti che non capisco (expression???), secondo me si poteva fare tutto in modo più semplice.

    Nel form div.submit div perché display: inline;?

  4. #4
    Grazie AWD

    Managgia agli ID e il resto.: biifu:

    Su "inline" ed "expression" ho preso tutto da http://jeffhowden.com/code/css/forms/ (vedi sotto)

    ma cercavo di capire a cosa servissero..

    Se si può semplificare tutto ben venga dammi degli spuntarelli :

  5. #5
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,885
    Come ti ho già risposto in pvt forse dovremmo chiarire per primo quale codice guardare. Quello che indichi per i bottoni, preso a sè stante, non ha molto significato se non inserito in una pagina. Probabilmente il problema è come è stato definito il container generale. Quindi, ripeto, il codice della pagina collegata all'immagine è quello di riferimento? Oppure vuoi inserire qualla parte nella pagina indicata?
    In ogni caso, è necessario verificare anche il contesto in cui è inserito.

  6. #6
    Potresti gentilmente indicare l'indirizzo della pagina interessata?
    Open Drink - Un piccolo progetto open source che ha bisogno anche di te.

  7. #7
    Grazie ragazzi per la vs pazienza

    Vi ricompenserò citando nei credits la vs collaborazione

    http://www.amsterdamtour.it/prova_form/formviaggio.html

    Questa è la pagina dove trovate tutto il codice di riferimento.
    (guardate come rientra tutto con IE e come invece i pulsanti di submit vanno giù con FF tanto da non far vedere "neretto: campi obbligatori", il pulsante sfoglia fuori linea)

    Ho cercato di togliere quello che non interessa per il vs esame così (spero) di agevolarvi il lavoro

    Grazie ancora

  8. #8
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,885

    E' un'oretta che sto cercando di capirci qualcosa, ma mi perdo tra tutti quei div annidati uno nell'altro. Inoltre le definizioni css sono, a mio parere, a volte ridondanti e sovrapposte.
    Adesso stacco xchè devo lavorare ...
    Ti consiglio di ricominciare con calma a definire la struttura del layout pezzo per pezzo (contenitore, header, colonne, footer) magari basandoti su un modello a tua scelta tra quelli descritti qui in html.it (Layout a tre colonne) e poi aggiungere, una definizione per volta, ciò che ti serve per il form.
    Per esempio non definire tutti quei div obbligatorio, facoltativo, input submit, ... ma limitati a form, label, input ben distinti.
    Un passo per volta si riesce a capire meglio dove sbagli. Inoltre, copiando brutalmente una definizione preconfezionata non capisci a cosa servono i vari attributi.
    Tieni presente che IE e FF considerano in modi diverso margin e padding: (IE li comprende nella larghezza definita :rollo: , FF li aggiunge - giustamente - ) Capire il box model

    Per concludere: prova a spostare </fieldset> subito prima di </form>

  9. #9
    Ahia non volevo farti perdere tutto questo tempo
    Grazie
    prova a spostare </fieldset> subito prima di </form>
    Incredibile.. tutto risolto
    Anche se lo stesso layout in un altro modulo con l'aggiunta di 2 serie di pulsanti radio questa volta ha problemi con IE e non con FF.
    Sfora dai limiti e mi scende tutto giù.
    Almeno abbiamo capito che dipende dal fieldset ed è lì che devo agire soprattutto..

    Mi riservo prossimamente di capire per studio cosa possa essere successo.. ma + in la altrimenti passerà un altro anno perchè finisca

    Grazie infinite per la tua e la vs disponibilità

  10. #10
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,885

    Comunque, ribadisco il concetto di rivedere con calma il tutto semplificandolo e costruendolo passo passo e, soprattutto per te, capire cosa stai facendo.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.