Visualizzazione risultati 1 fino 3 di 3

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

  1. #1
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    134

    Predefinito Campo ricerca non si visualizza correttamente con tutti i browser

    Questo è il css:

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

    /* Campo Cerca */
    .s, .field 
        
    width130px !important;
        
    border1px solid #E6E6E6 !important;
        
    border-top-left-radius4px !important;
        
    border-top-right-radius!important;
        
    border-bottom-left-radius4px !important;
        
    border-bottom-right-radius!important;
        
    padding-right0px !important;


    /* Pulsante "Cerca" */
    #searchsubmit {
        
    positionrelative;
        
    floatright;
        
    backgroundrgb(238,238,238); /* Old browsers */
        
    background: -moz-linear-gradient(toprgba(238,238,238,10%, rgba(204,204,204,1100%); /* FF3.6-15 */
        
    background: -webkit-linear-gradient(toprgba(238,238,238,10%,rgba(204,204,204,1100%); /* Chrome10-25,Safari5.1-6 */
        
    backgroundlinear-gradient(to bottomrgba(238,238,238,10%,rgba(204,204,204,1100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        
    filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#eee'endColorstr='#ccc',GradientType=); /* IE6-9 */
        
    width50px !important;
        
    height34px !important;
        
    color#408000 !important;
        
    margin-top2px !important;
        
    margin-left: -10px !important;
        
    box-shadow0px 0px 0px #666;
        
    border-top-right-radius4px !important;
        
    border-top-left-radius!important;
        
    border-bottom-right-radius4px !important;
        
    border-bottom-left-radius!important;
        
    text-transformcapitalize;
        
    z-index10;
    }
    #searchsubmit:hover {
        
    positionrelative;
        
    floatright;
        
    width50px !important;
        
    height34px !important;
        
    color#ff6666 !important;
        
    border-top-right-radius4px !important;
        
    border-top-left-radius!important;
        
    border-bottom-right-radius4px !important;
        
    border-bottom-left-radius!important;
        
    text-transformcapitalize;
        
    z-index10;

    e questo il codice HTML:

    Codice PHP:
    <form class="boxricerca" action="<?php echo esc_urlhome_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 è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    9,603

    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 14.24.44

  3. #3
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    134

    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
  •