Internet Explorer — Блог одной студии

Верстка и движок для сайта «Веста ТЛ»

www.vesta-tl.ru — Верстка сайта, движок.

Для сайта компании «Веста ТЛ» мы установили наш движок и написали специальные модули, позволяющие быстро и легко обновлять информацию и загружать фотографии.

Управление фотографиями происходит напрямую из страниц сайта, а не из панели управления, как это бывает обычно. Сначала необходимо авторизоваться и потом можно начинать редактирование. Вот так выглядит страница для пользователя:

А вот так, в режиме редактирования, для администратора:

Можно загрузить сразу до 10 фотографий, дать для них описание, пересортировать в любом порядке, а так же временно скрыть не нужные.
Для каждой страницы создается своя галерея фотографий, при этом, автоматически создается уменьшенная копия, а если файл назван по-русски, он переименовывается в транслит.
Таким же образом, прямо из сайта, можно управлять текстом, просто выбирая нужную страницу. Редактор позволяет создавать любые текстовые эффекты, списки, таблицы, дополнительные слои и т.д.
Сейчас сайт наполняется и поддерживается сотрудниками компании.

Верстка одинаково хорошо работает в любых браузерах, в том числе, в Internet Explorer 6, а так же в браузерах под Mac и Linux.

Создание сайта «Завода метталических конструкций»

www.l-dv.ru — Создание сайта, верстка, движок.

Новый сайт компании «LDV» создан в минималистическом дизайне. Основную ставку мы сделали на наполнение и судя по отзывам клиента, не ошиблись.

Сайт одинаково хорошо отображается в любом браузере, благодаря особому вниманию к верстке. Кстати мы до сих пор поддерживаем даже такие древние браузеры, как Internet Explorer 6!

Вся информация разложена по полочкам, у каждого товара имеется своя страница с описанием, фотографией и ценой. Кстати цены актуальные и постоянно обновляются. Сами сотрудники компании регулярно изменяют цены, добавляют новые описания и целые страницы, обновлять сайт очень легко, потому что он работает на нашем движке.
Мы выделили место под специальные акции и сезонные снижения цен, которые так же обновляются и сохраняют актуальность.
Наполнение сейчас является главным продающим фактором и это является главной особенностью сайта. Нами было создано и наполнено около 200 страниц (не считая технических), добавлено более 400 единиц товаров. Результат — высокая отдача от рекламы.

В качестве дополнения, публикуем скриншот из панели управления сайтом, со списком всех созданных страниц (нажмите на картинку, чтобы посмотреть полную версию):

Благодарим Тлучкевич Андрея и Светлану за помощь в создании проекта и некоторые свежие идеи.

Новый знак рубля

Новый знак рубля, неофициально принят уже давно, многие сайты, интернет магазины и дизайн студии по собственной инициативе перешли на новый знак. На нашем сайте цены тоже отображаются с новым знаком. Если вы решили установить этот знак к себе на сайт, то это довольно просто, достаточно следовать инструкции и все получится. Итак, начинаем:

1. Скачайте и установите на ваш сайт специальный шрифт ruble.eot.

