Bug Internet explorer menu et div

**cuisto44000** · 19/06/2008, 12h22

bonjour à tous, comme vous pourrez le voir sur le lien suivant :http://publicannonces.com/navettesdi....com/index.php

L'affichage est tres bien sous Firefox, mais sous explorer, attention les dégats, pourriez vous m'aider svp?
Merci par avance !

html : index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<META NAME="Author" LANG="fr" CONTENT="Jonathan FORTUNE" /> 
<META NAME="Publisher" LANG="fr" CONTENT="Jonathan FORTUNE" /> 
<META NAME="Reply-to" CONTENT="jonathan.fortune@hotmail.fr (Jonathan FORTUNE)" />
<META NAME="Description" CONTENT="Louer un bus pour sortir en sécurité dans le 44 loire atlantique ." />
<META NAME="Keywords" CONTENT="bus 44, car 44, car loire atlantique, bus loire atlantique, sortir en sécurité, bus pous boite 44 loire atlantique, loire atlantique, 44, nantes, bus nantes, car nantes, boite de nuit nantes, discothèque nantes" /> 
<META NAME="Indentifier-URL" CONTENT="http://publicannonces.com/navettesdiscotheques44.com/" /> 
<META NAME="Copyright" CONTENT="navettesdiscotheques44.com et Jonathan FORTUNE" />
<META NAME="Robots" CONTENT="All" />
<META NAME="Revisit-after" CONTENT="1" /> 
 
<link href= "style.css" rel="stylesheet" type="text/css" />
<title>Navettesdiscothèques44 - Accueil</title>
</head>
<body>
 
<div class="header">
 
<h1>Navettes Discothèques 44</h1>
<p>Par ce que faire la fête rîme avec sécurité ... ...</p>
</div>
 
<div class="menu">
	<ul id="menu">
 
    <li><a href="index.php" class="on">Accueil</a></li>
    <li><a href="reservation.php">Réservation</a></li>
    <li><a href="#">Nous contacter</a></li>
	<li><a href="#">Partenaires</a></li>
	<li><a href="#">Association</a></li>
  </ul>
</div>
<div class="corps">
 
<div id="article" class="one">
<h3>La vie sexuelle des insectes ...</h3>
<p>&nbsp;&nbsp;La vie sexuelle des mouches en afghanistan est une préoccupation majeure en antarctique .<br />
&nbsp;&nbsp;Tous les chercheurs ont constaté que les moucherons réagissaient bizarrement très mal aux insecticides, les chercheurs du boost de nantes se penchent en ce moment sur le sujet ...<br />
&nbsp;&nbsp;</p>
</div>
 
<div id="article" class="two">
<h3>La vie sexuelle des insectes ...</h3>
<p>&nbsp;&nbsp;La vie sexuelle des mouches en afghanistan est une préoccupation majeure en antarctique .<br />
&nbsp;&nbsp;Tous les chercheurs ont constaté que les moucherons réagissaient bizarrement très mal aux insecticides, les chercheurs du boost de nantes se penchent en ce moment sur le sujet ...<br />
&nbsp;&nbsp;</p>
</div>
 
<div id="livre">
<?php
if (isset($_POST['enreg']))
	{
	$pre=$_POST['prenom'];
	$titre=$_POST['titre'];
	$message=$_POST['message'];
	if ($pre!="" && $titre!="" && $message!="")
	{
	mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
 
	mysql_query("INSERT INTO nav_livre VALUES('','$pre','$titre','$message')");
	echo '<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://publicannonces.com/navettesdiscotheques44.com">';
	}
	else
	{
	echo '<b style="color:#FF0000;"><u>Tous les champs doivent être remplis, merci !</u></b>';
	}
	}
?>
<h3>Livre d' or</h3>
<form method="post" action="">
<p><b>Votre prénom</b><br /><input type="text" name="prenom" /></p>
<p><b>Titre</b><br /><input type="text" name="titre" /></p>
<p><b>Message</b><br /><textarea name="message" cols="30" rows="6"></textarea></p>
<p><input type="submit" name="enreg" value="envoyer" /></p>
</form>
<div class="affiche_livre">
<h4>Vos messages</h4>
<div class="overflow">
<?php
mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
	$req=mysql_query("SELECT * FROM nav_livre ORDER BY id");
