CSS divisés flottants avec des éléments de formulaire disparaissent dans Safari 3 sur un mac

Question

Je suis en train de rudesse une mise en page ensemble et de faire des tests de navigateur. Jamais tombé sur cette question avant, consultez le formulaire de contact en bas de page de cette page

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

Il y a une div avec une largeur de 298px flottaient à droite qui vient en premier dans l'ordre de la source. Il est suivi par plusieurs autres divs, chacun avec leurs éléments de forme enfant flottant à gauche.

Les div qui doivent apparaître à gauche du div de message flottant vers la droite disparaissent.

La page s'affiche correctement dans Firefox. Toute aide serait appréciée.

<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 je trouve le problème:

screen.css (ligne 382)

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

"overflow: hidden" provoque le problème.

Answer 2

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

Answer 3

Wow qui a fonctionné!

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

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

Merci beaucoup à tous.