Rechercher : dans
Par :

PB CSS sous safari ?

Dernière réponse le 18 mar 2009 à 08:29:26 thomasbmx, le 17 mar 2009 à 20:35:44 
 Signaler ce message aux modérateurs

Bonjour,

J'ai un petit souci.

J'ai mon propre site internet : http://www.thomashamon.com/2008/ (tournant sous Wordpress)

L'affichage est géré par les CSS et tout fonctionne à merveille sous Firefox, IE et Opéra.

Cependant, j'ai un bug d'affichage avec Safari pour Mac. La plupart des liens sont affichés avec les couleurs d'origine (c'est à dire BLEU) et non pas par le code CSS qui doit les afficher en ORANGE.

Pour se rendre compte du problème, essayez d'ouvrir la page avec Safari puis Firefox ou IE pour voir.

Quelqu'un connaît-il la solution à mon problème ? D'avance merci.

Le code CSS d'affichage : (mauvais affichage sur a, h2, etc)


a {
color : #ff7800;
text-decoration : none;
}
a:hover {
color : #ff7800;
text-decoration : underline;
}


acronym, abbr {
cursor : help;
}
blockquote {
border-left : 3px solid #ededed;
margin-left : 15px;
padding-left : 5px;
}
body {
background : url("images/background.jpg") fixed;
color : #333;
font-size : 62.5%;
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin : 0 auto;
padding : 0;
text-align : center;
}
cite {
font-size : 90%;
font-style : normal;
} h2 {
font-size : 12px;
margin : 0 0 6px 0;
padding : 3px 0 3px 5px;
font-weight : bold;
color : #ff7800;
background : url("images/title.jpg") no-repeat;
}
h2 a {
color : #ff7800;
text-decoration : none;
} h2 a:hover {
color : #ff7800;
text-decoration : underline;
}
h3 {
font-size : 120%;
margin-top : 0;
}

h4 {
font-size : 12px;
margin : 0 0 6px 0;
padding : 3px 0 3px 5px;
font-weight : bold;
color : #000000;
border-bottom : 1px dotted #3d3d3d;
background : url("images/titleh4.jpg") no-repeat;
}

img {
padding : 0;
border : none;
}
img.alignleft {
float : left;
margin : 0 0 0 0;
}
img.alignright {
float : right;
margin : 0 0 0 0;
}
li {
margin : 0;
padding : 0;
list-style-type : none;
}
ol#comments li p {
font-size : 100%;
}
ul {
margin : 0;
padding : 0;
}
#ad1 {
text-align : center;
}
#ad2 {
text-align : right;
padding-right : 40px;
height : 100%;
}
.description {
float : right;
padding : 3px 650px 0 0;
color : #886c45;
font-size : 11px;
text-decoration : none;
font-family : Verdana;
font-weight : normal;
}
.feedback {
color : #ccc;
text-align : right;
margin-bottom : 15px;
padding-right : 15px;
clear : both;
background : #ededed;
text-transform : lowercase;
}
.feedback a {
text-decoration : none;
background : #ffffff;
padding : 3px 10px 3px 10px;
border : 1px solid #ededed;
}
.feedback a:hover {
text-decoration : underline;
background : #ffffff;
padding : 3px 10px 3px 10px;
border : 1px solid #ededed;
}
.feedback a:visited {
text-decoration : none;
background : #ffffff;
padding : 3px 10px 3px 10px;
border : 1px solid #ededed;
}
.feedback a:visited:hover {
text-decoration : underline;
background : #ffffff;
padding : 3px 10px 3px 10px;
border : 1px solid #ededed;
}
.post {
background : #ffffff;
height : 100%;
border : 1px dashed lightgray;
}

.post2 {
background : #ffffff;
height : 400px;
border : 1px dashed lightgray;
}

.post3 {
background : #ffffff;
height : 600px;
border : 1px dashed lightgray;
}


