Почему слетает стиль с подписи почты?

Question

mtozh @mtozh

Почему слетает стиль с подписи почты?

В общем, задача сделать симпатичную подпись электронных писем для компании. В целом, с горем-пополам что-то написал -- браузеры, даже IE, открывают всё без проблем, но вот в Аутлуке почему-то всё съезжает. Есть мысли, что может, я криво написал или даже синтаксис должен быть другой. Или даже, может, формат подписи HTM как бы намекает, что новые свистоперделки не пройдут. Но уже день безрезультатно борюсь с этой подписью. Где я мог ошибиться? Чего я могу не видеть? Как управиться с Аутлуком?

<htm>

<head>
<meta charset="UTF-8">
</head>

<style>

  .skos{
  background: #fef7ff;
  position: absolute;
  top: 5px;
  left: 55px;
  width: 500px;
  transform: skewY(-110deg);
  transform-origin: 100%;
}

div#background_grey {
position: absolute;
}

.background_grey{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 700px;
  height: 500px;
  background: #b3b3b3;
}


div#background_white {
position: absolute;
}.background_white{
  position: absolute;
  top: 5px;
  left: 355px;
  background: #fef7ff;
}

div#logotype {
  position: absolute;
  }.logotype {
    position: absolute;
    top: 20px;
    left: 350px;
    text-transform: none;
    color: black;
}

div#logosite {
  position: absolute;
  }.logosite {
    position: absolute;
    top: 126px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#logonum1 {
  position: absolute;
  }.logonum1 {
    position: absolute;
    top: 96px;
    left: 32px;
    text-transform: none;
    color: black;
}

}

div#logonum2 {
  position: absolute;
  }.logonum2 {
    position: absolute;
    top: 79px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#logomail {
  position: absolute;
  }.logomail {
    position: absolute;
    top: 111px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#youtube {
  position: absolute;
  }.youtube {
    position: absolute;
    top: 108px;
    left: 255px;
}

div#instagram {
  position: absolute;
  }.instagram {
    position: absolute;
    top: 107px;
    left: 290px;
}





div#worker {
position: absolute;
}.worker {
  position: absolute;
  top: 10px;
  left: 35px;
  text-transform: none;
  color: black;

  text-align: top;
}

div#department {
position: absolute;
}.department {
  position: absolute;
  top: 30px;
  left: 35px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#position {
position: absolute;
}.position {
  position: absolute;
  top: 47px;
  left: 35px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#mobnum {
position: absolute;
}.mobnum {
    position: absolute;
    top: 70px;
    left: 50px;
    text-transform: capitalize;
    color: black;
  text-align: top;
}

}
div#mobnum2 {
position: absolute;
}.mobnum2 {
  position: absolute;
  top: 87px;
  left: 50px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#email {
position: absolute;
}.email {
  position: absolute;
  top: 102px;
  left: 50px;
  text-transform: lowercase;
  color: black;
  text-align: top;
}

div#site {
position: absolute;
}.site {
  position: absolute;
  top: 118px;
  left: 50px;
  text-transform: lowercase;
  text-align: top;
}

div#adress {
position: absolute;
}.adress {
  position: absolute;
  top: 80px;
  left: 360px;
  text-transform: none;
  color: black;

  text-align: top;
}

div#requisites {
position: absolute;
}.requisites {
  position: absolute;
  top: 105px;
  left: 375px;
  text-transform: none;
  color: black;
}
  </style>

<body>
<div class="background_grey"
style="width: 600px; height: 150px;"></div>

<div class="background_white"
style="width: 250px; height: 150px;"></div>


<div class="skos"
style="width: 300px; height: 150px;"></div>

<div class="worker">
  <span style="font-family:'Calibri';
font-size:20px;
line-height:30px;color:#333333;
font-weight: bold;">Вилли Вонка</span></div>

<div class="department">
  <span style="font-family:'Calibri';
font-size:15px;
line-height:30px;color:#333333;
font-weight: light;">Тендерный отдел</span></div>

<div class="position">
  <span style="font-family:'Calibri';
font-size:15px;
line-height:30px;color:#333333;
font-weight: light;">Начальник отдела</span></div>

