CSS lisible sur FF sous Mac mais pas sous Safari (ok sur FF et IE /PC)

Question

Rozenn

20 Feb 2007 à 13:42

Bonjour à tous,
savez-vous pourquoi une feuille de style est lisible sur PC (IE et FF) et sous FF sur Mac mais pas sur Safari ?
J'ai fait en sorte de placer une image (un bandeau en qq sorte) en haut de mes pages, de façon fixe et elle n'apparait pas uniquement sous safari !?
Ya t'il un élément qui m'échappe ?

Mes pages sont déclarées en HTML 4 Transitional et voici ma feuille de style :

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#27365A;
	background-image: url(../navigation/habillage/habillage1024_02.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #FFFFFB;
	margin-left: 0px;
	margin-top: 0px;
	margin-left: *;
}
.normalbleufonce {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #5E65C0;
}
.lienbleu {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #27365A;
	font-weight:bold;
}
.lienbleufonce {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #5E65C0;
	font-weight:bold;
}
.lienjaune {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #E8B832;
	font-weight:bold;
}
.lienvioline {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #B96A7A;
	font-weight:bold;
}
.lienvert {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #A2AE54;
	font-weight:bold;
}
.lienbleuclair {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #98D3E8;
	font-weight:bold;
}
.rubrique1bleufonce {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #5E65C0;
	text-decoration: none;
}	
.rubrique2jaune {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #E8B832;
	text-decoration: none;
}
.rubrique3violine {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #B96A7A;
	text-decoration: none;
}
.rubrique4vert {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #A2AE54;
	text-decoration: none;
}
.rubrique5bleuclair {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #98D3E8;
	text-decoration: none;
}
.textejustifieretrait {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size:12px;
	color: #27365A;
	line-height: 15px ;
	text-indent: 2em;
}
.textejustifie {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size:12px;
	color: #27365A;
	line-height: 15px ;
}
.majuscule {
	text-transform: uppercase;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color: #27365A;
}
.medium {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #27365A;
}
.legende {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight:bold;
	color: #27365A;
}
.copyright {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #27365A;
}
.lien {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #27365A;
	text-decoration: underline;
}
.small {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #27365A;
}

#contenu {
	scrollbar-face-color: #bebebe;
	overflow-y:scroll;
	overflow-x:hidden;
	scrollbar-shadow-color: #ffffff;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-track-color: #ffffff;
	scrollbar-darkshadow-color: #ffffff;
	scrollbar-base-color: #cccccc;
	scrollbase-highlight-color: #ffffff;
	z-index: 4;
	visibility: visible;

Merci d'avance pour vos tuyaux Smiley cligne

Modifié par Rozenn (20 Feb 2007 - 13:43)

Benjamin D.C.

20 Feb 2007 à 14:00

Bonjour,

Est-ce que ta page est en ligne? Il est difficile d'évaluer le problème comme ça je trouve...

Sinon, au passage:
- margin-left: *; n'existe pas
- utilise de préférence des unités relatives pour attribuer une taille à tes polices
- tu pourrais compresser ta feuille de style en évitant de répéter les familles de polices autant de fois ainsi qu'en optant pour la syntaxe condensée grâce à font. Par exemple:

.lienbleu {font:bold .8em verdana, geneva, arial, sans-serif;}

Rozenn

20 Feb 2007 à 16:46

Benjamin D.C. a écrit :
Bonjour,

Est-ce que ta page est en ligne? Il est difficile d'évaluer le problème comme ça je trouve...

Non ma page n'est pas encore en ligne Benjamin. Je publie le code en fin de message au cas où ça peut aider, sinon voici un aperçu visuel :

C'est le bandeau tout en haut (habillage1024_02.png) qui n'apparait pas dans safari.

a écrit :
Sinon, au passage:
- tu pourrais compresser ta feuille de style en évitant de répéter les familles de polices autant de fois ainsi qu'en optant pour la syntaxe condensée grâce à font.

hum..c'est à dire, comment ne pas les répéter ? (désolée si la question semble stupide mais je commence seulement avec css donc... Smiley confused

)
Merci

Voici le code HTLM de la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Odorico, Mosaïstes - Déroulement d'un chantier</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv=imagetoolbar content="no">
<meta http-equiv="Content-Language" content="fr">
<meta name="Reply-to" content="mosaiques.odorico@free.fr">
<meta name="description" content="Ce site présente la technique de la mosaïque à travers l'histoire de la famille Odorico, mosaïstes Italiens installés à Rennes en 1882. Partez à la découverte de quelques réalisations à travers l'Ouest de la France...">
<meta name="keywords" content="mosaïque, mosaïques, mosaïstes, Odorico, Art déco, Facchina, Sequals, Italie, photographie">
<meta name="Author" content="Rozenn Turni">
<meta name="Identifier-URL" content="http://.............................................">
<meta name="Copyright" content="Rozenn Turni">
<meta name="Revisit-after" content="1 month">
<meta name="Robots" content="all">

<style type="text/css">
@import url("css/decouverte.css");
</style>