while ($l=mysql_fetch_array($req))
	{
	?>
	<p><b><?php echo $l['titre']; ?></b> par <?php echo $l['prenom']; ?> :<br />
	<?php echo $l['message']; ?></p>
	<?php
	}
 
?>
</div>
</div>
</div>
 
</div>
<div id="footer">
&copy; copyright 2008 - <a href="http://navettesdiscotheques44.com" title="Site de Navettes Discothèques 44">Navettes Discothèques 44</a><br />
Design et création par : Fortuné Jonathan - <a href="http://publicannonces.com" title="donner, échanger, reprendre gratuitement les objets dont vous ne vous servez plus ...">Publicannonces.com</a> - <a href="http://boost-cholet.com" title="Le bOOst de chOlet">Le bOOst de cholet</a>
</div>
</body>
</html>

html : reservation.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<META NAME="Author" LANG="fr" CONTENT="Jonathan FORTUNE"> 
<META NAME="Publisher" LANG="fr" CONTENT="Jonathan FORTUNE"> 
<META NAME="Reply-to" CONTENT="jonathan.fortune@hotmail.fr (Jonathan FORTUNE)">
<META NAME="Description" CONTENT="Louer un bus pour sortir en sécurité dans le 44 loire atlantique .">
<META NAME="Keywords" CONTENT="bus 44, car 44, car loire atlantique, bus loire atlantique, sortir en sécurité, bus pous boite 44 loire atlantique, loire atlantique, 44, nantes, bus nantes, car nantes, boite de nuit nantes, discothèque nantes"> 
<META NAME="Indentifier-URL" CONTENT="http://publicannonces.com/navettesdiscotheques44.com/reservation.php"> 
<META NAME="Copyright" CONTENT="navettesdiscotheques44.com et Jonathan FORTUNE">
<META NAME="Robots" CONTENT="All">
<META NAME="Revisit-after" CONTENT="1"> 
 
<link href= "style.css" rel="stylesheet" type="text/css" />
<title>Navettesdiscothèques44 - Accueil</title>
</head>
<body>
 
<div class="header">
 
<h1>Navettes Discothèques 44</h1>
<p>Par ce que faire la fête rîme avec sécurité ... ...</p>
</div>
 
<div class="menu">
	<ul id="menu">
 
    <li><a href="index.php">Accueil</a></li>
    <li><a href="reservation.php" class="on">Réservation</a></li>
    <li><a href="#">Nous contacter</a></li>
	<li><a href="#">Partenaires</a></li>
	<li><a href="#">Association</a></li>
  </ul>
</div>
<div class="corps">
 
<div id="resa" align="center">
<?php
if (isset($_POST['enreg']))
	{
	$pre=$_POST['prenom'];
	$titre=$_POST['titre'];
	$message=$_POST['message'];
	if ($pre!="" && $titre!="" && $message!="")
	{
	mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
 
	mysql_query("INSERT INTO nav_livre VALUES('','$pre','$titre','$message')");
	echo '<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://publicannonces.com/navettesdiscotheques44.com">';
	}
	else
	{
	echo '<b style="color:#FF0000;"><u>Tous les champs doivent être remplis, merci !</u></b>';
	}
	}
?>
<h3>Réserver un bus ...</h3>
<form method="post" action="">
<table>
	<tr><th>Nom *</th><td><input type="text" name="nom" /> *</td>
<tr><th>Prénom *</th><td><input type="text" name="prenom" /> *</td>
<tr><th>Teléphone fixe</th><td><input type="text" name="fixe" /></td>
<tr><th>Teléphone portable</th><td><input type="text" name="port" /></td>
<tr><th>Adresse mail</th><td><input type="text" name="mail" /> *</td>
<tr><th>Adresse *</th><td><input type="text" name="adr" /> *</td>
<tr><th>Ville *</th><td><input type="text" name="ville" /> *</td>
<tr><th>Code postal *</th><td><input type="text" name="cp" /> *</td>
<tr><th>Déstination *</th><td><input type="text" name="desti" /> *</td>
<tr><th>Nombre de passagers *</th><td><select name="nbr"><?php for ($i=1;$i<61;$i++){ echo '<option value="'.$i.'">'.$i.'</option>'; } ?></select> *</td>
<tr><th>Date de la reservation</th><td><input type="text" name="date_demande" value="<?php echo date("d/m/Y"); ?>" readonly /> non modifiable .</td>
<tr><th>Date de votre soirée *</th><td><input type="text" name="date_soiree" value="Jour/Mois/2008"/> modifiable .</td>
<tr><th>Infos complémantaires </th><td><textarea name="compl" cols="15" rows="6"></textarea></td>
<tr><th><u>* :</u></th><td><u>Champs obligatoires !</u></td>
<tr><th></th><td><input type="reset" value="remettre à zéro" /> | <input type="submit" name="enreg" value="envoyer" /><td></tr>
</table>
</form>
 
</div>
</div>
 
</div>
<div id="footer">
&copy; copyright 2008 - <a href="http://navettesdiscotheques44.com" title="Site de Navettes Discothèques 44">Navettes Discothèques 44</a><br />
Design et création par : Fortuné Jonathan - <a href="http://publicannonces.com" title="donner, échanger, reprendre gratuitement les objets dont vous ne vous servez plus ...">Publicannonces.com</a> - <a href="http://boost-cholet.com" title="Le bOOst de chOlet">Le bOOst de cholet</a>
</div>
</body>
</html>

et CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
body
{background-color:#333333;}
 
.header
{width:900px;height:200px; position:absolute; left:200px; top:10px;background-image:url("images/header.png");z-index:20;}
 
.header h1
{color:#FFFF33;text-align:center;margin-top:80px;font-family:verdana;}
 
.header p
{color:#fff;text-align:center;font-size:20px;font-weight:bold;}
 
ul#menu {
list-style-type: none;
width: 100%; /* précision pour Opera */
}
.menu
{position:absolute;left:210px;top:190px;z-index:10;background-image:url("images/menu.png");width:880px;height:100px;background-repeat:no-repeat;}
 
ul#menu li {
float: left;
 
}
ul#menu a {
float: left;
margin-right:2px;
padding-top:5px;;
text-align: center;
border:0;
text-decoration: none;
width:120px;
height:25px;
color:#0033FF;
font-weight:bold;
background: #fff;
background-image:url("images/off.png");
}
ul#menu a.on
{background-image:url("images/on.png");color:#FFFF00;}
 
ul#menu a:hover
{background-image:url("images/hover.png");color:#fff;}
 
ul#menu a.on:hover
{background-image:url("images/on.png");color:#FFFF00;}
 
.corps
{width:900px;height:700px;background-image:url("images/corps.png");position:absolute;left:200px;top:180px;}
 
#article
{width:380px;}
 
#article.one
{position:relative;top:100px;left:20px;}
 
#article.two
{position:absolute;top:100px;left:440px;}
 
#article h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
#article p
{font-size:16px;color:#255087;font-weight:bold;}
 
#livre
{width:800px;position:relative;top:100px;left:20px;}
 
#livre b
{font-size:16px;color:#255087;font-weight:bold;}
 
#livre h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
.affiche_livre
{position:absolute;top:30px;left:440px;}
 
.overflow
{overflow:auto;width:350px;height:200px;border:4px dotted #000;color:#000;}
 
#resa
{position:relative;top:100px;left:20px;width:800px;}
 
#resa h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
th
{padding-bottom:5px;text-align:right;}
 
#footer
{background-image:url("images/footer.png");position:absolute;left:200px;top:880px;width:900px;height:50px;z-index:30;text-align:center;font-weight:bold;}

C'est un peu lourd certes, mais je n'ai jamais travaillé sur les bug entre ff et ie, donc merci de votre aide milles fois par avance

je vais me renseigner avec mon amis google de mon coté pendant ce temps la avant que vous ne me le suggeriez

**romain_ci** · 19/06/2008, 12h29

dans le css du ul
rajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 margin-top:20px;

**cuisto44000** · 19/06/2008, 12h57

effectivement, sa résoud le problème du menu

merci, déja un point de rêglé, merci beaucoup

Maintenants, reste le problème des encadrés blazncs autour de mes images du header

et du div #article.two

**cuisto44000** · 19/06/2008, 13h04

ps, je viens d'essayer de modifier les proprietes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 
#article.two
{position:relative;top:-103px;right:-450px;}
 
et
 
#livre
{width:800px;position:relative;top:-100px;left:20px;}

Sur FF sa donne le même résultat qu'avant, mais sous IE c'est encore plus le bordel

**romain_ci** · 19/06/2008, 14h07

Envoyé par cuisto44000

effectivement, sa résoud le problème du menu

merci, déja un point de rêglé, merci beaucoup

Maintenants, reste le problème des encadrés blazncs autour de mes images du header

et du div #article.two

je ne voi rien de tel !!

Soit peut etre plus précis

**cuisto44000** · 19/06/2008, 14h13

je parles sous ie, les images du header sont encadrés de blanc, et les div se superposent, mais sous FF, tout est très bien disposé . désolé pour mon manque de précision .

**tzilliox** · 19/06/2008, 14h21

Bonjour cuisto 44000,

Tu peux nous préciser ta version internet Explorer ?
Si tu as encore la version 6.0, elle a du mal à afficher la transparence des PNG.

Bonne chance,
Thoams ;-)

**romain_ci** · 19/06/2008, 14h31

oui oui ! je pence aussi que tu doit avoir la Version 6 de IE...
Mais il y a une solution pour les png

!

http://homepage.ntlworld.com/bobosola/pnghowto.htm

sinon encore plus simple, met du GIF... ca gere la transparence aussi !

**Candygirl** · 19/06/2008, 14h34

Bonjour,

tu devrais éviter d'utiliser le positionnement absolu lorsqu'il n'est pas nécessaire. D'ailleurs, avec ton montage, ton site voit déjà appraître la scrollbarre en 1024x768; pas très judicieux.

Tu devrait ajouter un div qui englobe tout le site et qui s'occupe du centrage:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
  <div id="page">
    [...]
  </div>
</body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#page {
  width:900px;
  margin:0 auto;
}

Ensuite tu vires tes positionnments absolus, tes déclarations de width inutiles:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header {
  height:200px; 
  background-image:url("images/header.png");
}
 
.menu {
  background-image:url("images/menu.png");
  background-repeat:no-repeat;
  margin:0 10px;
  height:100px;
}
 
.corps {
background-image:url("images/corps.png");
}

etc...

Pour tes "encadrements blancs", je suppose que tu regardes sur IE6 ? Tes images font appel à la transparence progressive non gérée nativement sur IE6. En as-tu vraiment besoin? Si non, tu peux réexporter tes images avec de la transparence simple ou alors les garder ainsi et appliquer un correctif à l'aide du filtre approprié (soit manuellement soit par un script de correctif).

**Er3van** · 19/06/2008, 14h35

Pour palier à ce "manque" sur IE6, Microsoft à développé un filtre très pratique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filter:Chroma(color=#FFFFFF) ;

Ca te permet de filtrer le blanc, et donc de devenir transparent.

Tu peux l'inclure via des commentaires conditionnels pour rester propre dans ton code, mais seuls les IE reconnaissent cette propriété, propriété MS évidement..., donc ça ne gêne pas de la laisser dans le CSS normal.

**cuisto44000** · 19/06/2008, 14h57

Envoyé par Er3van

Pour palier à ce "manque" sur IE6, Microsoft à développé un filtre très pratique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filter:Chroma(color=#FFFFFF) ;

Ca te permet de filtrer le blanc, et donc de devenir transparent.

Tu peux l'inclure via des commentaires conditionnels pour rester propre dans ton code, mais seuls les IE reconnaissent cette propriété, propriété MS évidement..., donc ça ne gêne pas de la laisser dans le CSS normal.

Sa ne marche pas ...

J'utilise effectivement la version 6.0

et http://homepage.ntlworld.com/bobosola/index.htm sa ne marche pas non plus

Je vais effectivement essayer la method de créer un div qui englobe le site, on verra bien

**tzilliox** · 19/06/2008, 15h04

Tu devrais vraiment regarder ce lien : http://homepage.ntlworld.com/bobosola/pnghowto.htm

Apparemment c'est la solution. Sinon installe IE7, il commence à être temps de changer...

Tiens-nous au courant,
Thoams ;-)

**Er3van** · 19/06/2008, 15h04

Envoyé par cuisto44000

Sa ne marche pas ...

J'utilise effectivement la version 6.0

Etrange, ça fonctionne niquel chez moi...
Version 6.0 également.

Tu l'appliques à quel niveau ?

**romain_ci** · 19/06/2008, 15h08

Pourquoi faire du png quand on peut faire du gif

**Er3van** · 19/06/2008, 15h17

PNG est bcp plus beau que GIF d'un point de vue rendu, et puis, pourquoi utiliser FF2 quand on peut utiliser FF3 ? C'est le même principe, PNG est l'héritier de GIF

**romain_ci** · 19/06/2008, 15h34

ouai mai la le Gif est gerer partout ! alors que le PNG IE6 et moin ne gere pas sa transparence !

A moin d'une bidouille !

Et pourquoi utiliser FF2 ? au lieu du 3...
Tous simplement qu'il y a beaucoups plus d'utilisateur sous FF2 encore !!

**Er3van** · 19/06/2008, 15h49

Avec ce principe là on ne devrait pas utiliser de min/min-height/width, position : fixed, de sélecteurs, :focus, :before et :after, :hover et toutes les pseudos classes sur autre chose qu'un lien et tous les outline...

Et le fait qu'il y ait bcp d'utilisateur de FF2 justifie que tu restes sous FF2 ? Pourquoi ? Effet mouton ?
Que tu développes pour FF2 et pas 3, ok, mais on parle pas de ça.
FF3 c'est FF2 en mieux, donc quel intérêt de rester à la version antérieure ?

**romain_ci** · 19/06/2008, 16h22

L'interet !? A ton avis
Pour bien voir que le site que je developpe est compatible FF2 car je pence pas que MultipleFF existe

!

Mais si tu passe sous FF3 sans te preocuper des utilisateurs qui ne l'ont pas et qui vont venir visiter ton site (probalement pas compatible FF2 ) et bien c'est que tu es un mauvais developpeur !

Bref c'etait pas le sujet de la discution a la base !

**Er3van** · 19/06/2008, 16h46

Envoyé par romain_ci

L'interet !? A ton avis
Pour bien voir que le site que je developpe est compatible FF2 car je pence pas que MultipleFF existe

!

Personnellement j'ai plusieurs Firefox sur mon poste client...(FF Portable - qui est comme le 2 - et FF3)

Envoyé par romain_ci

Mais si tu passe sous FF3 sans te preocuper des utilisateurs

Bon, on s'égare, je ne parlais pas côté développeur, mais côté client.
"Pourquoi un internaute garderait FF2 alors qu'il peut avoir FF3 ?", c'était ça l'idée de départ. Désolé de m'être mal exprimé.

Envoyé par romain_ci

qui ne l'ont pas et qui vont venir visiter ton site (probalement pas compatible FF2 )

Compatible FF3 est quasiment pareil que compatible FF2, car pour ta gouverne, car hormis avoir rajouter certaines propriété CSS3 et augmenter son taux au test ACID, l'essentiel de l'upgrade 2 vers 3 se situe au niveau performances, et spécialement de la mémoire, où FF2 était calamiteux.

Un lien à la va-vite : http://standblog.org/blog/post/2008/...isir-Firefox-3

Envoyé par romain_ci

et bien c'est que tu es un mauvais developpeur !

Et ne t'inquiète pas pour moi, je développe pour FF2 et IE6/7, Opéra et Safari si c'est dans les spéc, et FF3 + IE8 en patch si besoin est. Mais pour le moment je n'ai pas eu à patcher grand chose, FF3 étant moins buggé que FF2 et IE8 moins que le 7, pas de raison de patcher bcp.

Envoyé par romain_ci

Bref c'etait pas le sujet de la discution a la base !

Peut importe, ça permet d'aborder d'autres points et confronter des points de vue, le but d'un forum en somme.

**cuisto44000** · 19/06/2008, 16h56

Envoyé par Thoams

Tu devrais vraiment regarder ce lien : http://homepage.ntlworld.com/bobosola/pnghowto.htm

Apparemment c'est la solution. Sinon installe IE7, il commence à être temps de changer...

Tiens-nous au courant,
Thoams ;-)

J'avais déja regardé toutes les pages !
J'ai testé, sans succès ...

Bug Internet explorer menu et div

CSS

Discussions similaires

Partager

Partager