PB CSS sous safari ?

Fermé
thomasbmx - 17 mars 2009 à 20:35
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 18 mars 2009 à 08:29
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;
}
A voir également:

2 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
17 mars 2009 à 20:47
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;
} 
0
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 !
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
18 mars 2009 à 08:29
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 !
0