Affichage de la largeur d'une liste déroulante dans un form

sirmalo · Message par **sirmalo** » 03 nov. 2006, 22:40

Bonsoir,

J'aimerais savoir comment faire pour qu'une liste déroulante d'un formulaire dans Firefox soit affichée comme pour les navigateurs Internet Explorer et Opera? Je n'arrive vraiment pas à avoir le même affichage; ça bogue énormément dans Firefox.

La page web du formulaire est un iframe affichant un fichier PHP; dans ce fichier, il y a de la programmation PHP; puis le tableau HTML entrecoupé de code PHP et CSS:
http://www.soustesailes.com/contacttotal2.htm

C'est un programmeur qui m'a aidé car je n'y arrivais vraiment pas. Vous remarquerez qu'il y a du et du CSS; c'est le programmeur qui a mis les et je ne me suis pas encore attardé à tous les remplacer par du CSS seulement. D'ailleurs, je ne sais pas si c'est pertinent de le faire; c'est peut être pour cela que Firefox a de la difficulté à bien rendre les listes déroulantes. Je ne sais pas.

Merci à l'avance pour vos éclaircissements.

----------------------
Le code du formulaire
----------------------

Code : Tout sélectionner

<html>
<head>
<title>Sous Tes Ailes - Contact - Nous &eacute;crire</title>
<meta name="Description" content="Formulaire de contact pour nous &eacute;crire">
<meta name="KeyWords" content="sous tes ailes formulaire de contact &eacute;crire courriel email rejoindre">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Copyright" content="Copyright 2006 Sous Tes Ailes http://www.soustesailes.com/">
<meta http-equiv="Content-Language" content="fr">
<link rel=StyleSheet href="/coolstyle.css" type="text/css">
<script language="javascript" type="text/javascript" src="/javascripts.js"></script>
<script language="javascript" type="text/javascript" src="/pop-closeup.js"></script>
</head>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" class="background-window">

<div align=left; valign=top; background:white; filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65;">
<form name="mail_form" method="post" action="<?=$_SERVER['PHP_SELF']?>">
    <table width="14%" border="0" name="formcontact" align="left">
      <tr> 
        <td colspan="2" align="center" class="smalltitle"> 
          <?php
if ((isset($_POST['envoi'])) AND ($email_invalide =='1') AND ($zone_email_flag != '0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><strong><font color=\"#CA0B01\" size=\"1\">Votre courriel<br>est invalide</font></strong></font>");
}
?>
          <br>
        <td width="20%" align="left">&nbsp;</td>
      </tr>
      <p align="center"> </p>
      <tr> 
        <td width="19%" align="right" class="smalltext_contact">Prénom</td>
        <td width="61%" align="left"> 
          <input name="champ1" type="text" class="shadeform_contact" value="<?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['champ1'])))  {
echo($_SESSION['champ1']);
}
?>">
        </td>
        <td width="20%" align="left" valign="baseline"> 
          <?php
