28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je finalise ce site : http://jul11.idoo.com, qui s’affichait correctement sur l’ensemble des navigateurs... jusqu’à ce qu’un ami m’envoie une capture d’écran de ce qu’il voit sous Safari version 1. Le bloc orange "Actualités" qu’on peut voir normalement sur la page sommaire disparaît, et son contenu remonte sous le bloc "Notre sélection".
Je pense à un pb de positionnement des blocs "Contenuactualités" et "Programmes"...
Mais : comment en modifier les propriétés sans que ça affecte l’affichage sur les autres navigateurs, qui eux, se comportent gentiment ?!
Merci d’avance.

Voici le CSS :


@charset "UTF-8";
/* CSS Document */

/* Disposition et habillage des principaux blocs */

#Entete {
        position:static;
        left:0px;
        top:20px;
        width:800px;
        height:95px;
        z-index:1;
        background-color: #FFFFFF;
        margin-right: auto;
        margin-left: auto;
}
#Conteneur {
        position:static;
        left:0px;
        top:115px;
        width:800px;
        height:680px;
        z-index:2;
        background-color: #000000;
        margin-right: auto;
        margin-left: auto;
}
#Pied {
        position:relative;
        left:0px;
        top:3px;
        width:800px;
        height:80px;
        z-index:4;
        background-repeat: no-repeat;
        margin-right: auto;
        margin-left: auto;
        background-image: url(piedpage.gif);
}
#Contenuselection {
        position:relative;
        left:auto;
        top:55px; 
        width:760px;
        height:420px;
        z-index:1;
        background-image: url(notreselection.gif);
        background-repeat: no-repeat;
        margin-right: 0px;
        margin-left: auto;
        right: auto;
}
#Contenuactualités {
        position:relative;
        left:auto;
        width:620px;
        height:170px;
        z-index:5;
        background-image: url(animations.gif);
        background-repeat: no-repeat;
        right: 91px;
        margin: auto;
        top: 72px;
}
#Programme {
        position:relative;
        left:310px;
        top:auto;
        width:140px;
        height:50px;
        z-index:3;
        margin-right: auto;
        margin-left: auto;
        bottom: 50px;
        color: #FFFFFF;
        font-family: "Myriad Pro Bold It", "Gill Sans", sans-serif;
        font-size: 20px;
        font-weight: normal;
}
#Trouver {
        position:relative;
        top:5px;
        width:190px;
        height:90px;
        z-index:1;
        margin-right: auto;
        margin-left: auto;
        left: auto;
        right: 290px;
}
#Logo {
        position: relative;
        height: 90px;
        width: 470px;
        margin-right: auto;
        margin-left: auto;
        left: 165px;
        top: -85px;
}

/* Habillage et disposition des extraits introductifs de l'encart Notre sélection */

.liste-articlesselection ul { margin: 0; padding: 0; list-style: none; }
.liste-articlesselection li { margin-bottom: 1em; clear: both; }

.liste-articlesselection li .titre {
        font-size: 26px;
        font-family: "Myriad pro", sans-serif;
        margin-bottom: 1px;
        padding-top: 0px;
        padding-left: 20px;
        color: #000000;
}

.liste-articlesselection li .spip_logos {
        float: left        ;
        margin-top: -15px;
        margin-bottom: 40px;
        padding-left: 10px;
        padding-right: 10px;
        border: 0;
        clear: right; }

.liste-articlesselection li .chaposelection {
        margin: 0;
        padding-bottom: 0;
        padding-right: 20px;
        padding-left: 20px;
        font-family: "Gill Sans", sans-serif;
        text-align:justify;
        font-size: 12px;
        color: #000000;
}

/* Habillage et disposition des extraits introductifs de l'encart Actualités */

.liste-articlesactus ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
}
.liste-articlesactus li { margin-bottom: -10px; padding-top: 8px; }

.liste-articlesactus li .titreactus {
        font-size: 18px;
        font-family: "Myriad pro", sans-serif;
        margin-top: 20px;
        margin-bottom: 1px;
        padding-top: 0px;
        padding-left: 20px;
        color: #000000;
}
.liste-articlesactus li .chapoactus {
        margin: 0;
        padding-top: 0px;
        padding-left: 20px;
        padding-right:10px;
        padding-bottom: -10px;
        font-family: "Gill Sans", sans-serif;
        text-align:justify;
        font-size: 12px;
        color: #000000;
}

/*  ------------------------------------------
/*  Couleurs des liens
/*  ------------------------------------------ */
a {
        text-decoration: none;
        color: #FFFFFF;
}
a:hover { text-decoration: underline; }
Jul11 a écrit :
ce qu’il voit sous Safari version 1.

Es-tu bien sûr qu'il s'agit de Safari 1? Cette version représente aujourd'hui à peu près 0,01% de parts de marché, c'est même étonnant qu'un de tes amis la possède encore… Smiley sweatdrop
Oui c'est bien Safari 1. Ca m'a étonné aussi... Je lui ai fait remarquer que les mises à jour existaient !
Mais cela dit je ne sais pas si les vieux mac (un imac G3 dans ce cas précis) sous Panther supportent beaucoup de versions plus récentes de Safari. Et on en trouve tout de même encore...
Bref je pensais comme toi que Safari 1 était passé aux oubliettes, et je ne comptais pas m'arracher les cheveux à adapter mon code pour lui...
Mais comme ça fait 2 personnes de mon entourage qui me font la remarque (la première équipée d'un emac G4), je commence à me demander s'il faut vraiment le négliger. Smiley confus

A moins que je sois tombé sur les deux derniers utilisateurs au monde de Safari 1 !