Проблема: как сделать, чтобы картинки правильно выравнивались по левому или правому краю в IE

Нет картинки

При вставке изображений, используя визуальный редактор FCKEditor, милый эксплорер не выравнивает её по левому краю, хотя я отмечаю в свойствах изображения - Выравнивание: по левому краю. Что это за фигня такая, как можно решить проблему? Другие браузеры отображают всё верно.

выравнивание картинок в IE 6

Итак. То что мы выбрали в свойствах изображения - Выравниавание "по левому краю", в переводе на 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, напишите нам про это.

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.