2. Для начала, прописываем CSS стили:
@font-face { font-family: "Rubl Sign"; src: url(http://www.sajt.ru/ruble.eot); } span.cost { font-family: "Rubl Sign"; } span.cost span.rur { text-transform: uppercase; // text-transform: none;} span.cost span.rur span.eot { display: none; // display: inline;} span.cost span.rur span.ttf, span.cost span.end { // display: none; } span.cost span.end { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; } span.cost span.end:before { content: '2013'; }

В первой строке, необходимо указать адрес, по которому у вас лежит шрифт.

3. Теперь прописываем код в тело HTML страницы:
Французские булки по 100 Aруб. Французские булки по 100 Aруб. Французские булки по 100 Aруб. Французские булки по 100 Aруб.

Можно играть со значениями, как угодно.

Результат:

Соответсвие символов (только для Internet Explorer):

Этот способ гарантирует правильное отображение во всех браузерах и в любых условиях.

Отступ в Internet Explorer, под тегом <hr />

В браузере Internet Explorer, CSS-свойство margin для тега <hr />, отличается от других браузеров. По умолчанию, IE делает отступ на 7 пикселей больше, чем остальные браузеры. Для примера, возьмем следующий код:

<div> <hr /> Расстояние между текстом и линией 3px </div>

CSS для нашего кода:

hr { margin: 3px 0; height: 1px; border: none; background: #cf610f; color: #cf610f; /* цвет линии в IE */ }

В браузерах Opera, FireFox, Safari и Chrome, мы видим, что текст, расположился ровно под линией, с отступом 3 пиксела, как мы и хотели:

В Internet Explorer получился отступ в 3+7 пикселов:

Такая ситуация нас не устраивает, потому мы зададим дополнительное правило в CSS, которое будет работать только для IE:

* html hr {margin: 0; /* для IE6 */} *+html hr {margin: 0; /* для IE7 */}

Это правило, убирает лишний отступ в 7 пикселов, так же оно работает, если указать отрицательное значение. Надеюсь, этот небольшой, но полезный хак, поможет вам в работе.

Лишние отступы под картинками в IE 6 и 7

В Internet Explorer 6 и 7, есть много неприятных особенностей, одна из них — лишние отступы под картинками. Для ясности, приведу пример:

Будем использовать следующий html код:

<div class="kiski"> <img src="киски.jpg" width="192" height="150" alt="Киски" /> </div>

CSS для нашего кода:

.kiski { width: 192px; height: 150px; border: 4px solid #eca5a5; }

В данном примере, я использую блочную верстку, но проблема появится и при верстке таблицами.
Решение проблемы до смешного просто и объясняется тем, что в ie, по умолчанию, вертикальное выравнивание картинок имеет атрибут base-line. Достаточно поменять его, в CSS, на значение:

img { vertical-align: top; }

Это не единственное решение проблемы, есть еще несколько, достаточно интересных способов, о которых нужно знать.

Первый способ.
Убираем все пробелы, переносы строк и отступы в коде. Конечно, это не совсем валидно W3C, но работает. Для нашего примера, код будет выглядеть следующим образом:

<div class="kiski"><img src="киски.jpg" width="192" height="150" alt="Киски" /></div>

Второй способ.
Рекомендую этот способ, при верстке таблицами, но и при верстке слоями, тоже подойдет. Нужно в CSS прописать размер шрифта для блока или ячейки в 1 пиксель. Конечно, этот способ неприменим, если вы собрались вставлять текст в этот блок. Ниже CSS код, для нашего примера:

.kiski { width: 192px; height: 150px; border: 4px solid #eca5a5; font-size: 1px; }

Итак, мы выяснили причину нежелательных отступов в Internet Explorer 6 и 7, а также решение этой проблемы. Надеюсь, вам это помогло. Удачи!

Немного о верстке

HTML верстка — это важнейший компонент качественного сайта. Мало нарисовать дизайн, нужно заставить картинку ожить. От качественной верстки зависит многое, это и первое впечатление посетителя о сайте, и уважительное отношение профессионалов, и высокая скорость загрузки сайта, и одинаковое отображение в любом браузере.

Мы уделяем HTML-верстке особое внимание. В основном, верстаем таблицами, а css пишем в соответствии со стандартами. Все наши сайты одинаково отображаются во всех браузерах — Internet Explorer, Opera, Firefox, Safari и даже браузерах развлекательных систем PlayStation 3 и Wii.

Для верстки не используется специальных программ, все делается вручную. В основном, наши верстальщики используют программу Notepad++, которая прекрасно заменяет блокнот. Отличия — подсветка синтаксиса, простановка табулаторов, работа с несколькими документами, умный поиск, всевозможные плагины и многое другое. Вот так выглядит код нашего блога, в Notepad++:

Обычно, на верстку среднего сайта уходит 4-7 дней. Иногда, нас спрашивают, стоит ли работа таких усилий, ведь обычный человек не замечает этого, ему все равно как выглядит сайт в другом браузере и на разных разрешениях экрана. Отвечаем — безусловно, работа того стоит! К примеру, на сайт пришло 1000 человек, из них у 500 браузер Internet Explorer, у 100 Opera, еще у 300 Firefox и оставшуюся сотню делят люди с другими браузерами. Теперь допустим, что ваш сайт делал не опытный человек, отлаживая сайт, только для Internet Explorer. Результат — 500 человек (половина посетителей) видят сайт совершенно не в том виде, в каком он задумывался, а некоторые вообще не могут его загрузить. Ни один человек, не останется на таком сайте и тем более не будет ничего покупать у такой фирмы.

Создавая свои сайты, мы гарантируем качественную верстку, проверку во всех основных браузерах, а также оптимизацию кода, для быстрой загрузки и эффективной индексации поисковыми системами.