Posez votre question Signaler

PB CSS sous safari ?

thomasbmx - Dernière réponse le 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;
}
Lire la suite 

PB CSS sous safari »

3 réponses
Réponse
+0
moins plus
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;
} 
thomasbmx - 17 mars 2009 à 21:29
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 !
Ajouter un commentaire
Réponse
+0
moins plus
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 !
Ajouter un commentaire
Ce document intitulé « PB CSS sous safari ? » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook