Некорректные отображение в некоторых браузерах при переходе на Joomla 3

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Sergi, 31.08.2014.

  1. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Начал переход с Джостины на Джумлу 3 и обнаружил, что в браузерах гугл хром и опера не корректно отображаются материалы. В мозиле и интернет эксплоер всё ок.

    Что было изначально - в css задал
    .fottable img{width: 230px !important;
    height: auto !important; то есть сделал, что бы все фото рассположенные в таблице в которой 3 колонки имели размер 230px.

    Размер таблицы ставил 350 пикселя, при этом фото расстегивало таблицу до нужного размера и текст располагался точно под фото.
    Теперь в гугл хром и опере все таблицы с фото сжались до указанного размера, то есть 350 пикселей. см. скрин 1
    Если я ставлю размер таблицы 650 или 700 пикселей часть текста обтекает фото и фото сжимаются см. скрин 2
    Повторюсь что это в гугл хром и опере в мозиле и интернет эксплоер всё ок.
    С таким кодом сайт на Джостине и сейчас работает без проблем на разных браузерах http://xn----8sbioeea1ataqhrgivg.x...=com_content&task=view&id=162&Itemid=99999999
    Как можно исправить данную ситуацию???
     

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      183.7 КБ
      Просмотров:
      7
    • 2.jpg
      2.jpg
      Размер файла:
      292.6 КБ
      Просмотров:
      8
  2.  
  3. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской

    Раз никто не может подсказать исходя из данной ситуации. Попробую зайти с другой стороны.

    Странно здесь то что расположить текст под картинкой в ячейках таблицы такими способами не помогает в браузерах Google Chrome и Opera

    <img src="" alt="" /> <br />
    text

    <img src="" alt="" />
    <p>text</p>

    Как заставить текст расположить под картинками? Как прописать это в css, что бы не править везде а только в одном месте.

    На всякий случай выкладываю код

    Код (CODE):
    1. <div class="fottable">  / этот класс показывает, что фото в таблице должны быть 230 пикселей
    2. <table style="width: 700px;" border="0">
    3. <tbody>
    4. <tr>
    5. <td><a title="Каосан Роад - самая легендарная улица Бангкока, сюда съезжается самая демократичная и альтарнативная публика со всего мира" href="images/stories/tai/bangkok/DSC01660.jpg" rel="iLoad|Бангкок" target="_blank"><img style="float: left; margin: 5px; width: 300px; height: 168px;" title="каосан роад" src="images/stories/tai/bangkok/DSC01660.jpg" alt="каосан роад" width="300" height="168" /></a>
    6. <p>Каосан Роад - самая легендарная улица Бангкока, сюда съезжается самая демократичная и альтернативная публика со всего мира</p>
    7.  
    8. </td>
    9. <td><a title="Вот такие развалы с фруктами и всякой другой едой находятся на Коасане и прилегающих к нему улочках" href="images/stories/tai/bangkok/DSC01653.jpg" rel="iLoad|Бангкок" target="_self"><img style="float: left; margin: 5px; width: 300px; height: 168px;" title="каосан роад" src="images/stories/tai/bangkok/DSC01653.jpg" alt="каосан роад" width="300" height="168" /></a> <br /> Вот такие развалы с фруктами и всякой другой едой находятся на Коасане и прилегающих к нему улочках</td>
    10. <td><a title="Могут свеже приготовленную на углях рыбку подать" href="images/stories/tai/bangkok/DSC01658.jpg" rel="iLoad|Бангкок" target="_self"><img style="float: left; margin: 5px; width: 300px; height: 168px;" title="каосан роад" src="images/stories/tai/bangkok/DSC01658.jpg" alt="каосан роад" width="300" height="168" /></a>
    11. <p>Могут свеже приготовленную на углях рыбку подать</p>
    12. </td>
    13. </tr>
    14. </tbody>
    15. </table>
    --- добавлено: 03.09.2014, первое сообщение размещено: 03.09.2014 ---
    Неужели никто не может подсказать, как расположить текст под фото в ячейки таблицы.
    Казалось бы стандартная вещь.
     
    Последнее редактирование: 03.09.2014
  4. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Как я понимаю, проблема решена?

    Она во float: left у фото.
    --- добавлено: 03.09.2014, первое сообщение размещено: 03.09.2014 ---
    Код (css):
    1. .fottable img {float:none!important}

    но лучше убрать float в коде
     
    Sergi нравится это.
  5. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Я решил следующим образом

    <br clear="all" />
    all Отменяет обтекание элемента одновременно с правого и левого края.

    <img src="" alt="" /> <br clear="all" />
    text

    Но ваш вариант, то что надо! Поможет сэкономить мне время, спасибо!

    Теперь стоит другая проблема. Слова растягивают ячейки в таблице, чем длиннее слово в ячейке тем это ячейка больше растягивается за счет соседней, то есть сужает её см. скриншот.
    Хотя на Джоостине и сейча все отображается как надо.
    http://xn----8sbioeea1ataqhrgivg.xn...n=com_content&task=view&id=86&Itemid=99999999
     

    Вложения:

    • 3.jpg
      3.jpg
      Размер файла:
      255.6 КБ
      Просмотров:
      7
  6. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Хороший костыль :) Сначала сделать обтекание, а затем с успехом его отменять. :crazy:

    А вообще, что такого в Joomla 3, что всё так перекашивает? HTML5 внедряешь что ли?
    Шаблон и основное оформление по идее должны остаться такими же.
     
  7. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    указывай ширину столбцу ячейки таблицы. Или в каждом тексте придется прописывать перенос
    Код (CODE):
    1. <br />
     
    Sergi нравится это.
  8. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    В том то и дело, что костыль)! Изначально сайт был на Джостине и нынешних проблем не было вообще. Достаточно было поставить в коде <br /> после фото перед текстом и этого было достаточно.
    Стал переносить на Джумлу 3, делал в мозиле, было все нормально как и раньше, а потом случайно заметил, что в браузерах гугл хром и опера ячейки в таблицах сдвинуты из-за того, что текст не обтекает фото, см. скрин 1.
    Когда решился этот вопрос, оказалось еще то что слова растягивают ячейки в таблице, чем длиннее слово в ячейке тем это ячейка больше растягивается за счет соседней, то есть сужает её.
    Надо просто чтоб текст располагался под фото этого уже добился, вам спасибо, и что бы слова не растягивали ячейки.
    Раньше было так - ячейки растягивались исходя из размера фоток, не смотря на то какие размеры таблицы я указал, хоть 100 пикселей, а текст переносился как надо.
    Сайт и сейчас так работает.
    --- добавлено: 04.09.2014, первое сообщение размещено: 04.09.2014 ---
    Вот у меня после каждой фотки и был прописан перенос <br />, но он даже переносить перестал, помогло <br clear="all" />, но этот вопрос отпал.

    Да действительно указав ширину ячейки все становиться как надо и текст не растягивает ячейки. Спасибо!

    В css реализовал так
    Код (CODE):
    1. .fottable td {width: 233px !important;
    2. }


    А перед таблицей вставляю в код страницы
    <div class="fottable">
     

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      292.6 КБ
      Просмотров:
      4

Поделиться этой страницей

Загрузка...