[css] internet explorer bug

Question

gunnerkiller

8 Jul 2005 à 16:12

salut, mon css marche trés bien sur firefox mais ne marche pas du tout sur IE

voyez par vous meme : ici

comment faire ?

dominique

8 Jul 2005 à 16:29

Bonjour et bienvenue gunnerkiller Smiley smile

L'affichage n'est pas bon non plus sous firfox, la bordure gauche ne descend pas jusqu'en bas de la page.

Peux-tu donner ton code afin qu'il soit plus facile de détecter des erreurs ? stp Smiley cligne

(en utilisant la balise code)
Modifié par dominique (08 Jul 2005 - 17:28)

Pops83

8 Jul 2005 à 16:32

D'abord: 1) utilise la fonction rechercher du forum ce problème a déjà été traité.

2)Pour qu'on puisse te répondre, envoie nous ton code css et de la page principale. ça nous facilitera la vie!

3) Essaie avec !important dans ta css après les propriétés de position
par exemple

width:80% !important;
      width:82.1%;

IE prendra en compte la 2ème propriété et les autres navigateurs(FF,Netscape,opéra,...) eux utiliseront le premier avec !important

Et essaie de jongler avec cette astuce!

Pour l'instant c'est la seule que j'ai trouvé

herman31

8 Jul 2005 à 16:37

Slt,
Deja ton div comprenant les test est compris dans un <h4>. Pas très cohérent. Je pense pas qu'on puisse insérer un balise de type block dans un <Hx>

gunnerkiller

8 Jul 2005 à 17:16

bon voici mon css.

sinon pour le code sous firefox on fait Ctrl+u

body
{
   width: 800px;
   margin: auto;     
   background: #FFFFFF;
   font-size: 10px;
   font-family: Verdana;
   background-repeat: repeat-y;
   background-color:#ECE8DD;
}

img {
border: 0 none;
}

b
{
padding: 40px;
}

ul
{
list-style-type: none;
padding: 40px;
width: 150px;
}

li
{
list-style-type: none;
padding: 2px;

}

h4
{
width:508px;
padding: 2px;

}

span
{
width: 700px;
padding: 80px;
}

p
{
   color: #C6A655;
   font-size: 13px;
   font-family: Verdana;
}

a
{
   color: #C6A655;
   font-size: 12px;
   font-family: Verdana;
}


#p_header
{
   width: 800px;
   height: 8px;
   background-image: url("images/index_01.gif");
   background-repeat: no-repeat;
 }

#header
{
   width: 800px;
   height: 322px;
   background-image: url("images/index_02.gif");
 }
 

#menu
{
   width: 251px;
   height:auto;
   background-image: url("images/menu.gif");
   float: left;
   background-repeat: repeat-y;

}



#corp
{
 
   width: 549px;
   background-image: url("images/corps.gif");
   float: right;
   background-repeat: repeat-y;

}





