[CSS] différentes versions css pour navigateu

Ilnovo -
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

Afficher la suite

A voir également:

[CSS] différentes versions css pour navigateu
Télécharger zuma revenge version complète gratuit pour pc - Télécharger - Jeux vidéo
Css download - Télécharger - HTML
Background color css ✓ - Forum CSS
Enlever soulignement lien css ✓ - Forum CSS
Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux

4 réponses

Réponse 1 / 4

ZMEX Messages postés 51 Statut Membre 16

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

merci de ta réponse

Réponse 3 / 4

bob

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

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

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

Enlever le soulignement sous les liens en HTML/CSS

indice et exposant en css ?

Enlever trait sous un lien href

CSS/Comment enlever couleur liens ?

Votre réponse

Discussions similaires