Tweet
Bonjour,
Je m'excuse d'avance, la réponse à ma question doit être quelque part, mais je ne peux pas le trouver.
J'utilise un template Joomlart (JA Kranos) avec Joomla 1.7.3 et après avoir modifié le fichier template.css, le rendu n'est pas le même sur Fixefox (là c'est bon), chrome (pas bon) et IE (non plus).
Le problème se situe lorsque j'ai mis la position "top social", le menu et le logo en FIXED... Il y a maintenant un décalage.
Comment puis-je rendre mon template compatible avec tous les navigateurs ? Plusieurs fichiers CSS oui, mais où placer le code pour faire référence à ces fichiers en fonction du navigateur?
Une meilleure solution à proposer?
Site : www.unibain.fr
Voici le code CSS qui pause problème :
Merci beaucoup
Je m'excuse d'avance, la réponse à ma question doit être quelque part, mais je ne peux pas le trouver.
J'utilise un template Joomlart (JA Kranos) avec Joomla 1.7.3 et après avoir modifié le fichier template.css, le rendu n'est pas le même sur Fixefox (là c'est bon), chrome (pas bon) et IE (non plus).
Le problème se situe lorsque j'ai mis la position "top social", le menu et le logo en FIXED... Il y a maintenant un décalage.
Comment puis-je rendre mon template compatible avec tous les navigateurs ? Plusieurs fichiers CSS oui, mais où placer le code pour faire référence à ces fichiers en fonction du navigateur?
Une meilleure solution à proposer?
Site : www.unibain.fr
Voici le code CSS qui pause problème :
Code HTML:
/* Top social links */
.top-social { text-align: right; padding: 0 0 0 0; margin-top: -8px;position: fixed; margin-left: 0; background-color: #3A3A3B; width: 980px; }
.ico-social {
background: url(../images/social-icons.png) no-repeat;
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}
.ico-social span { display: none; }
.ico-rsss { background-position: 0 0; }
.ico-rsss:hover { background-position: 0 -30px; }
.ico-facebooks { background-position: -25px 0; }
.ico-facebooks:hover { background-position: -25px -30px; }
.ico-twitters { background-position: -50px 0; }
.ico-twitters:hover { background-position: -50px -30px; }
/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav .main { background: #1a1a1a; position: fixed; margin-top: 25px; margin-left: 143px; }
/* Breadcrumbs ---*/
#ja-navhelper .main {
text-transform: uppercase;
border-top: 5px solid #222;
border-bottom: 1px solid #111;
}
Commentaire