Sign in to follow this  
b-ars07

Проблема отображения блока в Firefox

Recommended Posts

Здравствуйте, уважаемые форумчане) Помогите с небольшой проблемой. Криво отображается блок в Firefox. Хотя в Chrome все нормально.

Хром  Firefox

Код CSS и HTML:

.mail-delivery {
  box-sizing: border-box;
  float: right;
  width: 560px;
  max-height: 220px;
  padding: 6px;
  color: #5a5a5a;
  font-weight: 400px;
  border-radius: 16px;
  background: url("../img/message-pattern.png") #fff;
}

.message-wrapper {
  box-sizing: border-box;
  width: 549px;
  max-height: 208px;
  padding:5px 20px 5px 20px;
  background-color: #f8f7f4;
  border-radius: 15px;
  clear: both;
}

.message-wrapper p {
  box-sizing: border-box;
  margin-bottom: 35px;
  color: #5a5a5a;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;

}

.message-wrapper form {
  font-size: 0px;
}

.feedback.pop-window {
  display: block;
}

.message-wrapper input[type="email"] {
  box-sizing: border-box;
  display: inline-block;
  width: 356px;
  margin: 0;
  margin-right: 10px;
  margin-bottom: 36px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  color: #323232;
  font-size: 16px;
  line-height: 24px;
  vertical-align: top;
  box-shadow: 0 0 0 2px #d3d3d2;
  border: none;
  border-radius: 5px;
}


.message-wrapper input[type="submit"] {
  display: inline-block;
  padding:10px 21px;
  color: #fff;
  font-size: 17px;
  line-height: 24px;
  vertical-align: top;
  font-weight: 700;
  text-align: left;
  border: 0;
  border-radius: 40px;
  background-color: #e94e37;
  background-image: linear-gradient(to bottom, #f26843 0%, #e74b36 100%);
  box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);
  cursor: pointer;
  outline: none;
}
              <div class="mail-delivery clearfix">
                <div class="message-wrapper">
                  <p>
                    Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой не нужной ерунды. Честно =)
                  </p>
                  <form class="message-delivery" action="url" method="get">
                    <input class="form-field" id="mail" type="email" name="email" placeholder="Электронная почта" required>
                    <label class="login-form__label" for="mail">Электронная почта</label>
                    <input type="submit" value="Отправить">
                  </form>
                </div>
              </div>

 

Edited by b-ars07

Share this post


Link to post
Share on other sites
В 03.11.2016 в 09:06, b-ars07 сказал:

Здравствуйте, уважаемые форумчане) Помогите с небольшой проблемой. Криво отображается блок в Firefox. Хотя в Chrome все нормально.

Здравствуйте, у вас размеры заданы фиксированные в px , возможно при разных ситуациях (размеры экрана, другие елементы на странице и т.д.) , кнопка выпадает,

попробуйте задать всем элементам в форме, относительные величины, то есть % , возможно это поможет.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Flex12
      Всем привет. У меня при верстке сайта по уроку возникла проблема. Сверстал все один в один (перепроверил несколько раз), но по итогу получается смещение элементов. Из за чего такое может произойти? Ссылку на скрин оставлю ниже (1левый экран то как у него, а (2)правый то как у меня) Скрин для наглядности, чтобы понять о чем я.
       
    • By egrom92
      Задача Нужен человек работающий на друппал. 
      Есть готовый сайт. Клиенту нужно сделать дополнительно 1 страницу. На этой странице около 7-8 блоков но из них только 3 надо сверстать. Остальные блоки у же есть на сайте. 

      Нужно сверстать и посадить блоки на друпал. Дело срочное, спасибо!
      Обязательные требования Писать в телеграм @egrom92
  • Member Statistics

    46,457
    Total Members
    3,128
    Most Online
    Nip
    Newest Member
    Nip
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.