Текст наезжает на картинку в Google Chrome

Тема в разделе "Верстка", создана пользователем Freeman Liberty, 28 апр 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Freeman Liberty

    Freeman Liberty

    Регистр.:
    19 май 2009
    Сообщения:
    457
    Симпатии:
    171
    Вот приобрел забугорный шаблон для OpenCart от солидной (вроде бы) фирмы, но в процессе работы повылазила масса багов. Большую часть сам поправил, но некоторые осилить никак не удается.
    Например, в корзине покупок, название товара наезжает на изображение товара, причем такая ситуация только в Google Chrome.
    scr-4.jpg
    Просмотрел css, но так и не нашел причину.
    Сравнил с другими шаблонами той же конторы, в которых все отображает нормально - значимых различий в css и разметке не обнаружил.
    Проблемный шаблон:
    http://www.themelexus.com/demo/opencart/megashop/
    Шаблон с нормальной корзиной:
    http://www.themelexus.com/demo/opencart/nextstore/ns_default/
    Буду признателен за помощь.

    P.S.
    Вообще-то, помогает увеличение min-width до 350px, но что-то подсказывает, что это не совсем верное решение.
     
  2. ivan.petrov

    ivan.petrov Постоялец

    Регистр.:
    12 апр 2013
    Сообщения:
    94
    Симпатии:
    41
    Код:
    img {
      border: 0 none;
      height: auto;
      max-width: 100%; 
      vertical-align: middle;
    }
    Без max-width становится все нормально. Другой вопрос для чего оно добавлено и на что повлияет если убрать.
     
    Freeman Liberty нравится это.
  3. Freeman Liberty

    Freeman Liberty

    Регистр.:
    19 май 2009
    Сообщения:
    457
    Симпатии:
    171
    Дизайн адаптивный, возможно, потому и добавлено.
    Если закомментировать max-width, а потом уменьшит размер окна до планшетного, то корзина совсем разъезжается.
     
    Последнее редактирование: 28 апр 2014
  4. codeator

    codeator Постоялец

    Регистр.:
    18 май 2013
    Сообщения:
    53
    Симпатии:
    14
    <a href та которая в <td class=image дайте ей что-то типа display: inline-block; width: 80px; height: 80px;

    проблема как мне кажется в том, что ширина и высота td с картинкой нулевая, так как вложено в ссылку которая размер картинки не учитывает
     
  5. ivan.petrov

    ivan.petrov Постоялец

    Регистр.:
    12 апр 2013
    Сообщения:
    94
    Симпатии:
    41
    Ваше предложение это пример как делать не надо. Инлайновые стили это г-но код.

    Ширина и высота нулевая это как раз следствие, это баг хрома. Из за max-width: 100%; при не заданном или неизвестном размере контейнера (ссылки в данном случае), он не может рассчитать размеры.
     
  6. codeator

    codeator Постоялец

    Регистр.:
    18 май 2013
    Сообщения:
    53
    Симпатии:
    14
    Уважаемый господин Иван Петров - я постарался максимально помочь вам и отразить изменения в коде так, чтобы вам было максимально понятно, я ведь не буду прикладывать вам CSS файл, а вы не будете смотреть дифф-мерж, верно? Я понадяелся на вашу сообразительность, и думал что вы догадаетесь сами поместить стили туда, куда необходимо, будь то less или css или sass - поскольку я не вдаюсь в подробности как именно вы предпочитаете писать-компилировать css, когда моя скромная роль была всего-лишь попытаться помочь и донести до вас суть максимально эффективно - с помощью понятных всем инлайн стилей. Конечно, инлайн стили это плохо, я не призываю их писать ничуть, и пример мой ни в коей мере не об инлайне, а о том на какие элементы что повесить, чтобы обойти баги хрома и прочие узкие моменты. Я думал вы сообразительнее и догадаетесь об этом сами =)

    Из за max-width: 100%; при не заданном или неизвестном размере контейнера (ссылки в данном случае), он не может рассчитать размеры. - я вам и посоветовал по сути задать размер контейнера =)
     
    Последнее редактирование: 29 апр 2014