CSS-плавающие блоки div с элементами формы исчезают в Safari 3 на Mac

Я вместе набираю макет и тестирую браузер. Никогда раньше не сталкивался с этой проблемой, проверьте контактную форму в нижнем колонтитуле этой страницы.

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

Справа располагается div шириной 298 пикселей, который идет первым в исходном порядке. За ним следуют несколько других 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 -->

Ошибка появляется и в Chrome от Гудла. Также было бы неплохо, если бы вы могли включить в вопрос образец источника для потомства :)

AaronSieb 10.10.2008 19:21
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
1
2 095
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы пробовали не перемещать элементы <p> влево? Почему вы на самом деле это делаете? В текущем макете это не требуется.

Ответ принят как подходящий

Думаю, я нашел проблему:

screen.css (строка 382)

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

"переполнение: скрыто" вызывает проблему.

Вау, это сработало!

Я использовал overflow: hidden, чтобы заставить div содержать плавающую метку и элементы ввода.

Но на самом деле float на входных элементах не нужен.

Спасибо вам всем большое.

Другие вопросы по теме