if ((isset($_POST['envoi'])) AND ($champ1_flag =='0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
?>
        </td>
      </tr>
      <tr> 
        <td width="19%" align="right" class="smalltext_contact">Nom</td>
        <td width="61%" align="left"> 
          <input name="champ2" type="text" class="shadeform_contact" value="<?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['champ2'])))  {
echo($_SESSION['champ2']);
}
?>">
        </td>
        <td width="20%" align="left" valign="baseline"> 
          <?php
if ((isset($_POST['envoi'])) AND ($champ2_flag =='0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
?>
        </td>
      </tr>
      <tr> 
        <td align="right" width="19%" class="smalltext_contact">Courriel</td>
        <td align="left" width="61%"> 
          <input name="zone_email" type="text" class="shadeform_contact" value="<?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['zone_email'])))  {
echo($_SESSION['zone_email']);
}
?>">
        </td>
        <td align="left" width="20%" valign="baseline"> 
          <?php
if (isset($_POST['envoi'])) {
if (($email_invalide=="1") OR ($zone_email_flag =='0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
}
?>
        </td>
      </tr>
      <tr> 
        <td align="right" width="19%" class="smalltext_contact">Pays</td>
        <td align="left" width="61%"> 
        <select name="champ3" class="shadeform_pays_sujet">
		<?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['champ3'])))  {
echo("<option value=\"".$_SESSION['champ3']."\">" . $_SESSION['champ3'] ."</option>");
}
?>
                    <option value="">votre Choix?</option>
                    <option value="Afghanistan">Afghanistan</option>
                    <option value="Afrique du Sud">Afrique du Sud</option>
                    <option value="Albanie">Albanie</option>
                    <option value="Algerie">Alg&eacute;rie</option>
                    <option value="Allemagne">Allemagne</option>
                    <option value="Andorre">Andorre</option>
                    <option value="Angola">Angola</option>
                    <option value="Anguilla">Anguilla</option>
                    <option value="Antigua">Antigua</option>
                    <option value="Antilles neerlandaises">Antilles n&eacute;erlandaises</option>
                    <option value="Arabie Saoudite">Arabie Saoudite</option>
                    <option value="Argentine">Argentine</option>
                    <option value="Armenie">Arm&eacute;nie</option>
                    <option value="Aruba">Aruba</option>
                    <option value="Australie">Australie</option>
                    <option value="Autriche">Autriche</option>
                    <option value="Azerbaidjan">Azerba&iuml;djan</option>
                    <option value="Bahamas">Bahamas</option>
                    <option value="Bahrein">Bahrein</option>
                    <option value="Bangladesh">Bangladesh</option>
                    <option value="Barbade">Barbade</option>
                    <option value="Belgique">Belgique</option>
                    <option value="Belize">Belize</option>
                    <option value="Benin">B&eacute;nin</option>
                    <option value="Bermudes">Bermudes</option>
                    <option value="Bhoutan">Bhoutan</option>
                    <option value="Bielorussie">Bi&eacute;lorussie</option>
                    <option value="Birmanie">Birmanie</option>
                    <option value="Bolivie">Bolivie</option>
                    <option value="Botswana">Botswana</option>
                    <option value="Bresil">Br&eacute;sil</option>
                    <option value="Brunei Darussalam">Brunei Darussalam</option>
                    <option value="Bulgarie">Bulgarie</option>
                    <option value="Burkina Faso">Burkina Faso</option>
                    <option value="Burundi">Burundi</option>
                    <option value="Cambodge">Cambodge</option>
                    <option value="Cameroun">Cameroun</option>
                    <option value="Canada">Canada</option>
                    <option value="Cap Vert">Cap Vert</option>
                    <option value="Cayman">Cayman</option>
                    <option value="Centre-Afriqe">Centre-Afrique</option>
                    <option value="Chili">Chili</option>
                    <option value="Chine">Chine</option>
                    <option value="Chypre">Chypre</option>
                    <option value="Colombie">Colombie</option>
                    <option value="Comores">Comores</option>
                    <option value="Congo">Congo</option>
                    <option value="Coree du Nord">Cor&eacute;e du Nord</option>
                    <option value="Coree du Sud">Cor&eacute;e du Sud</option>
                    <option value="Costa Rica">Costa Rica</option>
                    <option value="Cote d'Ivoire">C&ocirc;te d'Ivoire</option>
                    <option value="Croatie">Croatie</option>
                    <option value="Cuba">Cuba</option>
                    <option value="Danemark">Danemark</option>
                    <option value="Djibouti">Djibouti</option>
                    <option value="Dominique">Dominique</option>
                    <option value="Egypte">&Eacute;gypte</option>
                    <option value="El Salvador">El Salvador</option>
                    <option value="Emirats Arabes unis">&Eacute;mirats Arabes unis</option>
                    <option value="Equateur">&Eacute;quateur</option>
                    <option value="Erythree">Erythr&eacute;e</option>
                    <option value="Espagne">Espagne</option>
                    <option value="Estonie">Estonie</option>
                    <option value="Etats-Unis">&Eacute;tats-Unis</option>
                    <option value="Ethiopie">&Eacute;thiopie</option>
                    <option value="ex-Union Sovietique">ex-Union Sovi&eacute;tique</option>
                    <option value="ex-Yougoslavie">ex-Yougoslavie</option>
                    <option value="Falkland">Falkland</option>
                    <option value="Feroe">F&eacute;ro&eacute;</option>
                    <option value="Fidji">Fidji</option>
                    <option value="Finlande">Finlande</option>
                    <option value="France">France</option>
                    <option value="Gabon">Gabon</option>
                    <option value="Gambie">Gambie</option>
                    <option value="Georgie">G&eacute;orgie</option>
                    <option value="Ghana">Ghana</option>
                    <option value="Gibraltar">Gibraltar</option>
                    <option value="Grande-Bretagne">Grande-Bretagne</option>
                    <option value="Grece">Gr&egrave;ce</option>
                    <option value="Grenade">Grenade</option>
                    <option value="Saint Vincent et Grenadines">Grenadines</option>
                    <option value="Groenland">Groenland</option>
                    <option value="Guadeloupe">Guadeloupe</option>
                    <option value="Guam">Guam</option>
                    <option value="Guatemala">Guatemala</option>
                    <option value="Guinee">Guin&eacute;e</option>
                    <option value="Guinee Bissau">Guin&eacute;e Bissau</option>
                    <option value="Guyane">Guyane</option>
                    <option value="Guyane francaise">Guyane fran&ccedil;aise</option>
                    <option value="Haiti">Ha&iuml;ti</option>
                    <option value="Honduras">Honduras</option>
                    <option value="Hong Kong">Hong Kong</option>
                    <option value="Hongrie">Hongrie</option>
                    <option value="Ile Christmas">&Icirc;le Christmas</option>
                    <option value="Iles Maurice">&Icirc;le Maurice</option>
                    <option value="Iles Bouvet">&Icirc;les Bouvet</option>
                    <option value="Iles Cocos">&Icirc;les Cocos</option>
                    <option value="Iles Cook">&Icirc;les Cook</option>
                    <option value="Iles Heard et Mac Donald">&Icirc;les Heard et MacDonald</option>
                    <option value="Iles Svalbaard et Jan Mayen">&Icirc;les Jan Mayen</option>
                    <option value="Iles Salomon">&Icirc;les Salomon</option>
                    <option value="Iles Svalbaard et Jan Mayen">&Icirc;les Svalbaard</option>
                    <option value="Iles Turques et Caiques">&Icirc;les Turques et Ca&iuml;ques</option>
                    <option value="Iles Vierges britanniques">&Icirc;les Vierges britanniques</option>
                    <option value="Iles Vierges des Etats-Unis">&Icirc;les Vierges des &Eacute;.-Unis</option>
                    <option value="Inde">Inde</option>
                    <option value="Indonesie">Indon&eacute;sie</option>
                    <option value="Irak">Irak</option>
                    <option value="Iran">Iran</option>
                    <option value="Irlande">Irlande</option>
                    <option value="Islande">Islande</option>
                    <option value="Israel">Isra&euml;l</option>
                    <option value="Italie">Italie</option>
                    <option value="Jamaique">Jama&iuml;que</option>
                    <option value="Japon">Japon</option>
                    <option value="Jordanie">Jordanie</option>
                    <option value="Kzakhstan">Kzakhstan</option>
                    <option value="Kenya">Kenya</option>
                    <option value="Kirghizistan">Kirghizistan</option>
                    <option value="Kiribati">Kiribati</option>
                    <option value="Koweit">Kowe&iuml;t</option>
                    <option value="Laos">Laos</option>
                    <option value="Lesotho">Lesotho</option>
                    <option value="Lettonie">Lettonie</option>
                    <option value="Liban">Liban</option>
                    <option value="Liberia">Lib&eacute;ria</option>
                    <option value="Libye">Libye</option>
                    <option value="Liechtenstein">Liechtenstein</option>
                    <option value="Lituanie">Lituanie</option>
                    <option value="Luxembourg">Luxembourg</option>
                    <option value="Macao">Macao</option>
                    <option value="Madagascar">Madagascar</option>
                    <option value="Malaisie">Malaisie</option>
                    <option value="Malawi">Malawi</option>
                    <option value="Maldives">Maldives</option>
                    <option value="Malte">Malte</option>
                    <option value="Maroc">Maroc</option>
                    <option value="Martinique">Martinique</option>
                    <option value="Mauritanie">Mauritanie</option>
                    <option value="Mayotte">Mayotte</option>
                    <option value="Mexique">Mexique</option>
                    <option value="Micronesie">Micron&eacute;sie</option>
                    <option value="Moldavie">Moldavie</option>
                    <option value="Monaco">Monaco</option>
                    <option value="Mongolie">Mongolie</option>
                    <option value="Montserrat">Montserrat</option>
                    <option value="Mozambique">Mozambique</option>
                    <option value="Namibie">Namibie</option>
                    <option value="Nauru">Nauru</option>
                    <option value="Nepal">N&eacute;pal</option>
                    <option value="Nicaragua">Nicaragua</option>
                    <option value="Niger">Niger</option>
                    <option value="Nigeria">Nig&eacute;ria</option>
                    <option value="Niue">Niue</option>
                    <option value="Norfolk">Norfolk</option>
                    <option value="Norvege">Norv&egrave;ge</option>
                    <option value="Nouvelle Caledonie">Nouvelle Cal&eacute;donie</option>
                    <option value="Nouvelle Zelande">Nouvelle Z&eacute;lande</option>
                    <option value="Oman">Oman</option>
                    <option value="Ouzbekistan">Ouzb&eacute;kistan</option>
                    <option value="Pakistan">Pakistan</option>
                    <option value="Palau">Palau</option>
                    <option value="Panama">Panama</option>
                    <option value="Papouasie Nouvelle Guinee">Papouasie N. Guin&eacute;e</option>
                    <option value="Paraguay">Paraguay</option>
                    <option value="Pays-Bas">Pays-Bas</option>
                    <option value="Perou">P&eacute;rou</option>
                    <option value="Philippines">Philippines</option>
                    <option value="Pitcairn">Pitcairn</option>
                    <option value="Plogne">Plogne</option>
                    <option value="Polynesie francaise">Polyn&eacute;sie fran&ccedil;aise</option>
                    <option value="Porto-Rico">Porto-Rico</option>
                    <option value="Portugal">Portugal</option>
                    <option value="Qatar">Qatar</option>
                    <option value="Republique de Macedoine">R&eacute;p. de Mac&eacute;doine</option>
                    <option value="Republique Dominicaine">R&eacute;publique Dominicaine</option>
                    <option value="Republique Slovaque">R&eacute;publique Slovaque</option>
                    <option value="Reunion">R&eacute;union</option>
                    <option value="Roumanie">Roumanie</option>
                    <option value="Russie">Russie</option>
                    <option value="Rwanda">Rwanda</option>
                    <option value="Sahara occidental">Sahara occidental</option>
                    <option value="Saint Kitts et Nevis">Saint Kitts et Nevis</option>
                    <option value="Saint Pierre et Miquelon">Saint Pierre et Miquelon</option>
                    <option value="Saint Tome et Principe">Saint Tom&eacute; et Principe</option>
                    <option value="Saint Vincent et Grenadines">Saint Vincent</option>
                    <option value="Sainte Helene">Sainte H&eacute;l&egrave;ne</option>
                    <option value="Sainte Lucie">Sainte Lucie</option>
                    <option value="Samoa americain">Samoa am&eacute;ricain</option>
                    <option value="Samoa occidental">Samoa occidental</option>
                    <option value="San Marin">San Marin</option>
                    <option value="Senegal">S&eacute;n&eacute;gal</option>
                    <option value="Seychelles">Seychelles</option>
                    <option value="Sierra Leone">Sierra Leone</option>
                    <option value="Singapour">Singapour</option>
                    <option value="Slovenie">Slov&eacute;nie</option>
                    <option value="Somalie">Somalie</option>
                    <option value="Soudan">Soudan</option>
                    <option value="Sri Lanka">Sri Lanka</option>
                    <option value="Suede">Su&egrave;de</option>
                    <option value="Suisse">Suisse</option>
                    <option value="Surinam">Surinam</option>
                    <option value="Swaziland">Swaziland</option>
                    <option value="Syrie">Syrie</option>
                    <option value="Tadjikistan">Tadjikistan</option>
                    <option value="Taiwan">Ta&iuml;wan</option>
                    <option value="Tanzanie">Tanzanie</option>
                    <option value="Tchad">Tchad</option>
                    <option value="Tchequie">Tch&egrave;quie</option>
                    <option value="Territoire austral francais">Territoire austral fr.</option>
                    <option value="Territoires britanniques de l'Ocean Indien">Terr. britanniques O.I.</option>
                    <option value="Thailande">Tha&iuml;lande</option>
                    <option value="Timor oriental">Timor oriental</option>
                    <option value="Togo">Togo</option>
                    <option value="Tokelau">Tolelau</option>
                    <option value="Tonga">Tonga</option>
                    <option value="Trinite et Tobago">Trinit&eacute; et Tobago</option>
                    <option value="Tunisie">Tunisie</option>
                    <option value="Turkmenistan">Turkm&eacute;nistan</option>
                    <option value="Turquie">Turquie</option>
                    <option value="Tuvalu">Tuvalu</option>
                    <option value="Ukraine">Ukra&iuml;ne</option>
                    <option value="Uruguay">Uruguay</option>
                    <option value="Vanuatu">Vanuatu</option>
                    <option value="Vatican">Vatican</option>
                    <option value="Venezuela">V&eacute;n&eacute;zuela</option>
                    <option value="Vietnam">Vietnam</option>
                    <option value="Wallis et Futuna">Wallis et Futuna</option>
                    <option value="Yemen">Yemen</option>
                    <option value="Zaire">Za&iuml;re</option>
                    <option value="Zambie">Zambie</option>
                    <option value="Zimbabwe">Zimbabwe</option>
		            <option value="--- Autre ---">--- Autre ------------------------</option>
          </select>
        </td>
        <td width="20%" align="left" valign="baseline"> 
          <?php
if ((isset($_POST['envoi'])) AND ($champ3_flag == '0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
?>
        </td>
      </tr>
      <tr> 
        <td width="19%" align="right" class="smalltext_contact">Sujet</td>
        <td width="61%" align="left"> 

        <select name="champ4" class="shadeform_pays_sujet">
		<?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['champ4'])))  {
echo("<option value=\"".$_SESSION['champ4']."\">" . $_SESSION['champ4'] ."</option>");
}
?>
            <option value="">votre Choix?</option>
            <option value="Administration">Administration</option>
            <option value="Commentaire">Commentaire</option>
            <option value="Contribution">Contribution</option>
            <option value="Enseignement">Enseignement</option>
            <option value="Erreur...">Erreur 404 et autres</option>
            <option value="Espace membre">Espace membre</option>
            <option value="Itin&eacute;raire">Itin&eacute;raire</option>
            <option value="Liens Internet">Liens Internet</option>
            <option value="Liste de diffusion">Liste de diffusion</option>
            <option value="Partenariat">Partenariat</option>
            <option value="Suggestion">Suggestion</option>
            <option value="T&eacute;moignage">T&eacute;moignage</option>
            <option value="Voix proph&eacute;tique">Voix proph&eacute;tique</option>
            <option value="Webmestre">Webmestre (tech.)</option>
            <option value="--- Autre ---">--- Autre ------------------------</option>
          </select>
        </td>
        <td width="20%" align="left" valign="baseline"> 
          <?php
if ((isset($_POST['envoi'])) AND ($champ4_flag =='0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
?>
        </td>
      </tr>
      <tr> 
        <td valign="top" colspan="2" align="left"> 
          <div align="left"> 
            <textarea name="zone_texte" cols="24" rows="4" class="textarea_contact" wrap="VIRTUAL"><?php
if ((isset($_POST['envoi'])) AND (isset($_SESSION['zone_texte'])))  {
echo(stripslashes($_SESSION['zone_texte']));
}
?></textarea>
          </div>
        </td>
        <td valign="top" width="20%" align="left"> 
          <?php
if ((isset($_POST['envoi'])) AND ($zone_texte_flag =='0'))  {
echo("<font face=\"Verdana, Arial, Helvetica, sans-serif\"><b><font color=\"#CA0B01\" size=\"2\">X</font></b></font>");
}
?>
        </td>
      </tr>
      <tr> 
        <td valign="top" colspan="2" align="center"> 
          <div align="center">
            <input name="nbre_champs_texte" type="hidden" id="nbre_champs_texte" value="4">
            <input name="nbre_zones_texte" type="hidden" value="1">
            <input name="nbre_zone_email" type="hidden" value="1">
            <input name="titre_champ1" type="hidden" value="Prénom">
            <input name="titre_champ2" type="hidden" value="Nom">
            <input name="titre_champ3" type="hidden" value="Pays">
            <input name="titre_champ4" type="hidden" value="Sujet">
            <input name="titre_email" type="hidden" value="Courriel">
            <input name="titre_zone" type="hidden" value="Message">
            <input type="submit" name="envoi" value="Valider" onMouseOver="this.className='buttonon_contact'" onMouseOut="this.className='button'" class="button" style="width:130px; margin-top:5px">
          </div>
        </td>
        <td valign="top" align="left" width="20%">&nbsp;</td>
      </tr>
      <tr> 
        <td valign="top" colspan="3" align="center"> </td>
      </tr>
    </table>
  
</form>
</div>

</body>
</html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

calimo · Message par **calimo** » 04 nov. 2006, 09:31

sirmalo a écrit :Bonsoir,

J'aimerais savoir comment faire pour qu'une liste déroulante d'un formulaire dans Firefox soit affichée comme pour les navigateurs Internet Explorer et Opera? Je n'arrive vraiment pas à avoir le même affichage; ça bogue énormément dans Firefox.

Que veux-tu dire par là ? Ça me semble tout à fait normal non ? Tu peux préciser ?

À propos de ton menu j'ai une remarque : il n'est pas du tout visible sans javascript. Il y a juste un lien :

Code : Tout sélectionner

Javascript Menu by Deluxe-Menu.com

Un bon menu se doit d'être accessible même lorsque javascript est désactivé. Pourquoi le générer en javascript ? Ça ne sert à rien, d'autant qu'il n'est pas dynamique, il y a juste un effet visuel qui peut parfaitement être rendu en CSS.

sirmalo a écrit :C'est un programmeur qui m'a aidé car je n'y arrivais vraiment pas. Vous remarquerez qu'il y a du et du CSS; c'est le programmeur qui a mis les et je ne me suis pas encore attardé à tous les remplacer par du CSS seulement. D'ailleurs, je ne sais pas si c'est pertinent de le faire; c'est peut être pour cela que Firefox a de la difficulté à bien rendre les listes déroulantes. Je ne sais pas.

Oui, c'est pertinent et utile : le jour où tu voudras modifier la mise en page, avec les , tu va te prendre la tête. Si tout est dans les CSS, c'est beaucoup plus simple.

Attention aussi à la validité de ta page. Il y a 11 erreurs, il serait mieux de les corriger.

Autre chose, ton doctype n'est pas valide. Il doit y avoir des majuscules, etc. Du coup, Firefox (et les autres navigateurs) tombe dans un "mode de compatibilité", dans lequel il tente d'émuler le comportement d'anciens navigateurs (IE, Netscape4) pour afficher les pages anciennes du mieux qu'il peut. Dans ce mode, il adopte un comportement totalement imprévisible. Ça pourrait bien être la cause de ton problème.
Prend un doctype HTML 4.01 Transitionnal avec URI dans cette liste : http://www.w3.org/QA/2002/04/valid-dtd-list.html Le comportement de Firefox (et des autres navigateurs) sera alors beaucoup plus prévisible !

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Pour finir, est-ce bien utile d'avoir une iframe ? Ne pourrais-tu pas inclure le formulaire directement dans la page ? Qu'est-ce que ça t'apportes, puisque de toutes façons c'est un lien statique ? Qu'est-ce qu'il t'apporte ?

J'espère que je ne t'ai pas assommé avec toutes ces réponses

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox Firefox/2.0

sirmalo · Message par **sirmalo** » 04 nov. 2006, 12:58

D'abord je veux te remercier pour toutes les infos que tu m'as apporté.

J'ai d'abord tenté de changer le doctype comme tu me l'as suggéré dans le fichier http://www.soustesailes.com/window-contact2.htm (pour l'affichage du iFrame:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

Cela n'a rien changé au CSS.
J'ai alors vérifié la page web principale:
http://www.soustesailes.com/contacttotal2.htm
et j'ai découvert que le doctype était:

Code : Tout sélectionner

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

J'ai alors changé celui-ci par:

Code : Tout sélectionner

]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

Et ça boguait dans Internet Explorer au niveau des menus et l'alignement du texte qui était à droite est devenu centré!

J'ai donc remis le doctype à:

Code : Tout sélectionner

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

Et tout est revenu à la normal.
J'ai fait la même chose dans le fichier affichant la fenêtre de droite http://www.soustesailes.com/window-contact2.htm, ainsi que dans celui de l'iFrame appelant le formulaire http://www.soustesailes.com/window-iform2.php.
Résultat: tout fonctionne dans les navigateurs IEX et Opera, mais la feuille de style
http://www.soustesailes.com/coolstyle.css
n'est pas reconnue dans Firefox (d'après la console javascript); ce qui expliquerait pourquoi mon formulaire n'est pas bien affiché.

