Browser visualizza in modo differente css

di
HeyAlper
il
1 risposte
H
HeyAlper
Pochi posts
Iscritto da
ott, 2016
Messaggi:
11

Browser visualizza in modo differente css

Vi spiego il problema :
Io e dei miei colleghi stiamo lavorando a un progetto universitario, ci è stato spiegato il css molto brevemente e stiamo riscontrando molti problemi quando elementi html su cui abbiamo applicato uno stile vengono visualizzati in modo differente cambiando browser. Attualmente il problema lo riscontriamo con l'header della pagina:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>

<style>

body{
 height:100%;
 width:100%;
}

button {
display:inline;
}



 #selezione { 
 display: inline; 
 padding: 10px 70px 10px 13px !important;
 max-width: 100%; 
 height: 35px !important; 
 border: 1px solid #cccccc; 
 border-top-left-radius: 3px; 
 border-bottom-left-radius: 3px;
 background: url("Immagini/arrow.png") center right no-repeat; 
 background-size: 9px 9px;
 background-color: #fff; 
 color: #444444; 
 font-size: 14px; 
 line-height: 16px !important; 
 appearance: none; /* this is must */ 
 -webkit-appearance: none; 
 -moz-appearance: none; } 
/* body select.select_box option */
body select option { padding: 0 4px; }
/* for IE and Edge */
 
select::-ms-expand 
{ display: none; } 

select:disabled::-ms-expand 
{ background: #f60; }


 #testoCerca {
   position:relative;
   right:0.4%;
   border: 1px solid #cccccc; 
   height: 31px !important;
}

#cercaButton {
   position: relative;
   top: 3px;
   right:0.9%;
   border: 1px solid #e3e3e3; 
   width:3.7%;
   height: 35px !important;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   background-color:#93f372;
}




</style>
</head>
<body>

<header>


<select id="selezione" name="selezione">
     <option selected="selected" value="qualsiasi">Qualsiasi</option>
     <option  value="cinema">Cinema</option>
     <option  value="film">Film</option>
     <option  value="film">Libri</option>
</select>
<input type="text" id="testoCerca">
<button id="cercaButton" type="submit"><img src="Immagini/lente.png" alt="Cerca"></button>

</header>

</body>
</html>

La nostra idea era quello di realizzare una drop-down list seguita da una barra dove inserire i prodotti da ricercare e quest'ultima affiancata da un tasto per effettuare la ricerca, siccome tali elementi non sono affiancati, utilizzo l'attributo position:relative e li sposto per averli allineati. Il problema è che con un browser vengono visualizzati bene, con google chrome per esempio risultano in posizioni totalmente differenti.
Inoltre da google chrome non vengono nemmeno visualizzate le immagini, come posso risolvere il problema?

1 Risposte

  • PaoloB
    PaoloB
    Pochi posts
    Iscritto da
    mar, 2018
    Messaggi:
    35

    Re: Browser visualizza in modo differente css

    Ti confermo che ci sono regole CSS che non sono interpretate sempre allo stesso modo.
    Ad esempio, tu hai utilizzato webkit-appearance che IE non supporta.

    Per le immagini, il percorso è relativo a dove risiede la regola, in questo caso è nel file html e non in un foglio di stile esterno, per cui utilizza 
    background: url("./Immagini/arrow.png") center right no-repeat;
Devi accedere o registrarti per scrivere nel forum
1 risposte