Vlad_P

<div class="container">

   <img src="" alt="">

   <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

   </ul>

   <img src="" alt="">

</div>

<style>

   .container {display: grid;grid-template-columns: 1fr minmax(max-content, 30%) 1fr;}

   .container img {max-width: 100%;}

</style>

Следует обнулять. обычно для этого используют раличные готовые решения, например, reset.css, bootstrap-reboot.min.css - от бутстрапа и т.д. Просто для примера - создайте div, не используя body

Не надо использовать margin для элемента body.

1. Думаю, у вас начало съезжать, когда вы присвоили обтекание картинкам. Дело в том, что обтекаемые элементы получают свой контекст и выпадают потока. Один из способов исправления - присвоить содержащему элементу overflow: hidden; Уж не знаю почему так.

2. Почему-то у вас внутри нумерованного списка ol все что угодно, но не элементы li. Потому нет нумерации. Я так и не понял. как именно там было задумано

Отключил ширину 100%, колонка осталась где была, что вполне ожидаемо. Проблема непонятна

Не очень понятно как оно вообще должно работать. Т.е. зачем там ссылки внутри ссылки? Если весь этот блок должен быть одной ссылкой - просто уберите те, что внутри и весь станет кликабельным. Сейчас внешяя ссылка является пустой. Браузер ее закрывает сам

figure::before, figure::after {pointer-events: none;}

И будет тебе щастье

Попробуйте для боковых блоков обертку с flex-grow: 1

отдельный контейнер для 2х мелких фоток и кота. ток так

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

Меняется. если поставит -webkit-backface-visibility: hidden; - не меняется. но текст отображается по другому

Нашел источник проблемы. При открытии списка галочка через transform поворачивается. убрал у нее transition и нормально. Но какая тут связь - мне не понять

http://vlad.gtxt.biz/tahograph/

В хроме, в момент открытия подменю, меняется шрифт в темных блоках ниже. Как? Почему? И, главное, как исправить

а, я чет только на правило глянул,а так да, ток через js убирать его,  поминая добрым словом того,  кто так сделал

да ладно. а если

body #mainblock block block block {
 
  background: green !important;

}

Сложно понять, какой слайдер вы используете, но можно сразу сказать 2 способа:

1. задать этому блоку padding, чтобы контент на него не заходил. и не выносить стрелки за пределы блока

2. сделать кнопки отдельными элементами и через js навесить на них переходы вперед и назад. Любой готовый скрипт слайдера позволяет это без проблем

Не очень ясно, зачем ему этот атрибут? Он же задает начальное состояние :checked и не отражает текущий выбор. Ну и да конечно, сам атрибут вы без js не переместите. Стили не меняют хтмл код

Конечно нет неглюченых. Но откуда в сафари свои собственные. Я встречал

аппл зло. а сафари недоразумение. Ну ведь взят готовый движок. Зачем туда добавлять глюки. да еще с таким рвением. А уж сделать эклюзивной глюченую оболочку для движка - просто эталон политики апла

Если уж сильно надо, проще уж наверно на вирт. машине

а меньшей кровью никак?

гриды могут все

Если кол-во блоков фиксировано, задайте одному margin-left:auto, другому margin-right: auto. Если нет - создавайте для них отдельную строку

Существует ли вообще новый пользователь форума, не задавший этот вопрос

Подскажите пожалуйста. Выражение `строка текста ${выражение} строка текста` Пробую. ну не работает и все тут:

        function rect(width, height, color) {
            document.write('<div style="width: ${width}px; height: ${height}px;background: ${color};"></div>')
        }

браузер так и видит width: ${width}px;  и т. д. Смотрю в фф и хроме.

Извиняюсь, понял. Обратные кавычки

Не схлопываются. Как и inline-block )))) Помоему лучше флекс лучший выбор. А флоат - худший

Ну с Эриком Мейером я уж точно спорить не буду. Впрочем, мне никогда и не приходило в голову использовать strict