PB CSS sous safari ?

thomasbmx -  
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   -
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   Statut Contributeur Dernière intervention   922
 
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
thomasbmx
 
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   Statut Contributeur Dernière intervention   922
 
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