Плавающие в CSS файлы divs с элементами формы исчезают в Safari 3 на Mac
-
08-07-2019 - |
Вопрос
Я составляю черновик макета и провожу некоторое тестирование браузера.Никогда раньше не сталкивался с этой проблемой, ознакомьтесь с контактной формой в нижнем колонтитуле этой страницы
http://staging.terrilynn.com/fundraising/
Справа отображается div шириной 298 пикселей, который стоит первым в исходном порядке.За ним следуют несколько других divs, каждый со своими дочерними элементами формы, перемещенными влево.
Элементы div, которые должны появляться слева от div сообщения с плавающей точкой справа, исчезают.
Страница корректно отображается в firefox.Будем признательны за любую помощь.
<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 -->
Решение
Думаю, я нашел проблему:
screen.css (строка 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
проблема вызвана "переполнением: скрыто".
Другие советы
Вы пытались не перемещать элементы <p>
влево? Почему ты на самом деле это делаешь? Это не требуется в текущем макете.
Ух ты, что сработало!
Я использовал overflow: hidden, чтобы div содержал плавающую метку и элементы ввода.
Но на самом деле поплавок на элементах ввода не был необходим.
Спасибо вам всем большое.