<script type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="MM_preloadImages('photos/technique/poste_IVR53_933500153XA_2.jpg','photos/technique/poste_IVR53_933500157XA.jpg','photos/technique/poste_IVR53_933500163XA.jpg','navigation/imprimer2.png','navigation/accueilb.gif','/navigation/puce-vertg.jpg')">
<div id="contenu" style="position:absolute; left:80px; top:194px; width:554px; height:380px;">
  <div align="center">
    <blockquote>
      <div id="Layer2" style="position:absolute; left:36px; top:339px; width:486px; height:246px; z-index:5">
        <p align="justify">Comme l'indiquent les travaux de Jean-Yves Veillard*, le palais du Commerce, qui abritait initialement l'hôtel des Postes et des Télégraphes et l'école régionale des Beaux-Arts est construit sur les plans de l'architecte communal Jean-Baptiste Martenot, puis sur ceux de son successeur Emmanuel Le Ray. </p>
        <p align="justify">La première tranche des travaux (construction de l'aile ouest) débute en 1886 et s'achève en 1891 avec l'installation de l'hôtel des Postes, aux niveaux inférieurs, et de l'école régionale des Beaux-Arts, aux niveaux supérieurs. <BR>
    Les travaux sont terminés sous la direction de l'architecte communal Emmanuel Le Ray qui, en 1896 et en 1910, propose de nouveaux dessins pour le pavillon central. </p>
        <p align="justify"><strong><span class="copyright">    * VEILLARD, Jean-Yves. Rennes au XIXe siècle : architectes, urbanisme et architecture. Editions du Thabor : Rennes, 1978. </span></strong></p>
      </div>
      <p> </p>
      <div id="Layer3" style="position:absolute; left:36px; top:1251px; width:486px; height:54px; z-index:5">
        <div align="justify">
          <p>En 1993, la poste fait l'objet de travaux de rénovation et à cette occasion, quelques mosaïques d'Odorico sont découvertes. C'est l'atelier Sinopia du Mans dirigé par Mr Hubert Philippe qui est chargé de les restaurer. </p>
          <p> </p>
          <p align="center"><a name="chantier"></a>
            <object type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" data="video/restauration.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="255" align="middle">
              <param name="movie" value="video/restauration.swf">
              <param name="quality" value="high">
            </object>
</p>
          <blockquote>
            <p align="center">                <span class="legende"><br>
© "Sur les traces d'Isidore Odorico"</span><span class="copyright">,<br>
    </span><span class="copyright">extrait, Candela Productions,1996.</span> <br>
    <SPAN style="FONT-FAMILY: Arial"><SPAN class=txtgrismedium><FONT color=#000000><SPAN class=txtnoirsmall><img src="navigation/film.gif" width="20" height="14" align="absmiddle"> 3'32</SPAN></FONT><FONT color=#000000><SPAN class=txtnoirsmall></SPAN></FONT><FONT color=#000000 size=2><SPAN class=txtnoirsmall> (</SPAN></FONT></SPAN><span class="copyright"><FONT color=#000000>12 Mo)</FONT></span> </SPAN></p>
          </blockquote>
        </div>
      </div>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <div id="Layer1" style="position:absolute; left:99px; top:13px; width:354px; height:314px; z-index:5">
        <div align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('poste de rennes','','photos/technique/poste_IVR53_933500153XA_2.jpg',1)"><img src="photos/technique/IVR53_963501884XA.jpg" name="poste de rennes" width="350" height="270" border="0"><br>
        </a><strong class="legende">Rennes - Ancien palais du Commerce et hôtel des Postes, actuellement poste.</strong> <br>
        <span class="small">©</span> <span class="small">G. Artur - Inventaire général, ADAGP 1996</span> </div>
      </div>
      <p align="left"> </p>
      <p align="center"> </p>
      <p align="center"><BR>
      </p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center">       </p>
      <p align="center"><br>
      </p>
      <p align="center">       </p>
      <p align="center">En 1931, l'entreprise Odorico réalise l'ensemble des mosaïques de cet édifice. </p>
      <p align="center">        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','photos/technique/poste_IVR53_933500157XA.jpg',1)"><img src="photos/technique/poste_IVR53_933500159XA.jpg" name="Image7" width="320" height="250" border="0"></a> </p>
      <p align="center"><span class="legende">Détails des mosaïques du sol<br>
      </span><span class="small">© G. Artur - Inventaire général, ADAGP 1993.</span></p>
      <p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','photos/technique/poste_IVR53_933500163XA.jpg',1)"><img src="photos/technique/poste_IVR53_933500155XA.jpg" name="Image8" width="319" height="250" border="0"></a></p>
      <p align="center"><span class="legende">Détails des lambris<br>
      </span><span class="small">© G. Artur -Inventaire général, ADAGP 1993.</span></p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center">     </p>
    </blockquote>
  </div>
</div>
<div id="rubrique" style="position:absolute; left:82px; top:141px; width:477px; height:20px" class="rubrique3violine"><span class="rubrique4vert"> <!-- #BeginLibraryItem "Library/go-back-vert.lbi" --><span class="lienvert"><a href="#" onClick="history.back()" onMouseOver="MM_swapImage('Image111','','navigation/puce-vertg.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="navigation/puce-vert.jpg" name="Image111" width="19" height="18" border="0" align="left" id="Image111"></a></span><!-- #EndLibraryItem --> La restauration   ></span><span class="medium"> Déroulement d'un chantier de restauration </span></div>
<base target=_top>
<center>


<br>
<div id="imprimer" style="position:absolute; left:34px; top:104px; width:21px; height:19px; z-index:1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','navigation/imprimer2.png',1)"><img src="navigation/imprimer1.png" alt="Imprimer la page" name="Image11" width="20" height="30" border="0" onClick="javascript:window.print()"></a></div>
<div id="accueil" style="position:absolute; left:-10px; top:139px; width:71px; height:49px; z-index:1"><a href="accueil.htm" target="_parent" onMouseOver="MM_swapImage('Image9','','navigation/accueilb.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="navigation/accueila.gif" alt="Retour vers page d'accueil" name="Image9" width="28" height="26" border="0"></a></div>
</center>
</body>
</html>

[/i][/i][/i][/i][/i][/i]
Modifié par Rozenn (20 Feb 2007 - 17:16)

Sujet clos

CSS et mise en forme, CSS3

CSS lisible sur FF sous Mac mais pas sous Safari (ok sur FF et IE /PC)