Exemple des premières erreurs:

Code : Tout sélectionner

Erreur : Propriété « scrollbar-base-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 1

Code : Tout sélectionner

Erreur : Propriété « scrollbar-face-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 1

Code : Tout sélectionner

Erreur : Propriété « scrollbar-highlight-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 1

Code : Tout sélectionner

Erreur : Propriété « scrollbar-shadow-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 2

Code : Tout sélectionner

Erreur : Propriété « scrollbar-3dlight-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 2

Code : Tout sélectionner

Erreur : Propriété « scrollbar-arrow-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 2

Code : Tout sélectionner

Erreur : Propriété « scrollbar-track-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 3

Code : Tout sélectionner

Erreur : Propriété « scrollbar-darkshadow-color » inconnue.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 3

Code : Tout sélectionner

Erreur : « : » attendus, mais « , » trouvé.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 9

Code : Tout sélectionner

Erreur : « : » attendus, mais « , » trouvé.  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 11

Code : Tout sélectionner

Erreur : Erreur d'analyse de la valeur pour la propriété « cursor ».  Déclaration abandonnée.
Fichier source : http://www.soustesailes.com/coolstyle.css
Ligne : 18

etc.

J'en suis rendu là. Qu'est-ce que je dois faire avec ma feuille de style CSS?
OUF! C'est du sport!

Je vais voir un peu plus tard en ce qui concerne mon menu pas du tout visible sans javascript comme tu me l'as mentionné.

Merci Calimo de continuer de m'éclairer. J'apprécie grandement!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

calimo · Message par **calimo** » 04 nov. 2006, 13:44

sirmalo a écrit :
Code : Tout sélectionner
]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
Et ça boguait dans Internet Explorer au niveau des menus et l'alignement du texte qui était à droite est devenu centré!

J'ai donc remis le doctype à:
Code : Tout sélectionner
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
Et tout est revenu à la normal.

Ben oui, sauf qu'en fait justement c'est très probablement le fait que "ça buggue" qui est en fait le comportement normal !
Avec ton doctype en minuscule, comme je l'ai dit, les navigateurs sont en mode de rendu "compatibilité" et font n'importe quoi.
Il se trouve que ça t'arrange bien car c'est comme ça que tu as conçu le site, mais pour avoir quelque chose qui fonctionne vraiment, bien, et partout, tu as intérêt à passer en mode de rendu "strict" avec le doctype que j'ai donné, et corriger les problèmes.

Les navigateurs adopteront un rendu qui respecte mieux les standards du web, et donc ils seront plus cohérents entre eux !

Pour ta feuille de style, il semble qu'il y ait des erreurs. Mais sans la moindre indentation, elle est totalement illisible (par un humain je veux dire, il te reste le validateur pour t'aider à trouver les solutions).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Geckozone

Affichage de la largeur d'une liste déroulante dans un form

Affichage de la largeur d'une liste déroulante dans un form

Re: Affichage de la largeur d'une liste déroulante dans un

<!DOCTYPE ...

Re: <!DOCTYPE ...

Qui est en ligne ?