<div class="mobnum">
  <a href="tel:+74958888888"><span style="font-family:'Calibri';
font-size:15px;
line-height:30px;
color:#477ccc;
font-weight: light;">+7 8888888888</span></a>
</div>

<div class="mobnum2">
  <a href="tel:+7928888888"><span style="font-family:'Calibri';
font-size:15px;
line-height:30px;
color:#477ccc;
font-weight: light;">+7 8888888888</span></div></a>

<div class="email">
  <a href="mailto:tender@chocko.ru"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc; !important;">
  tender@chocko.ru
</span></a></div>

<div class="site">
  <a href="https://chocko.ru/"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc;
  outline:none;">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc !important;">https://choko.ru/
</span></a></div>

<div class="logotype">
  <a href="https://chocko.ru/"
  target="_blank">
  <img src="https://www.bob-easton.com/blog/wp-content/uploads/2013/03/5842466500_68546a2c7d_b-300x200.jpg"
  width="226"
  height="63"
  border="0"
  position: absolute; alt="logo"/>
</a></div>

<div class="adress">
  <a href="https://yandex.ru/maps/-/CCUm66dv3C"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc;
  outline:none;">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc !important;">Город, улица, фонарь
  </span></a>
  </div>

<div class="requisites">
  <span style="font-family:'Calibri';
font-size:8px;
line-height:1px;color:#333333;
font-weight: light;"><center><p>ИНН: 8888888888 / КПП: 888888888 / ОГРН: 18888888888</p>
<p>Расчетный счет: 888888888888888</p>
<p>Банк: Филиал «Центральный» Банка ВТБ (ПАО) в г. Москве</p>
<p>Кор./счет: 888888888888881</p></center>
</span></div>

<div class="logosite">
  <img src="https://i.ibb.co/c2VgpRN/image.png"
  width="15"
  height="15"
  border="0"
  position: absolute; alt="logosite"/></div>

  <div class="logonum1">
    <img src="https://i.ibb.co/cTBpNfj/CALL.png"
    width="15"
    height="15"
    border="0"
    position: absolute; alt="logonum1"/></div>

    <div class="logonum2">
      <img src="https://i.ibb.co/cTBpNfj/CALL.png"
      width="15"
      height="15"
      border="0"
      position: absolute; alt="logonum2"/></div>

      <div class="logomail">
        <img src="https://i.ibb.co/J29ZwYf/EMAIL.png"
        width="15"
        height="15"
        border="0"
        position: absolute; alt="logomail"/></div>

        <div class="youtube">
            <a href="https://www.youtube.com/user/8888888888">
              <img src="https://i.ibb.co/hMkkTQk/youtube.png"
          width="40"
          position: absolute; alt="youtube"/></div>

          <div class="instagram">
            <a href="https://www.instagram.com/888888888888/">
              <img src = "https://i.ibb.co/fq9gHnc/instagram.png"   width="40"
              position: absolute; alt="instagram" /> </a>

          </div>
        </body>
      </htm>

Вопрос задан более трёх лет назад
296 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

v3shin @v3shin

Код картинкой - не надо так, лучше прикрепите его через редактор кнопкой </>.
А по теме - почтовики режут стили, так что советую погуглить, как правильно верстать почтовые рассылки.

Написано более трёх лет назад

mtozh @mtozh Автор вопроса

v3shin, прошу прощения. Сглупил

<htm>

<head>
<meta charset="UTF-8">
</head>

<style>

  .skos{
  background: #fef7ff;
  position: absolute;
  top: 5px;
  left: 55px;
  width: 500px;
  transform: skewY(-110deg);
  transform-origin: 100%;
}

div#background_grey {
position: absolute;
}

.background_grey{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 700px;
  height: 500px;
  background: #b3b3b3;
}


div#background_white {
position: absolute;
}.background_white{
  position: absolute;
  top: 5px;
  left: 355px;
  background: #fef7ff;
}

div#logotype {
  position: absolute;
  }.logotype {
    position: absolute;
    top: 20px;
    left: 350px;
    text-transform: none;
    color: black;
}

