28173 sujets

CSS et mise en forme, CSS3

Incompatibilté IE

Salut !
je suis en train de "coder le design de mon site" un design que je tester sur firefox avant de le tester sur IE en me doutant bien qu'il y aurais quelque petite erreur ,mais quand j'ai vu le truc j'etait completement catastropher ,le bug vient non seulement du positionement des bouton mais egalement de la taille des images (enfin d'une seule)
voici mon code xHTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
       <title>accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <script type="text/javascript">
<!--
   function ouvrir () {
   var ouvert='<img src="bouton/barre-menu.png" alt="" ><a href=""><img src="bouton/bouton-menu.png" alt="" onclick="fermer();"/></a><img src="bouton/menu.png" height="450px;"/>';
   ouvert+='<a href="blog.php"><img src="bouton/blog.png" alt="blog"/></a><br/>';
   ouvert+='<a href="forum.php"><img src="bouton/forum.png" alt="forum"/><br/></a>';
   ouvert+='<a href="news.php"><img src="bouton/news.png" alt="news"/><br/></a>';
   ouvert+='<a href="tchat.php"><img src="bouton/tchat.png" alt="tchat"/><br/></a>';
   document.getElementById("menu").innerHTML=ouvert;
   }
   function fermer () {
   var ferme='<img src="bouton/barre-menu.png" alt="" ><a href=""><img src="bouton/bouton-menu.png" alt="" onclick="ouvrir();"/></a>';
   document.getElementById("menu").innerHTML=ferme;
   }

//-->
   </script>
   <body>
   <div id="menu">
   <img src="bouton/barre-menu.png" alt="" ><a href="">
   <img src="bouton/bouton-menu.png" alt="" onclick="ouvrir();"/></a></div>
   </body>
</html>

et voici le CSS :

#menu
{
width:98%;
position:absolute;
}
img
{
border:none;
}
img[src="bouton/barre-menu.png"]
{
width:98%;
position:fixed;
height:50px;
z-index:10;
}
img[src="bouton/bouton-menu.png"]
{
margin-top:8px;
height:40px;
width:200px;
z-index:20;
position:fixed;
}
img[src="bouton/menu.png"]
{
margin-top:50px;
position:fixed;
}
img[src="bouton/blog.png"]
{
position:fixed;
margin-top:60px;
margin-left:75px;
z-index=20;
}
img[src="bouton/forum.png"]
{
position:fixed;
margin-top:150px;
margin-left:85px;
z-index=20;
}
img[src="bouton/news.png"]
{
position:fixed;
margin-top:240px;
margin-left:85px;
z-index=20;
}
img[src="bouton/tchat.png"]
{
position:fixed;
margin-top:330px;
margin-left:85px;
z-index=20;
}


Je ne sais pas si mon code est vraiment logique et/ou claire si il ne l'ai pas je vous donnerez quelque precision du pourquoi du comment .
Je veux juste que le design ressemble a peux de chose près sur IE et sur Fierefox tous en restant extensible
merci d'avance
Sujet clos
Aller à