Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    343

    Problemi bottone con ie

    Ciao a tutti ...

    Ho un piccolo problema ho questo bellissimo css che mi crea un bottone cliccabile blu ecc ecc e fin qui tutto bene ...

    ma se provo a vederlo su ie il bottone magicamente diventa giallo

    qualcuno sa dirmi che cosa posso aggiungere per far si che anche in ie si veda come negli altri browser



    codice:
    .button {
        	display: inline-block; /* opzionale */
        	outline: none;
        	cursor: pointer; /* impostiamo che il cursore diventi mano quando si va sopra il tasto */
        	text-align: center; /* allineiamo il testo al centro */
        	text-decoration: none;  /* senza decorazioni perchè non ci piace :P */
        	font: 14px/100% Arial, Helvetica, sans-serif;  /* definiamo il font */
        	padding: .5em 2em .55em;  /* un pò di padding */
        	text-shadow: 0 1px 1px rgba(0,0,0,.3);  /* attributo css3 per dare un pò di ombra al testo; la "a" di rgba sta per "alfa" con il quale si imposta il livello di trasparenza */
        	-webkit-border-radius: .5em;  /* i bordi impostati per i browser che utilizzano il webkit */
        	-moz-border-radius: .5em;  /* i bordi impostati per mozilla firefox */
        	border-radius: .5em;  /* per tutto il resto (su ie non funziona) */
        	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* un pò di ombra per i browser webkit */
        	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* la stessa ombra su firefox */
        	box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* idem per gli altri browser (tranne IE) */
        }
    	
    	.orangeButt {
        	color: white; /* il colore del testo */
        	border: solid 1px #003366; /* il bordo del colore che vogliamo */
        	background: #003366; /* un background di base */
        	background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#266cb2)); /* Ecco la sfumatura, che parte da "left top" e arriva a "left bottom" "from" il colore "to" l'altro colore  */
        	background: -moz-linear-gradient(top,  #003366,  #266cb2); /* stessa cosa per firefox */
        	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */
        }
     
    /* poi definiamo il css quando si passa sopra il tasto con il mouse */
    .orangeButt:hover {
    		background: #0c4073; /* colore più scuro */
    		background: -webkit-gradient(linear, left top, left bottom, from(#0c4073), to(#1887f6));
    		background: -moz-linear-gradient(top,  #0c4073,  #1887f6);
    		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f06015');
    	}
    /* infine definiamo il css per quando si clicca il tasto */
    .orangeButt:active {
    		color: #000;
    		padding-top:1px;
    		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
    		background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
    		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffffff', endColorstr='#cccccc');
    	}
    Bottone

    codice:
    <button class="button orangeButt">Pubblica gratis</button>

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    60
    In effetti controllando il CSS c'è traccia del colore arancio/giallo.

    codice:
    filter:  progidXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */
        }
    Il commento del CSS aiuta a capire che: /* questo codice invece funziona per explorer */

    Ciao.

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2010
    Messaggi
    343
    Si hai ragione ...

    cmq ho modificato e ora funziona correttamente.....

    grazie mille

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