div#logosite {
  position: absolute;
  }.logosite {
    position: absolute;
    top: 126px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#logonum1 {
  position: absolute;
  }.logonum1 {
    position: absolute;
    top: 96px;
    left: 32px;
    text-transform: none;
    color: black;
}

}

div#logonum2 {
  position: absolute;
  }.logonum2 {
    position: absolute;
    top: 79px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#logomail {
  position: absolute;
  }.logomail {
    position: absolute;
    top: 111px;
    left: 32px;
    text-transform: none;
    color: black;
}

div#youtube {
  position: absolute;
  }.youtube {
    position: absolute;
    top: 108px;
    left: 255px;
}

div#instagram {
  position: absolute;
  }.instagram {
    position: absolute;
    top: 107px;
    left: 290px;
}





div#worker {
position: absolute;
}.worker {
  position: absolute;
  top: 10px;
  left: 35px;
  text-transform: none;
  color: black;

  text-align: top;
}

div#department {
position: absolute;
}.department {
  position: absolute;
  top: 30px;
  left: 35px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#position {
position: absolute;
}.position {
  position: absolute;
  top: 47px;
  left: 35px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#mobnum {
position: absolute;
}.mobnum {
    position: absolute;
    top: 70px;
    left: 50px;
    text-transform: capitalize;
    color: black;
  text-align: top;
}

}
div#mobnum2 {
position: absolute;
}.mobnum2 {
  position: absolute;
  top: 87px;
  left: 50px;
  text-transform: capitalize;
  color: black;
  text-align: top;
}

div#email {
position: absolute;
}.email {
  position: absolute;
  top: 102px;
  left: 50px;
  text-transform: lowercase;
  color: black;
  text-align: top;
}

div#site {
position: absolute;
}.site {
  position: absolute;
  top: 118px;
  left: 50px;
  text-transform: lowercase;
  text-align: top;
}

div#adress {
position: absolute;
}.adress {
  position: absolute;
  top: 80px;
  left: 360px;
  text-transform: none;
  color: black;

  text-align: top;
}

div#requisites {
position: absolute;
}.requisites {
  position: absolute;
  top: 105px;
  left: 375px;
  text-transform: none;
  color: black;
}
  </style>

<body>
<div class="background_grey"
style="width: 600px; height: 150px;"></div>

<div class="background_white"
style="width: 250px; height: 150px;"></div>


<div class="skos"
style="width: 300px; height: 150px;"></div>

<div class="worker">
  <span style="font-family:'Calibri';
font-size:20px;
line-height:30px;color:#333333;
font-weight: bold;">Вилли Вонка</span></div>

<div class="department">
  <span style="font-family:'Calibri';
font-size:15px;
line-height:30px;color:#333333;
font-weight: light;">Тендерный отдел</span></div>

<div class="position">
  <span style="font-family:'Calibri';
font-size:15px;
line-height:30px;color:#333333;
font-weight: light;">Начальник отдела</span></div>

<div class="mobnum">
  <a href="tel:+74958888888"><span style="font-family:'Calibri';
font-size:15px;
line-height:30px;
color:#477ccc;
font-weight: light;">+7 8888888888</span></a>
</div>

<div class="mobnum2">
  <a href="tel:+7928888888"><span style="font-family:'Calibri';
font-size:15px;
line-height:30px;
color:#477ccc;
font-weight: light;">+7 8888888888</span></div></a>

<div class="email">
  <a href="mailto:tender@chocko.ru"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc; !important;">
  tender@chocko.ru
</span></a></div>

<div class="site">
  <a href="https://chocko.ru/"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc;
  outline:none;">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc !important;">https://choko.ru/
</span></a></div>

<div class="logotype">
  <a href="https://chocko.ru/"
  target="_blank">
  <img src="https://www.bob-easton.com/blog/wp-content/uploads/2013/03/5842466500_68546a2c7d_b-300x200.jpg"
  width="226"
  height="63"
  border="0"
  position: absolute; alt="logo"/>
</a></div>

