hack per arrotondare angoli in IE

[besengo]

ciao a tutti, so che non è molto un argomento di joomla ma non so a chi chiedere ed immagino che anche voi abbiate "cocciato" contro questa cosa, ho scoperto che esistono questi hack(border-radius.htc, ie-css3.htc, PIE.htc) per far si che anche IE possa supportare regole CSS come angoli arrotondati oppure ombre ed altro, nel momento di usarlo però mi è sorto un dubbio, non è che bisogna avere il sito online perché funzionino? Io sono in locale con xampp e gli angoli mi rimangono a spigolo. Sapete qualcosa? Grazie della risposta.

[mau_develop]

che è sta roba?

-------------------
border-radius.htc, ie-css3.htc,
------------------------

http://www.google.com/search?q=ie+rounded
http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/

M.

[besengo]

ne più ne meno di quello che ho scritto sopra, sono file .htc che servono ad IE per "eseguire" le regole css che normalmente rigettano, in pratica fai la tua regola, quello che segue è soltanto un esempio di regola:

.esempio{

background-color:#cc3333;
text-decoration:none;
border-radius: 9px 9px 9px 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
 border-radius: 9px; /* IE 9 */ 
border:  1px solid #f0f0f0;
behavior: url(path verso il file/border-radius.htc);/* hack per internet explorer */

}
così facendo IE legge la classe css creata come la legge Firefox o Chrome. Il problema mio è che sono in locale quindi mi domandavo se questa cosa funziona anche in locale (oppure ho altri problemi da risolvere). Online funziona di certo.

[ophtalmos]

Ciao, senti ma tu in locale inserisci il doctype completo dell'url? Se non lo fai il browser può comportarsi diversamente da come dovrebbe, anche il prologo xml andrebbe evitato.

[besengo]

grazie ophtalmos per la risposta, con il doctype ho provato tutto quello che mi è passato per la testa anche con il prologo xml ma in realtà non cambia niente continua a farmi gli angoli a spigolo. Ora sto provando a mettere il sito su uno spazio gratuito per fare la prova se questi file .htc funzionino anche in locale o se più che altro è qualche errore mio.

[tonicopi]

E' un argomento che con joomla non c'entra ma se risolvi potresti spiegare meglio quello che si deve fare per far digerire gli angoli arrotondati  con i css anche ad IE?

[besengo]

certo, appena riesco a capire se i file .htc funzionano solo online o anche in locale spiego tutto.

[besengo]

Allora Tonicopi sono tornato, dovevo capire se questo file .htc funzionasse solo online oppure anche in locale, ho capito che funziona solo online.
Prima di tutto bisogna procurarsi il file .htc, per farlo bisogna andare in questo sito http://css3pie.com/ (è tutto GRATIS, a meno che non si voglia donare qualche cosa). Dalla colonna destra del sito si può scaricare una versione generale del file che aiuterà le regole css che darai alle tue classi o div o quant'altro, oppure scaricare dalla sinistra del sito un file con regole create appositamente per quello che ti serve (io ho scaricato il file "generale" che si adatta benissimo a regole css come curve ed ombre)
Quindi si prende la cartella e la si mette dove si vuole (io l'ho messa nella root principale).
Dopodiche, ad esempio, si prende il div a cui vogliamo applicare le curve o ombre, al quale già abbiamo applicato tutte le regole css3 che vanno bene per tutti i browser tranne che per Internet Explorer (cesso!)

#esempio{
border-radius: 9px 9px 9px 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
 border-radius: 9px; /* IE 9 */ 
border:  1px solid #666666;


 -moz-box-shadow: 0px 0px 6px #777777; /* FF3.5+ */ 
 -webkit-box-shadow: 0px 0px 6px #777777; /* Saf3.0+, Chrome */ 
 box-shadow: 0px 0px 6px 0px #777777; /* Opera 10.5, IE 9.0 */ 
}

e gli aggiungiamo l'hack per internet explorer, e diventa così:

#esempio{
border-radius: 9px 9px 9px 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
 border-radius: 9px; /* IE 9 */ 
border:  1px solid #666666;


 -moz-box-shadow: 0px 0px 6px #777777; /* FF3.5+ */ 
 -webkit-box-shadow: 0px 0px 6px #777777; /* Saf3.0+, Chrome */ 
 box-shadow: 0px 0px 6px 0px #777777; /* Opera 10.5, IE 9.0 */ 

behavior: url(path alla tua cartella/PIE.htc);/* hack per internet explorer */
}

A me funziona. E se funziona a me deve necessariamente funzionare al mondo intero. Spero si essere stato chiaro. Non è chiaro se funzioni con IE6, io l'ho abbandonato quindi non ho fatto prove al riguardo. Con IE7 e IE8 funziona di certo. Un saluto.

[belloragazzo]

ciao besengo scusami ho il tuo vecchio problema di stondare i div anche su IE..potresti spiegarmi gentilmente meglio la procedura?

Io ho nel codice grey.css questo :

#allwrap {
    background: #fff;
      border: 1px solid #000;
    -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;

Ho scaricato la cartella contenete il PIE.htc dal sito...l'ho inserita nella root, ho modificato il css aggiungendo alla fine della classe questo :

#allwrap {
     background: #fff;
       border: 1px solid #000;
     -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
        behavior: url(/PIE-1.0beta5/PIE.htc);/* ie8.css */;

E' corretto il codice?

Avrei bisogno di sapere ..
all'interno dell'hack devo inserire solo quella parte di codice non leggibile su IE come riportato sopra o non è sufficiente? Se trascrivo direttamente tutto il css è uguale..?
Spero tu mi possa aiutare...grazie in anticipo