[CSS] différentes versions css pour navigateu

Fermé

Ilnovo - 6 août 2009 à 14:33
Ilnovo - 6 août 2009 à 15:51

Bonjour,
Je susi en train de developper un menu jquery qui nécessite un position:relative et position:absolute et je me trouve face à plusieurs problèmes dans différents navigateurs donc je ne suis pas très d'accord avec le fait que la plupart des navigateurs respectent les normes css 2.1

Voici un test effectué dans Safari 3 Opera 9 FF2 et CHROME Z :

Le résultat est différent pour chacun des navigateurs

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

<head>
<style type="text/css">
#corpstop {
margin-left : auto;
margin-top : 2%;
margin-right : auto;
width : 995px;
background-color:#143a9a;
height : 150px;
margin-bottom : 0px;
bottom : 0px;
}
#corps {
padding:-2px;
top:0px;
margin-left : auto;
margin-top : 0px;
margin-right : auto;
background-color:pink;
width : 995px;
background-repeat : repeat-y;
}
#corpsbottom {
margin-left : auto;
margin-right : auto;
background-color:black;
background-position : 0 0;
height : 65px;
}

#menu {
margin-left : 16px;
margin-right : auto;
background-color : #01243f;
width : 960px;
height : 45px;
height : 35px;
margin-left : 16px;
margin-bottom : 30px;
}




.smalldiv {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:cyan;
}
.smalldivover {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:white;
}


#menu1 {
width : 103px;
position : relative;
z-index : 1600;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu2 {
width : 130px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
overflow : hidden;
z-index : 1900;
margin-left : -15px;
}
#menu3 {
width : 142px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
z-index : 1800;
margin-left : -15px;
}
#menu4 {
width : 109px;
position : relative;
z-index : 1900;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
overflow : hidden;
}
#menu5 {
width : 100px;
position : relative;
z-index : 2000;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu6 {
width : 85px;
position : relative;
z-index : 3000;
margin-left : -15px;
padding-top : 8px;
padding-left : 45px;
font-size : 14px;
}
#menu7 {
width : 140px;
position : relative;
z-index : 500;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-repeat : repeat-x;
background-color:yellow;
}

#ombre_menu {
clear:both;
background-color:green;
position : absolute;
width : 960px;
height : 10px;
margin-top:40px;
}



#toggle {
background-color:red;
width : 417px;
margin-top : 20px;
margin-left : 273px;
height : 100px;
position : relative;
z-index : 20000;

}
</style>
</head>

<body >
  <div id="corpstop" >
         <a href="#" name="hautdepage"></a>
  </div>

  <div id="corps" style="height:500px;">
			<div id="menu">

			<div class="smalldiv" id="menu1" > <a class="amenu" href="#">Accueil</a> </div>

			<div class="smalldiv" id="menu2" ><a class="amenu" href="#">Notre Societe</a></div>

			<div class="smalldiv" id="menu3" ><a class="amenu" href="#">Les Programmes</a></div>

			<div class="smalldiv" id="menu4" ><a class="amenu" href="#">Les lois</a></div>

			<div class="smalldiv" id="menu5" ><a class="amenu" href="#">Contact</a></div>

			<div class="smalldiv" id="menu6" ><a class="amenu" href="#">Actu</a></div>

			<div id="menu7" > 
			</div>

			<img  id="ombre_menu" width="960" height="10"  />

			<br />


			<div id="toggle">
			</div>
			</div>
   </div>


   <div id="corpsbottom"> 
   </div>

	

</body> 
</html>

Pourriez-vous s'il vous plait regarder si cela fonctionne chez vous et m'aider à comprendre quelles sont mes erreurs de développement.

Merci d'avance de la réponse que vous pourre apporter à mon problème

Eric VErlet

A voir également:

[CSS] différentes versions css pour navigateu
Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Javascript
Css exposant ✓ - Forum CSS
Enlever couleur lien css ✓ - Forum CSS
Css premier plan ✓ - Forum CSS
Css download - Télécharger - HTML

4 réponses

Réponse 1 / 4

ZMEX Messages postés 47 Date d'inscription dimanche 19 avril 2009 Statut Membre Dernière intervention 27 septembre 2010 16
6 août 2009 à 14:39

Bonjour,
si je me rappelle bien, au lieu de travailler avec des px ou des %, il faut utiliser des em
regarde sur le site de https://www.alsacreations.com/
il doivent l'expliquer qq part (je me rappelle plus le nom du dossier)
Normalment, il y a moyen d'harmonier l'affichage entre les navigateurs (enfin presque).
bon courage.

Réponse 2 / 4

Ilnovo
6 août 2009 à 14:53

merci de ta réponse

Réponse 3 / 4

bob
6 août 2009 à 15:20

fait un hack css :
http://www.siteduzero.com/tutoriel-3-36505-les-hacks-css-pour-internet-explorer.html

1 feuille de style pour la daube internet explorer et une autre pour les autres navigateurs :

<link rel="stylesheet" type="text/css" href="style.css" />

Réponse 4 / 4

Ilnovo
6 août 2009 à 15:51

Le problème est que il n'y a pas que IE qui pose des problèmes, il y a aussi chrome opéra et safari ce qui revient à avoir 1 feuilles de style principale et des add-ons pour les différents bugs ce qui n'est pas très catholique.

Je détecte avec un script js le navigateur et j'applique la feuille de style additionelle.

JE crois que cela ne rentre pas dans les normes de programmation d'un site web

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne

dual channel : 2 paires de ram de capacité différente