compatibilité chrome, IE/Firefox

20 juin 2012, 11:00

Bonjour,
Je ne connais pas grand chose en css! je fais une application php/css/sql/javascript. je regarde des tutos, je récupère des codes que je modifie à ma sauce.
J'ai trouvé récemment le moyen de faire des onglets en javascript.(je n'ai jamais fait de javascript

)
ça fonctionne (pratiquement) comme je veux sur google chrome. Mise a part un problème d'ajustement de hauteur tout va bien!
J'ai essayé sur IE puis sur firefox mais ça ne fonctionne pas. Et j'ai remarqué que (je pense) toutes mes autres pages ne fonctionnent pas non plus sous IE. donc le problème ne vient pas du javascript a priori. je ne m'y prends surement pas correctement, soit en css soit en html donc je viens chercher de l'aide ici!
J'ai donc un fichier css:

Code : Tout sélectionner

#photo{width:20%; position: absolute; top:0; left:0; height:20%;}
#photo img{height:100%; margin-left:0%;}
#titre{width:51%;position:absolute; top:-2%; left:30%; height:5%;}

#pied{width:100%; position:absolute; top:95%; left:0; height:5%; overflow: hidden; font-size: 70%;}
#titre, #pied{text-align:center;}

#menu{ border-bottom : 1px solid #9EA0A1;
        padding-bottom : 25px;}
#page{font-size: 90%; width:90%; position: absolute; top:5%; left:10%; height 20%; margin-bottom:-50px;}

.marge{margin-left: 15em;}

#onglets
{
      position : absolute;
        border : 1px solid transparent;
        padding : 0;
        font : bold 11px Batang, arial, serif;
        list-style-type : none;
        left : 50%;
        margin-top : 0;
        width : 500px;
        margin-left : -215px;

}
#onglets li
{
    float : left;
    height : 21px;
    background-color: #F4F9FD;
    margin : 2px 2px 0 2px ;
    margin : 1px 2px 0 2px;
    border : 1px solid #9EA0A1;

        }
#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #fff;

}
#onglets a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;

}
#onglets a:hover
{
    background : #fff;

}

et un fichier php:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://.w3.org/TRxhtml1/DTD/xhtml1-strict.dtd"/>
<html xmlns="http://<<.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"  type="test/css" href="stylesappel_modif.css"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<div id="menu">
<ul id="onglets">
<li><a href="accueil.php"> Accueil </a></li>
<li><a href="accueil_appel_offre.php"> appel d'offre </a></li>
    <li><a href="etude_accueil.php"> etude </a></li>
    <li class="active"><a href="exploitation.php"> exploitation </a></li>
    <li><a href="recherche.php"> recherche </a></li>
    <li><a href="alerte.php"> alerte </a></li>
    <li><a href="etat.php"> etat </a></li>
  </ul>
</div>

<title>cegelec</title>


<br><br><br><br><br>

<style><!--
#body {
	font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	color: #333;
	margin-bottom:5px auto;
}

#ecform_container {
	position: relative;
	width: 100%;
	height: 70%;
	margin: 2em auto;
	padding:0;
	text-align: left;
}
#ecform_container * {
	margin: 0;
	padding: 0;
}
#ecform_title {
	font-size: 1.7em;
	font-weight: bold;
	float: left;
}
#ecform_entete ul#menu {
	position: relative;
	float: right;
	margin-right: 0;

	margin-right: 6px;

}
#ecform_entete ul#menu li {
	float: none;

	float: left;

	display: inline;
}
#ecform_entete ul#menu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
}
#ecform_container ul#menu li a.ghost:hover { 
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_container ul#menu li a.current:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_topbar {
  clear: both;
  font-size: x-small;
  height: 22px;
  padding-top: 5px;
  padding-left: 25px;
  border: thin #dcdcdc solid;
	background-image:url(topbar-bg.gif);
  _background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
}
#ecform_btmbar {
  font-size: x-small;
  height: 33px;
  padding-top: 5px;
  padding-left: 25px;

  border: thin #dcdcdc solid;
	background-image:url(btmbar-bg.gif);
  background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
}
#ecform_btmbar ul .buttons {
	position: relative;
	float: right;
	margin-right: 0;

	margin-right: 6px;
	
}
#ecform_btmbar ul li {
	float: none;

	float: left;

	display: inline;
}
#ecform_btmbar ul li a{
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border: thin #c0c0c0 solid;
	background-color: #f0f8ff;
	-moz-border-radius: 10px;
}
#ecform_btmbar #btsubmit:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btcancel:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btsubmit:active {
  background-color: #b0c4de;  
  margin-top: 4px;
  margin-right: -4px;
}
#ecform_btmbar #btcancel:active {
  background-color: #b0c4de;
  margin-top: 4px;
  margin-right: -4px;
  margin-left: 4px;
}
#ecform_content {
  clear: both;
  height: 350px;
  border-left: thin #dcdcdc solid;
  border-right: thin #dcdcdc solid;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  overflow-x : hidden;  
}
#ecform_content .titcontent {
  float:left;
  margin-top: 1em;
}
#ecform_entete a.current {
	background-color: #b9dbed;
}
#ecform_entete a.ghost  {
	background-color: #f0f8ff;
}
#ecform_container .on {
	display: block;
}
#ecform_container .off {
	display: none;
}
.ecform_smenu{
	position: relative;
	float: right;
	font-size: x-small;
	margin-right: -1.4em;
}
#ecform_content .smcontent {
  clear: both;
  position: relative;
  padding-top: 1em;
  height:400px;
}
.ecform_smenu ul.smenu {
	position: absolute;
	float: right;
	margin-right: 0px;

	margin-right: 0px;

}
.ecform_smenu ul.smenu li {
	display: inline;
	float: none;

	float: left;

}
.ecform_smenu ul.smenu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;
	display: block;
	width: 80px;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px; 
}
#ecform_container ul.smenu li a.sghost:hover {
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
#ecform_container ul.smenu li a.scurrent:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
a.scurrent {
	background-color: #cee4f2;
}
a.sghost  {
	background-color: #f0f8ff;
}
.son {
	display: block;
}
.soff {
	display: none;
}
--></style>

<script type="text/javascript">
<!--
function multiMenu(eltId) {
	arrLinkId = new Array('_0','_1','_2','_3');
	intNbLinkElt = new Number(arrLinkId.length);
	arrClassLink = new Array('current','ghost');
	strContent = new String()
	for (i=0; i<intNbLinkElt; i++) {
		strContent = "menu"+arrLinkId[i];
		if ( arrLinkId[i] == eltId ) {
			document.getElementById(arrLinkId[i]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'on content';
		} else {
			document.getElementById(arrLinkId[i]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'off content';
		}
	}	
}
function multiSMenu(eltId,pfxContent,n,m) {
  arrLinkId = new Array();
  for (i=0; i<m; i++) {arrLinkId.push('s'+n+i);}			
	arrClassLink = new Array('scurrent','sghost');
	strContent = new String()
	for (j=0; j<arrLinkId.length; j++) {
		strContent = pfxContent+arrLinkId[j];
		if ( arrLinkId[j] == eltId ) {
			document.getElementById(arrLinkId[j]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'son scontent';
		} else {
			document.getElementById(arrLinkId[j]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'soff scontent';			
		}
	}	
}
-->
</script>
</head>
<body>
<center><div id="photo"><img src="cegelec.jpg" /></div></center>
<div id="titre"><h1>Exploitation
<?php
$SAP = $_POST['SAP'];
echo "numero d affaire: " . $SAP ;?></h1>
</div>
<div align="right" id="deconnexion">
<a href="logout.php">Se deconnecter</a>
</div>

<?php

function InsertSmenu( $pfxContent, $numMenu, $strItems = array(), $bwidth = 0) {
?>      	  <div class="ecform_smenu">
          	<ul class="smenu">
<?php
$bwidth =($bwidth > 0) ? 'style ="width:'.$bwidth.'px;" ' : '';
for($i=0; $i<count($strItems); $i++) {
	echo "\t\t".'<li class="smenu'.$i.'">'."\n\t\t";
	echo '<a id="s'.$numMenu.$i.'" class="'.(($i == 0) ? 'scurrent':'sghost').'" onclick="multiSMenu(this.id,'."'".$pfxContent."'".','.$numMenu.','.count($strItems).')" alt="smenu_'.$numMenu.$i.'" '.$bwidth.'>'.$strItems[$i].'</a>'."\n";
	echo "\t\t".'</li>'."\n";
}
?>       	  </ul>
    	      </div>
<?php
}
?>

<div id="ecform_container">

	<div id="ecform_topbar">exploitation</div>
	<div id="ecform_content">
  	<div id="menu_0" class="on content">
  	  <div class="titcontent">
    		<h2 >exploitation</h2>
    		<p>Texte Accueil ;)</p>
    	</div>
    	<?php echo InsertSmenu("smenu",0,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'));?>
    	<div class="smcontent">
      	<div id="smenus00" class="son scontent">
      		<h2>BTA</h2>
      		<?php echo InsertForm1();?>
      	</div>  	
      	<div id="smenus01" class="soff scontent">
      		<h2>HTA</h2>
	
      	</div>  	
      	<div id="smenus02" class="soff scontent">
      		<h2>EP</h2>
   
      	</div>
      	<div id="smenus03" class="soff scontent">
      		<h2>GC FT</h2>
      
      	</div>
      	<div id="smenus04" class="soff scontent">
      		<h2>GC HD</h2>
    
      	</div>
      	<div id="smenus05" class="soff scontent">
      		<h2>SONO</h2>
 
      	</div>
      	<div id="smenus06" class="soff scontent">
      		<h2>AEP</h2>

      	</div>
      	<div id="smenus07" class="soff scontent">
      		<h2>FIBRE</h2>
 
      	</div>
      	<div id="smenus08" class="soff scontent">
      		<h2>GAZ</h2>

      	</div>
      	<div id="smenus09" class="soff scontent">
      		<h2>divers</h2>
 
      	</div>
      </div>
  	</div>

  </div>
  <div id="ecform_btmbar">
    <ul id="ecform_buttons">
      <li class="buttons">
        <a id="btcancel" alt="Cancel">Annuler</a>
      </li>  
      <li class="buttons">
        <a id="btsubmit" onClick="document.forms.f.submit()" alt="Submit">Valider</a>
      </li>
    </ul>
  </div>
</div>



<div id="pied">
<center>


Application de Cegelec Angers<br>
Cegelec Beaucouz&eacute; - zi angers 3 rue de l'ardeliere 49000
</center>
</div>
</body>
</html>

désolé pour la longueur

quelqu'un a une idée et surtout le courage de m'aidé?
Merci d'avance.

21 juin 2012, 22:05

salut, j'ai pas réellement regarder ton code mais commence par lire ça, je suis sur que tu trouveras ton chemin !
http://www.alsacreations.com/astuce/lir ... t-css.html

compatibilité chrome, IE/Firefox

Qui est en ligne