<div class="adress">
  <a href="https://yandex.ru/maps/-/CCUm66dv3C"
  style="font-family:'Calibri',Calibri;
  font-size:15px;
  line-height:30px;
  color:#477ccc;
  outline:none;">
  <span style="font-family:'Calibri',Calibri;
  font-size:15px;
  color:#477ccc !important;">Город, улица, фонарь
  </span></a>
  </div>

<div class="requisites">
  <span style="font-family:'Calibri';
font-size:8px;
line-height:1px;color:#333333;
font-weight: light;"><center><p>ИНН: 8888888888 / КПП: 888888888 / ОГРН: 18888888888</p>
<p>Расчетный счет: 888888888888888</p>
<p>Банк: Филиал «Центральный» Банка ВТБ (ПАО) в г. Москве</p>
<p>Кор./счет: 888888888888881</p></center>
</span></div>

<div class="logosite">
  <img src="https://i.ibb.co/c2VgpRN/image.png"
  width="15"
  height="15"
  border="0"
  position: absolute; alt="logosite"/></div>

  <div class="logonum1">
    <img src="https://i.ibb.co/cTBpNfj/CALL.png"
    width="15"
    height="15"
    border="0"
    position: absolute; alt="logonum1"/></div>

    <div class="logonum2">
      <img src="https://i.ibb.co/cTBpNfj/CALL.png"
      width="15"
      height="15"
      border="0"
      position: absolute; alt="logonum2"/></div>

      <div class="logomail">
        <img src="https://i.ibb.co/J29ZwYf/EMAIL.png"
        width="15"
        height="15"
        border="0"
        position: absolute; alt="logomail"/></div>

        <div class="youtube">
            <a href="https://www.youtube.com/user/8888888888">
              <img src="https://i.ibb.co/hMkkTQk/youtube.png"
          width="40"
          position: absolute; alt="youtube"/></div>

          <div class="instagram">
            <a href="https://www.instagram.com/888888888888/">
              <img src = "https://i.ibb.co/fq9gHnc/instagram.png"   width="40"
              position: absolute; alt="instagram" /> </a>

          </div>
        </body>
      </htm>

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+1 ещё

Простой
Как сделать так, чтобы карточка была по размеру контента, если его немного?
- 1 подписчик
- 12 часов назад
- 65 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли на сегодня какое-нибудь решение выделить инпут по focus-visible?
- 1 подписчик
- 19 часов назад
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, что бы используя live server у меня не браузер открывался, а справа от самого кода открывалось окно со всем этим?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как получить такой эффект на мобильном?
- 1 подписчик
- вчера
- 159 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сверстать данную часть header?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать что бы в меню были вертикальные полосы на всю высоту?
- 2 подписчика
- 11 мар.
- 183 просмотра
2

ответа
HTML

+1 ещё

Простой
Как лучше реализовать данный блок?
- 1 подписчик
- 11 мар.
- 91 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как скрыть/показать элемент с определенным текстом?
- 2 подписчика
- 10 мар.
- 871 просмотр
2

ответа
Электронная почта

Простой
Как получить email на домене .edu?
- 1 подписчик
- 10 мар.
- 171 просмотр
1

ответ
CSS

Средний
Как победить проблемы с overflow-y: sсroll?
- 1 подписчик
- 06 мар.
- 141 просмотр
2

ответа
Показать ещё Загружается…

Специалист технической поддержки ИТ продукта

inSales

от 60 000 ₽

Парсер для сайта

Rotormine

от 10 000 до 100 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 120 000 ₽

Код картинкой - не надо так, лучше прикрепите его через редактор кнопкой </>.
А по теме - почтовики режут стили, так что советую погуглить, как правильно верстать почтовые рассылки.

Answer 1 · 2021-09-13 17:34:22

Вёрстка email делается с помощью таблиц. Воспользуйтесь фреймворком https://mjml.io/
Так будет более предсказуемый результат.

Answer 2 · 2021-09-14 06:40:32

CityCat4 @CityCat4 Куратор тега Электронная почта

//COPY01 EXEC PGM=IEBGENER

Интересно, что я увижу, когда такое письмо попадет ко мне в фильтр и весь html будет "ободран"? :)

Ответ написан более трёх лет назад

Комментировать

Почему слетает стиль с подписи почты?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт