Visualizzazione risultati 1 fino 3 di 3

Discussione: Campo ricerca non si visualizza correttamente con tutti i browser

  1. #1
    Guest

    Predefinito Campo ricerca non si visualizza correttamente con tutti i browser

    Questo è il css:

    Codice PHP:
    /* Box del campo totale di ricerca */
    .boxricerca {
    width: 180px !important;
    }

    /* Campo Cerca */
    .s, .field {
    width: 130px !important;
    border: 1px solid #E6E6E6 !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 0px !important;
    }

    /* Pulsante "Cerca" */
    #searchsubmit {
    position: relative;
    float: right;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
    width: 50px !important;
    height: 34px !important;
    color: #408000 !important;
    margin-top: 2px !important;
    margin-left: -10px !important;
    box-shadow: 0px 0px 0px #666;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    text-transform: capitalize;
    z-index: 10;
    }
    #searchsubmit:hover {
    position: relative;
    float: right;
    width: 50px !important;
    height: 34px !important;
    color: #ff6666 !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    text-transform: capitalize;
    z-index: 10;
    }
    e questo il codice HTML:

    Codice PHP:
    <form class="boxricerca" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
    <label class="assistive-text"> <?php _e( 'Search', 'wp-portfolio' ); ?> </label>
    <input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s">
    <input type="submit" class="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Cerca', 'submit button', 'wp-portfolio' ); ?>" />
    </form><!-- search-form -->
    Con Safari i visualizza correttamente:



    Con altri browser il pulsante non è centrato:


  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Il margine superiore è dato dalla regola:
    Codice:
    margin-top: 2px !important;
    Dovresti specificare una height anche per l'input text.

    p.s: come mai tutti quegli !important? Verrebbero sovrascritti da altro?

    Ciao!
    Ultima modifica di alemoppo : 21-11-2017 alle ore 15.24.44

  3. #3
    Guest

    Predefinito

    Bene, si quegli !important servono per sovrascrivere il css originale.

    Qui si presenta un'altra situazione però solo con Safari, quando metto il puntatore sul pulsante, si rimpicciolisce in altezza, ma non lo fa sempre però.


Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •