Gros bug Internet explorer

19 juin 2008, 12:27

bonjour à tous, comme vous pourrez le voir sur le lien suivant :http://publicannonces.com/navettesdisco ... /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


<!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="[email protected] (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


<!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="[email protected] (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 : Tout sélectionner


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

19 juin 2008, 15:15

avec IE7, je vois pas trop ce qui coince.. hormis quelques décalages au niveau du css, classique. Faut juste corriger un peu le tir pour IE, sinon c'est tout.

19 juin 2008, 19:36

sous ie6, les divs sont tous superposés :S

20 juin 2008, 11:11

Jouer avec des floats, c'est jamais encourageant pour la compatibilité IE6..

21 juin 2008, 18:39

Bonjour
Heummmm....IE 6 et le png! Bug connut, hélas!
LA solution, c'est une css dédiée à notre ami, rien que pour lui!

Tu developpe la css UNIQUEMENT sur les quelques points litigieux! ...et non pas sur tout
dans celle ci tu appliques le filter windaube:

Code : Tout sélectionner

	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='ici le chemin/vers ton.png');

puis dans ton header tu appelles les 2 css de cette manière:

Code : Tout sélectionner

<link href="Ton chemin vers La css correcte.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="iTon chemin vers la css e.css" media="screen" />
<![endif]-->

et voili, voilou, voilà...essayes ça, et racontes nous...
Attention, sous FF, ton onglet "Nous contacter" déborde.
A pluche Tchô

22 juin 2008, 18:10

Après un rapide coup d'œil à la feuille de style, je remarque que certains blocs flottants ont des marges. Dans ce cas, IE 6 double ces dernières. Pour y remédier, il faut ajouter un display: inline.
Feuille de style principale

Code : Tout sélectionner

div {
  float: left;
  width: 100px;
  margin: 25px;
}

Feuille de style pour IE 6 (appelée au moyen d'un commentaire conditionnel)

Code : Tout sélectionner

div {
  display: inline;
}

À noter, pour le problème de la transparence PNG, que la propriété filter ne fait partie d'aucun standard CSS (c'est une propriété propriétaire) et invalide par conséquent la feuille de style si on la soumet au validateur CSS du W3C. Si l'on veut des feuilles de style valides, deux solutions sont envisageables selon le cas de figure :

les images PNG avec couche Alpha sont gérées en CSS (images d'arrière-plan) : dans la feuille de style visant IE 6, on remplace dans les propriétés background et background-image les images PNG par leurs équivalents en GIF (ou en JPEG) ;
les images PNG sont appelées dans le code HTML : on résout la transparence au moyen d'un JavaScript qui utilisera le filter et dont le code sera appelé au moyen d'un commentaire conditionnel.

Pour illustrer la première solution :
feuille de style principale

Code : Tout sélectionner

div {
  width: 100px;
  background-image: url(mon-image-transparente.png);
}

feuille de style pour IE 6

Code : Tout sélectionner

div {
  background-image: url(mon-image-transparente.gif);
}

23 juin 2008, 00:26

Aïeeeee....Victor Brito va peut être m'en vouloir mais je suis obligé de le contredire un peu...

À noter, pour le problème de la transparence PNG, que la propriété filter ne fait partie d'aucun standard CSS (c'est une propriété propriétaire) et invalide par conséquent la feuille de style si on la soumet au validateur CSS du W3C. Si l'on veut des feuilles de style valides, deux solutions sont envisageables selon le cas de figure :

Après vérification (parce qu'il y avait longtemps que je n'avais pas vérifié la validation de ma css), le validateur w3c valide bien la feuille de style initiale; il ne "voit" pas la feuille dédiée IE...Bon, celle ci reste bien sûr non conforme aux recommandations (victor à raison, c'est une propriété propriétaire), mais la feuille gérant le site est valide....comme les solutions proposées par Victor Brito.

23 juin 2008, 22:38

En fait, je voulais dire que, si on soumettait uniquement la feuille de style visant IE 6 et comportant filter, cette dernière serait invalidée (le validateur indiquant comme erreur : "la propriété filter n'existe pas").

Bien entendu, si tu indiques l'URL de ta page HTML au validateur CSS, ce dernier considérera toujours les commentaires conditionnels comme de simples commentaires HTML (à l'instar des navigateurs autres qu'IE 5 et plus pour Windows) et ignorera, par conséquent, l'appel de la feuille de style pour IE 6.

Gros bug Internet explorer

Qui est en ligne