Soucis de css avec safari

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Soucis de css avec safari

Message par demeter1 le Sam 22 Oct 2016 - 18:16

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
encore un soucis de compatibilité avec safari pour divers multiples backgrounds qui, s'affichent correctement sur tous Les autres navigateurs.

Voici les css en question :

Code:
#profil_foot, #profil_head {
background-image: url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),linear-gradient(#4F7801,#182400);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
height: 60px;
}

td.catHead {
    height: 65px!important;
    z-index: -1;
    background: url(http://i97.servimg.com/u/f97/11/93/85/24/santit12.png) left center no-repeat,url(http://i97.servimg.com/u/f97/11/93/85/24/santit13.png) right center no-repeat,url(http://i97.servimg.com/u/f97/11/93/85/24/sans_t16.png) center center repeat-x,linear-gradient(#4f7801,#182400)!important;
        border: 3px double #182400;
    border-radius: 5px;
}


Auriez vous une idée pour faire en sorte que les images apparaissent bien sous safari ?

Merci par avance pour votre aide.


Dernière édition par demeter1 le Jeu 27 Oct 2016 - 15:01, édité 1 fois
avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Dim 23 Oct 2016 - 15:07

32 passages et personne n'a d'idée pour rendre compatible ce css pour Safari Shocked .

j'ai fait divers essais mais ou j'obtiens les images ou la couleur en dégradé.
avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par Neptunia le Dim 23 Oct 2016 - 15:28

Bonjour ^^


As tu essayé ?
Code:
background-image: url("http://www.monhebergeur.com/mon_image.png");
avec les guillemets !

Concernant le linear-gradient, même remarque que dans ton sujet précédent. Cette propriété doit être préfixée -webkit- pour fonctionner sous Safari.
avatar

Neptunia
Membre actif

Féminin
Messages : 11944
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Dim 23 Oct 2016 - 17:46

Bonjour Neptunia,
j'ai essayé la solution de pré-fixage mais hélas en vain.

J'ai tenté

Code:
#profil_foot,#profil_head{
background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) no-repeat left top,
url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) no-repeat right top,
url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) no-repeat left bottom,
url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) no-repeat right bottom,height:60px;
background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400);
 background-image: linear-gradient( to left bottom, #4F7801,#182400);
}

Code:
#profil_foot,#profil_head{
background-image:url('http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif') no-repeat left top,
url('http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif') no-repeat right top,
url('http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif') no-repeat left bottom,
url('http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif') no-repeat right bottom,height:60px;
background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400);
 background-image: linear-gradient( to left bottom, #4F7801,#182400);

}

Code:
#profil_foot,#profil_head{
background-image:url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif") no-repeat left top,
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif") no-repeat right top,
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif") no-repeat left bottom,
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif") no-repeat right bottom,height:60px;
background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400);
 background-image: linear-gradient( to left bottom, #4F7801,#182400);

}

Sur celui-ci, je n'ai que les images qui apparaissent
Code:

#profil_foot, #profil_head {
background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400);
 background-image: linear-gradient( to left bottom, #4F7801,#182400);
height: 60px;
}

le résultat sous safari pour ce dernier code




sous opera et les autres navigateurs avec le code initial + la mise en forme du profil body
Code:
#profil_foot, #profil_head {
background-image: url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),linear-gradient(#4F7801,#182400);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
height: 60px;
}


avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Mar 25 Oct 2016 - 0:10

UP
avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par ◦Jay◦ le Mar 25 Oct 2016 - 9:32

Bonjour demeter1, il faut mettre un hack, voyez ici ou bien la.

Bien à vous.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3300
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Mar 25 Oct 2016 - 15:11

Bonjour et merci Jay,
j'ai tenté
Code:

#profil_foot, #profil_head {
background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
 background-image: linear-gradient( to left bottom, #4F7801,#182400);
height: 60px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#profil_foot, #profil_head{ background: -webkit-linear-gradient( to left bottom, #4F7801,#182400); }
}

Code:

#profil_foot, #profil_head {
background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
 background-image: linear-gradient( to left bottom, #4F7801,#182400);
height: 60px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#profil_foot, #profil_head{ background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400); }
}

Code:

#profil_foot, #profil_head {
background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif);
background-position: left top,right top,left bottom,right bottom;
background-repeat: no-repeat;
 background-image: linear-gradient( to left bottom, #4F7801,#182400);
height: 60px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#profil_foot, #profil_head{ background-color: -webkit-linear-gradient( to left bottom, #4F7801,#182400); }
}

Mais rien ne marche.

A mon avis, je dois me tromper dans la formulation.


avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par ◦Jay◦ le Mar 25 Oct 2016 - 19:03

Re, ceci fonctionne :

Code:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#profil_foot, #profil_head{ background: linear-gradient( to left bottom, #4F7801,#182400); }

Je n'ai pas le temps de tout regarder ce soir mais vous devriez avancer je pense, tenez-moi au courant.

Cordialement.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3300
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Mer 26 Oct 2016 - 17:30

Bonjour jay, pas d'action de mon côté sur safari avec

Code:
#profil_foot, #profil_head{
height: 65px!important;
border: 3px double #182400;
border-radius: 5px;
background-image:
    url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
    url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
    url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif");
background-position:left top,right top,left bottom,right bottom;
background-repeat: no-repeat; 
background-color:linear-gradient(#4f7801,#182400);
 
    }

@media screen and (-webkit-min-device-pixel-ratio:0) {
#profil_foot, #profil_head{ background: linear-gradient( to left bottom, #4F7801,#182400); }

par contre le deuxième css me supprime le background image sur les autres navigateurs.

J'ai résolu les autres soucis; celui-ci sera donc le dernier.
avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Soucis de css avec safari

Message par ◦Jay◦ le Jeu 27 Oct 2016 - 9:26

Bonjour demeter1, le code est mal fermé, c'est ma faute, j'arrive à ceci(j'ai changé les couleurs pour mieux se rendre compte) :



(Je me suis permis de retourner sur votre forum Embarassed )

Code:
@media screen and (-webkit-min-device-pixel-ratio:0) {#profil_foot,#profil_head{
height: 65px!important;
border: 3px double #ff0;
border-radius: 5px;
background-image:
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif"),
url("http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif");
background-position:left top,right top,left bottom,right bottom !important;
background-repeat: no-repeat;
background-image:-webkit-linear-gradient(#ff0000, #000000);}}


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3300
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis de css avec safari

Message par demeter1 le Jeu 27 Oct 2016 - 15:00

Bonjour Jay,
pas de soucis vous avez quartier libre. Vous me venez en aide et c'est la moindre des choses que vous puissiez accéder au forum.
Apparemment Safari est assez réfractaire à tous les codages que nous avons essayé. Ou c'est le background image qui passe ou la couleur mais pas les deux à la fois.

Je vais parti sur la base couleur histoire de finaliser la mise en compatibilité avec safari. Ce n'est pas grave s'il y a une légère différence avec les autres navigateurs.

Encore merci pour votre aide et votre grande patience.



avatar

demeter1
Membre actif

Masculin
Messages : 8351
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum