28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Probleme safari

Bonjour,

Je rencontre un petit problème , non ... en fait un gros problème . J'ai fait un site FF, IE pas de problèmes. Mais sous safari c'est le drame. Ma div conteneur par en sucette complètement sur le coté droit. A l'ouest de tout . En fait, la dernière version de safari ne me le fait pas. Celle d'avant (3 et 2) le font. J'ai passé mon code sur w3c , pas de problème .
A L'aide je craque. Smiley fou Smiley scream

Ps : je vous passe le lien en MP
Modifié par deby (22 Sep 2009 - 17:07)
Bonjour,


Je vais tâcher de me concentrer pour visualiser le problème...

Hum...

Nan, ça marche pas ! Il va me falloir un peu d'aide. Genre une page en ligne ou un peu de code.

ps. : Les mp c'est bien, mais ça n'aide pas pour l'aide "oportuniste".
Modifié par Laurie-Anne (15 Sep 2009 - 15:53)
Il n'y pas vraiment de solutions à ton problème, il est reconnu que les anciennes versions de safari étaient catastrophiques quand aux respects des normes... Donc à part trouver des hacks spécifiques, il n'y a pas vraiment de solutions (que je connaisse en tout cas)
Mais personnellement vu le nombre d'utilisateurs que représentent les utilisateurs des anciennes version de Safari aujourd'hui, j'avoue je cherche plus à rendre mes sites compatibles avec, tant qu'ils ont accès au contenu...
Laurie-Anne a écrit :
Bonjour,


Je vais tâcher de me concentrer pour visualiser le problème...

Hum...

Nan, ça marche pas ! Il va me falloir un peu d'aide. Genre une page en ligne ou un peu de code.

ps. : Les mp c'est bien, mais ça n'aide pas pour l'aide "oportuniste". 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>...</title>


  	<meta name="language" content="fr" />
	<meta name="revisit-after" content="15 days"/>
	<meta http-equiv="Pragma" content="no-cache"/> 

	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript" src="swfobject2.js"></script>
  <link rel="SHORTCUT ICON" href="favicon.png"/>

  <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="css/contenusStyle.css" rel="stylesheet" type="text/css" />
  <link href="css/emissionStyle.css" rel="stylesheet" type="text/css" />
 	<!--[if lte IE 6]>
		...
	<![endif]-->

</head>


<body>

<div><img id="dose" src="./images/gaucheVotredose.gif" width="32" height="403" alt="dose"/></div>

<h1 id="header"> 
	<img id="titre" src="images/logo.png" width="277" height="94" alt="logo"/>
</h1>
	<!-- MENU -->
 	<div id="menudiv">
		<ul id="menu">
			<li><a href="?page=accueil">Accueil</a></li>
			<li class="sousmenu"><a href="?page=lachaine">La chaine</a>

				<ul class="niveau2">
					<li><a href="?page=lachaine&col=histo">Historique</a></li>
					<li><a href="?page=lachaine&col=symvep">SYMVEP</a></li>
					<li><a href="?page=lachaine&col=team">L'équipe</a></li>
					<li><a href="?page=lachaine&col=canalcoq">Canal Coq' en image</a></li>
				</ul>
			</li>

			<li><a href="?page=journal">Journaux</a></li>
			<li class="sousmenu"><a href="?page=emission">Emissions</a>
				<ul class="niveau2">
				<li><a href="?page=magazine">Magazines</a></li>
				<li><a href="?page=emission">Emissions Spéciales</a></li>
				</ul>
			</li>

			<li ><a href="?page=horaire">Horaires</a></li>
			<li><a href="?page=diff">Diffusion</a></li>
			<li><a href="?page=contact">Contact</a></li>
			<li><a href="?page=liens">Liens</a></li>   
		</ul>
	</div>

<div id="conteneur">&#65279;
<div id="colonne1"> 
        </div><!-- fin du div colonne1 -->

	<!---		JT -->
     <div id="colonne2">
     </div><!-- fin du div collone2-->
</div>

<div id="footer">
...
</div>

</body>
</html>





body 
  {
	margin: 0 ;
    padding: 0;
	background:url(../images/Fond.jpg) no-repeat left top ;    
	background-attachment:fixed;
    width: 100%;
	font-family: "Verdana";
	text-align:center;
	
 }
 
 img
 {
	border:none;
 }
 
object 
 {
	border:none;
}

a, a:visited
{
	text-decoration:none;
	color:black;
}

div#conteneur
  {	
	width: 80%;	
	min-height:600px;
	
	text-align: left;
	background-color: rgb(255, 255, 255);
	font-size: 12pt;
	color: rgb(0, 0, 0);
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0;
	
	padding-top:15px;
	padding-right:15px;
	padding-bottom:0px;
	
	overflow:hidden;
	
}

pre 
{ 
  overflow: auto;
}

div#menudiv
{
	height:26px;
	width:100%;
	background-color:black;
	background-repeat:repeat-x;
	
	margin-top:-1.5em;
	margin-bottom:1px;
	border-bottom:3px solid #81BC4E;
}

ul#menu 
  {
	height:26px;
	list-style-type: none;

	position:relative;
	margin:0;
	margin-left:45em;

	width:auto;
}



div#footer 
  {
	height:35px;
	width: 100%;
	background-color:black;
	margin-top:-9px !important;
}


#header 
  { 
  margin: 0 auto;
  margin-bottom:0;

  background-image: url(../images/header2.jpg);
  background-repeat: repeat-x;
  background-position: left top;
  height: 115px;
  width:100%;
}
  
  

  /********************************************************************/
  
  
ul#menu li 
 { 
 	float: left;
    text-align: center;
	
	position:relative;
}

ul#menu li a 
{
	/***** Background*******/
    height: 26px;
	width: 72px;
	background-repeat: no-repeat;
	background-position: center top;
	display: block;
	
	/*****   texte    *****/
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: "Verdana";
	font-size: 10pt;
	font-weight: lighter;
	line-height: 20px;

 }
 
 ul#menu li a:hover
 {
	height: 28px;
    width: 72px;
    background: url(../images/bt2Hover.jpg) center top no-repeat;
 }

div#footer p
{
	/******	Texte	*****/
	text-decoration: none;
	color: white;
	text-align: center;
	font-size: 10pt;
	line-height:20px;
	vertical-align:middle;
	padding-top:5px;
}

img#titre 
{
	margin-top:0.1em;
	visibility: visible;
	position:absolute;
	left:15%;
}


ul#menu ul.niveau2
{
    position: absolute;
    top: 0;
	left:-75%;
    display:none;
	list-style-type:none;

	padding-top:25px;
} 

ul#menu li.sousmenu ul.niveau2 li a
{
	background:#000;
	height:100%;
	width:7em;;

}
ul#menu li.sousmenu ul.niveau2 li a:hover
{
	background:#333;
	height:100%;
	width:7em;

}
ul#menu li.sousmenu:hover ul.niveau2
{
	display:block;		
}



Voilou
Modifié par deby (15 Sep 2009 - 18:08)
J'ai résolu mon problème avec un bete clear:both dans la css au niveau de la div#conteneur. Ca ne fait pas "bugger" FF et IE et Safari a l'air heureux avec.
Sujet clos
Aller à