#footer
{
   width: 800px;
   height: 17px;
   background-image: url("images/footer.gif");
   float: left;
   background-repeat: repeat-y;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Roxor-Tournois</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Roxor Tournois" href="content.css" />

<meta http-equiv="Content-Language" content="fr"/>
<meta name="keywords" content="cs, counter_strike, low, high, middle, good, serveur, server"/>
<meta name="description" content="site de tournois en tout genre,  www.roxor-tournois.com"/>
 
<meta name="Author" content="STEMPIN Julien : Gunnerkiller & ZAREBA Benoit : Benzrb "/> 
<meta name="identifier-url" content="http://www.roxor-tournois.com"/>
   </head>
<body>

	<div id="p_header"> </div>
	
	<div id="header"> </div>

	
	
	
	<div id="menu"> 
	
	<h3><b>NAVIGATION</b></h3>
       <ul>
          
		  <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="index.php">Accueil</a></li>
           
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="inscriptions.php">inscription tournois</a></li>
           
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="reglement.php">réglement</a></li>
           
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="forum.php">forum</a></li>
		   
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="inscrit.php">les inscrits</a></li>
		   
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="sponsor.php">nos sponsor</a></li>
		   
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="precedent.php">précedent tournois</a></li>
		   
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="staff.php">staff</a></li>
		   
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="merci.php">remerciement</a></li>
		  
		   <li onmouseover="this.style.background='#D5BF89'" onmouseout="this.style.background='#ECE8DD'"><a href="dl.php">telechargement</a></li>
	   
</ul>
	   
	<h3><b>SPONSOR</b></h3>
	   <ul>
			<li><a href="http://www.wayblog.com"><img src="http://www.wayblog.com/img/logo-.gif" width="150" height="80"></a>
			<li><a href="http://www.roxor.fr"><img src="http://roxor.fr/themes/default/logo.gif" width="150" height="40"></a>
	   </ul>
	   
	<h3><b>SITE OPTIMISE POUR :</b></h3>

       <ul> 
 	    <a href="http://getfirefox.com/"
title="Get Firefox - Web browsing redefined."><img
src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"
width="150" height="51" border="0" alt="Get Firefox"></a> 
       </ul> 
	</div>
	

	
	<div id="corp">
	
	
	<h3>Roxor news : </h3>
	
	<h4>

texte

</h4>
</div>

	

	

	   
   <div id="footer">
  

<span>roxor-tournois.com - Copyright &copy; 2005  Tous droits r&eacute;serv&eacute;s.&nbsp;design : benzrb & webmaster : gunnerkiller</span>
  
   
	  </div>
   

   
	  
</body>
</html>

ps: merci dominique
Modifié par gunnerkiller (08 Jul 2005 - 17:31)

Cedric

8 Jul 2005 à 17:27

J'édite, quelques remarques au sujet du code

 <h3><b>SPONSOR</b></h3>

Pourquoi mettre une balise b ? qui est une balise dépréciée et qui ne sert qu'à la mise en forme.

Dans ce cas, il suffirait de rajouter un font-weight en css à la balise h3.

Idem pour les autres h3.

 <h3><b>SITE OPTIMISE POUR :</b></h3>

Ici 2 remarque en plus :

pourquoi voiloir mettre cette piètre information en majuscule ?

Si on code correctement, un site n'est pas optimisé pour un navigateur... mais pour tous les navigateur : c'est à dire aucun "optimisation" justement, mais un code acceussible clair et logique (sémantique ,etc) ce qui garanti une bonne expérience de navigation quelque soit le périphérique avec lequel le visiteur navigue.

 <h4>

texte

</h4>

Du texte n'a justement rien à faire dans une balise h4 qui marque un titre de quatrième niveau.

Il faut utiliser un ou des paragraphes à la place.
Modifié par TriadPtale (08 Jul 2005 - 17:40)

gunnerkiller

8 Jul 2005 à 17:29

oui j ai lu les remarques, j etait justement en train de copier mon code de la page
Modifié par gunnerkiller (08 Jul 2005 - 17:30)

Cedric

8 Jul 2005 à 17:34

Excuse moi, encore une fois je n'y met pas la forme , je ne voulais pas être agressif Smiley cligne

edit: j'ai édité mon message ci-dessus Smiley smile

Modifié par TriadPtale (08 Jul 2005 - 17:40)

gunnerkiller

8 Jul 2005 à 17:51

hum oui, mais sur IE mon css ne marche pas donc sa le fait pas Smiley ohwell

sinon pour le texte oui tu as raison mais pour moi le plus gros probleme pour le moment c est le probleme avec IE et que sous firefox mon menu ne descent pas correctement Smiley fache

sinon pas de probleme pour t remarque que tu avais fais
Modifié par gunnerkiller (08 Jul 2005 - 17:52)

zzzazzz

8 Jul 2005 à 18:08

A mon avis c'est tout simple il te manque un conteneur général, un Div qui va engloger la totalité.
Si tu veux que ton effet gris à gauche et à droite fonctionne sur toute la hauteur de la page, met ceci :


body,html {
margin:0;
text-align: center;
background:url(UnSeulPNGquiContientLes2EffetsGris) #CouleurDeFond center repeat-y;
}

Evite le Width ds ton body et il y a du code inutile (un repeat-y et deux couleurs différentes)

Si ton effet de gris sur les bords s'arrête au site, cad pas plus bas que le texte, tu met ce code non pas dans body,html mais dans ton conteneur général (qui n'existe pas je le rappelle). Bonne chance Smiley cligne

Modifié par zzzazzz (08 Jul 2005 - 18:28)

Cedric

8 Jul 2005 à 18:21

a écrit :
oui tu as raison mais pour moi le plus gros probleme pour le moment c est le probleme avec IE

bon peut être que dans ce cas le fait de nettoyer ton code html ne va pas résoudre le problème, mais en règle générale , il vaut mieux travailler sur des bases solides en html avant de se lancer dans le code css Smiley smile

gunnerkiller

8 Jul 2005 à 19:28

quesque tu veux dire par conteneur general ?

Car la je ne comprend pas trop Smiley decu

Modifié par gunnerkiller (08 Jul 2005 - 19:28)

zzzazzz

8 Jul 2005 à 20:20

Euh bin un conteneur général serait dans ce cas un Div qui imbriquerait les autres.


<div id="conteneur">
   <div id="menu">

   </div>
   <div="etc">

   </div>
</div>

voila. #conteneur ayant une largeur fixe, le reste des divs sera a l'intérieur et à moins de spécifier des largeurs supérieures à ton conteneur, ca restera a l'intérieur. Mais je pense que tu trouveras ce genre d'infos dans la FAQ il me semble.
Modifié par zzzazzz (08 Jul 2005 - 20:20)

Laurent Denis

8 Jul 2005 à 20:38

Disons d'entrée de jeu que cette CSS est très mal partie, avec des choix à revoir :

- code HTML à corriger avant de reprendre la CSS : il se trouve que les erreurs HTML de cette fois-ci n'ont pas de conséquence sur ce qui se passe pour le design dans IE, mais rien ne te dit que ce ne sera pas le cas la prochaine fois : donc, ne pas prendre cette habitude de travailler sur une base HTML invalide.

- CSS avec un double float gauche-droite qui te complique la vie, et multiplie les prétextes à bug d'IE. Un simple float uniquement sur le contenu et un menu laissé en flux te donneront le même résultat beaucoup plus facilement.

- utilisation d'images de background qui occupent d'un bloc toute la largeur des éléments, pour leur donner à la fois la couleur de fond et une bordure : remplacer par une couleur de fond CSS (background-color: ... et réduire l'image à un petit morceau de la bordure seule, qui va se répéter sur toute la hauteur. L'avantage est que la largeur des blocs n'aura plus à être fixe (en px) et qu'on pourra l'adapter aiisément aux bugs d'IE. Des bordures CSS complèteront.
Modifié par Laurent Denis (08 Jul 2005 - 20:41)

gunnerkiller

11 Jul 2005 à 13:57

j ai tout tenter ce que vous dites mais sa na marche pas Smiley ohwell

Sujet clos