Les divs flottants CSS avec les éléments de formulaire disparaissent dans Safari 3 sur un mac

Question

Je suis en train de préparer une mise en page et de tester certains navigateurs. Jamais rencontré ce problème auparavant, consultez le formulaire de contact dans le pied de page de cette page

http://staging.terrilynn.com/fundraising/

Il y a une div avec une largeur de 298 px flottant à droite qui arrive en premier dans l'ordre source. Il est suivi de plusieurs autres div, chacune avec leurs éléments de formulaire enfants flottant à gauche.

Les divs qui devraient apparaître à gauche du message div flottant à droite sont en train de disparaître.

La page s’affiche correctement dans Firefox. Toute aide serait la bienvenue.

<div id='footer-contact-form'>
  <h1>Request Information <span class='note'>(all fields required)</span></h1>
  <form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
    <fieldset>
      <legend>Footer Info Request</legend>
      <div class="textarea required" id="w2376">
        <p class="data">
          <label for="area_2376">Message</label>
          <textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
        </p>
      </div>
      <div class="text required" id="w2377">
        <p class="data">
          <label for="text_2377">Name</label>
          <input id="text_2377" type="text" name="e_2377" value="" />
        </p>
      </div>
      <div class="text required" id="w2378">
        <p class="data">
          <label for="text_2378">Phone</label>
          <input id="text_2378" type="text" name="e_2378" value="" />
        </p></div>
      <div class="text" id="w2379">
        <p class="data">
          <label for="text_2379">Email</label>
          <input id="text_2379" type="text" name="e_2379" value="" />
        </p>
      </div>
      <p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>

      <input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
      <input type="hidden" name="SITEID" value="2185" />
      <input type="hidden" name="cpBID" value="367780" />
      <input type="hidden" name="formslug" value="footer-info-request" />
      <input type="hidden" name="CMSCODE" value="EKK" />
      <input type="hidden" name="fkey" value="" />
    </fieldset>
  </form>
</div><!-- #footer-contact-form -->

Answer 1

Je suppose que j'ai trouvé le problème:

screen.css (ligne 382)

#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}

& "; débordement: caché &"; cause le problème.

Answer 2

Avez-vous essayé de ne pas faire flotter les <p> éléments à gauche? Pourquoi faites-vous réellement cela? Ce n'est pas obligatoire dans la mise en page actuelle.

Answer 3

Wow ça a marché!

J'utilisais overflow: hidden pour forcer la div à contenir le libellé et les éléments d'entrée flottants.

Mais vraiment, le flottant sur les éléments d'entrée n'était pas nécessaire.

Merci beaucoup à vous tous.