.spacer {
padding-bottom : 10px;
text-align : right;
clear : both;
text-transform : lowercase;
}
.meta {
font-size : 0.9em;
}
.meta li, ul.post-meta li {
display : inline;
}
.meta ul {
display : inline;
list-style : none;
margin : 0;
padding : 0;
}
.meta {
color : #555;
font-weight : normal;
letter-spacing : 0;
padding-left : 5px;
}
.storycontent {
font-size : 115%;
padding-left : 10px;
padding-right : 10px;
}
#commentform {
padding-left : 6px;
}
#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background : #ffffff;
border : 1px solid #e1e1e1;
color : #333;
padding-left : 2px;
}
#commentform textarea {
width : 98%;
}
#commentlist li ul {
border-left : 1px solid #ededed;
font-size : 110%;
}
ol#commentlist li {
list-style : decimal;
}
#content {
width : 600px;
margin : 5px 0 0 265px;
text-align : justify;
}
#content ol li {
list-style : decimal;
}
#content ul {
margin-top : 10px;
margin-left : 35px;
}
#content ul li {
list-style-image : none;
}
#content-big {
float : left;
width : 575px;
margin : 0 8px 20px 8px;
text-align : justify;
}
#menu {
text-align : left;
font-family : 'Lucida Grande', Arial;
font-size : 8pt;
padding-left : 40px;
}
#search {
float : right;
}
#menu a {
color : #ff7800;
text-decoration : none;
}
#menu a:hover {
color : #ff7800;
text-decoration : underline;
}
#menu a:visited {
color : #ff7800;
text-decoration : none;
}
#menu a:visited:hover {
color : #ff7800;
text-decoration : underline;
}
#header {
font-size : 33px;
font-weight : bold;
text-decoration : none;
font-family : Verdana;
margin : 0 auto;
height : 195px;
width : 900px;
padding : 0;
background : url("images/header.jpg");
}
.header-title {
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
color : #fcb300;
font-size : 28px;
font-weight : bold;
padding : 165px 0 0 328px;
text-align : left;
}
.header-title a {
color : #ff7800;
text-decoration : none;
border-bottom : none;
}
.header-title a:hover {
color : #ff7800;
text-decoration : underline;
border-bottom : none;
}
.header-description {
font-size : 11px;
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight : normal;
color : #eeeeee;
padding : 0 0 0 329px;
text-align : left;
}
#footer {
width : 900px;
height : 90px;
margin : 0 auto;
color : #eeeeee;
background : url("images/footer.jpg") no-repeat;
border-left : 3px solid #262626;
border-right : 3px solid #262626;
}
#footer a {
color : #ff7800;
text-decoration : none;
}
#footer a:hover {
color : #ff7800;
text-decoration : underline;
}
#footer a:visited {
color : #ff7800;
text-decoration : none;
}
#footer a:visited:hover {
color : #ff7800;
text-decoration : underline;
}
#menu-left {
float : left;
padding : 0px 10px 0px 35px;
width : 210px;
font-size : 11px;
border-right : 2px dotted #ededed;
display : inline;
}
#menu-left a, #menu-left a:visited {
text-decoration : none;
color : #ff7800;
}
#menu-left a:hover, #menu-left a:visited:hover {
color : #ff7800;
text-decoration : underline;
}
#menu-left ul ul {
padding-bottom : 10px;
margin-left : 15px;
}
#menu-left ul ul li {
list-style-image : url("images/icon.gif");
margin-left : 5px;
}
.rss {
width : 220px;
background : url("images/rss.jpg") no-repeat;
}
#rap {
width : 900px;
margin : 0 auto;
background : url("images/main.jpg") repeat-y;
text-align : left;
border-left : 3px solid #262626;
border-right : 3px solid #262626;
}

Configuration: Mac OS X
Firefox 3.0.7

Meilleures réponses pour « PB CSS sous safari ? » dans :
Les classes de style (CSS) Voir Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Safari en plein écran VoirSafari en plein écran Comment mettre Safari en plein écran ? Grande question... et raccourci trouvé par inadvertance et chance finalement ! Le raccourci est le suivant : pomme + Entrée pour les macbook la pomme étant la touche cmd +...
Télécharger Safari VoirSafari, le navigateur phare de Apple, par défaut sur les systèmes Mac OS et sur l'iPhone, est désormais disponible sur PC. Safari se veut plus rapide que les autres navigateurs, il a le mérite d'être très proches des standards du web, ce qui en fait...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...

1

Dalida, le 17 mar 2009 à 20:47:58

Salut,

essaie de définir les quatre états du lien en respectant bien l'ordre :

a:link, 
a:visited,
a:hover,
a:active {
color : #ff7800;
text-decoration : none;
} 
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

2

thomasbmx, le 17 mar 2009 à 21:29:32

Merci pour ton aide.

J'ai finalement fixé le problème.

j'ai remplacé par ce que tu m'as dit mais à première vue, il ne s'est passé aucun changement. J'ai eu une idée.

La page qui appelait le lien était du genre un bloc avec ce genre de syntaxe :

<div class="post"> </div>

que j'ai changé par <div id="post"> </div>

et dans le css le

.post a:link {
color : #ff7800;
text-decoration : none;
}

par

#post a:link {
color : #ff7800;
text-decoration : none;
}

et ça fonctionne nickel. Au top sous SAFARI, firefox, IE et Opéra !

Répondre à thomasbmx

3

 Dalida, le 18 mar 2009 à 08:29:26

Salut,

parfait !
au passage, l'explication pour les suivants, avec une classe la règle a une priorité de 10, avec un identifiant la priorité passe à 100.

bon courage pour la suite !
[ Mathieu ]

Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida