Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    324

    Larghezza input e select diversa

    Ciao ho questo codice :
    codice:
    <input class="InputText" type="text" name="scatola" value="">
    <select name="codSede">
    <option value="-1">- - - - - -</option>
    <option value="4">Banca sede</option>
    <option value="5">Filiale xxxxx</option>
    <option value="6">Filiale yyyyy</option>
    </select>
    e il css
    codice:
    SELECT {border: 1px solid #ffcc00; width: 150px; font-size: 9pt;}
    .InputText {border: 1px solid #ffcc00; background-color: #ffffff; width: 150px; font-size: 9pt; font-family: verdana; }
    dovrebbero essere larghi uguali ma l'input box e' di 6 pixel pi� lungo rispetto alla select (controllo con l'inspect di edge), quando non avevo inserito la direttiva <!DOCTYPE html> erano uguali.
    Pu� essere il font family che mi da questo problema?
    Ho validato la pagina e ho corretto tutti gli errori segnalati, non riesco a capire perch� non sono uguali -.-
    Da un grande potere derivano grandi responsabilità

  2. #2
    Beh, prova a levare la famiglia font dalla classe InputTest oppure aggiungila alla select. E' il modo più semplice per capire se è quello (e secondo me lo è...specifichi un font solo per uno dei campi, l'altro userà quello di default del browser e potrebbe essere diverso in dimensione)

  3. #3
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    324
    ciao ho provato e la larghezza e' sempre differente, ho trovato che qualcosa mi aggiunge un padding ma non capisco che cosa, io nel mio foglio di stile non lo uso. allego le immagini di edge e firefox.
    Per ora l'unica soluzione e' mettere come larghezza 144px agli input text
    Immagini allegate Immagini allegate
    Da un grande potere derivano grandi responsabilità

  4. #4
    E' lo stile integrato del browser, praticamente, quindi ti conviene o farne un override nella tua dichiarazione del css, o aggiungere il medesimo padding all'altro elemento. Io ti consiglierei di fare un override

  5. #5
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    324
    va bene, grazie!
    Da un grande potere derivano grandi responsabilità

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,267
    Ciao
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    E' lo stile integrato del browser
    ...
    Direi che la causa del problema non sia esattamente questa, piuttosto è da ricercare nel famigerato "box model CSS".

    In particolare la proprietà box-sizing con valore di default content-box che di norma esclude gli ingombri di padding e bordi dal calcolo delle dimensioni width e height. Va da sé che se i due elementi hanno padding e bordi differenti, la loro dimensione finale sarà differente.

    In genere per risolvere il problema si usa il cosiddetto "box model css reset", che consiste in una o due regolette CSS. Ti invito a fare qualche ricerca.

    La soluzione è abbastanza semplice, fai un fischio se non riesci a trovarla

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  7. #7
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    324
    Perfetto KillerWorm!!!
    mi e' bastato inserire box-sizing: border-box; nella classe inputText ed e' tornato tutto alla normalità.
    Prima avevo provato a sovrascrivere il padding con padding: 0px 0px; ma si rimpiccioliva un pochino il campo di testo, con il tuo suggerimento e' della dimensione corretta.
    Da un grande potere derivano grandi responsabilità

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 © 2022 vBulletin Solutions, Inc. All rights reserved.