Проблема: как сделать, чтобы картинки правильно выравнивались по левому или правому краю в IE
При вставке изображений, используя визуальный редактор FCKEditor, милый эксплорер не выравнивает её по левому краю, хотя я отмечаю в свойствах изображения - Выравнивание: по левому краю. Что это за фигня такая, как можно решить проблему? Другие браузеры отображают всё верно.
Итак. То что мы выбрали в свойствах изображения - Выравниавание "по левому краю", в переводе на CSS означает что свойство align у тега <img> стало "left" (<img ... align="left" />). Также можно выбрать не по левому, а по правому краю, по середине и как заблагорассудится. Для Mozill'ы этого хватает. А вот для IE - фиг вам! Изображение всё равно остается "сидеть" в строке текста (на вид выглядит коряво).
Спасает использование стиля: <img ... style="float:left;" />. То есть, в редакторе визуальном где выбираем Выравнивание по левому краю у картинки, перейдя на вкладку "Расширенный", пропишем в Стиль CSS - "float:left;" или "float:right" если хотим по правому краю выровнять.
Но лучше сделать проще. Там же на вкладке "Расширенный" есть Класс CSS. Напишем в него: left - если картинка слева, right - справа. Это значит - <img ... class="left" />, то есть остаётся в файл со стилями добавить этот стиль:
.left { float:left;}
.right { float:right;}
Терерь вставляя в текст картинку не забудьте в поле Класс CSS прописать - left или right (или в поле Класс CSS - float:left; ну или редактируя Источник-html у тега img дописывайте class="left", одно из трёх). И так у каждой картинки!
Вот. Если кто-то знает почему Explorer 6 не понимает Выравнивание align="left" так как его понимает Mozilla, напишите нам про это.
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Выравниваем div внутри другого div по центру (27.11.2017)
- Пробелы между пунктами меню (16.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Выравнивание изображения по центру в Bootstrap (11.12.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Как сделать какую-либо область на сайте кликабельной ссылкой? (11.08.2015)
- Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками (11.07.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design) (05.01.2013)
- Как сделать, чтобы в теге <pre> текст переносился по строкам (wrap text in pre tag)? (15.10.2012)
- Разные стили для внутренних и внешних ссылок (07.04.2012)
- Значок рубля для сайта (25.03.2012)
- Свои стили css для области редактора CKEditor (05.03.2012)
- Yii: Красим нечётные и чётные строки в CListView разными цветами с помощью css (23.02.2012)
- CSS Font-Size: em / px / pt / percent (17.01.2012)
- Делаем тень к тексту на CSS. Обводка текста с помощью CSS (14.12.2012)
- Делаем градиент к тексту, используя CSS (23.10.2011)
- CSS-cвойство z-index: подробный обзор (23.10.2011)
- CSS: свойство visibility: hidden и visibility: visible (23.10.2011)