CSS floated divs with form elements disappear in Safari 3 on a mac

Question

I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page

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

There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.

The div's that should appear to the left of right-floated message div are disappearing.

Page displays correctly in firefox. Any help would be appreciated.

<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="" />

 </div><!-- #footer-contact-form -->

Answer 1

Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.

Answer 2

I removed the floats from p element, but that didn't seem to have any effect.

Looks like I'm having the same issue in Opera as well.

Answer 3

I guess I found the problem:

screen.css (line 382)

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

"overflow:hidden" causes the problem.

Answer 4

Wow that worked!

I was using overflow:hidden to force the div to contain the floated label and input elements.

But really the float on the input elements wasn't necessary.

Thanks you all very much.