Баг с курсивным текстом в IE6

10 07/09
5

Проблема заключается в том, что при использовании курсивного начертания, IE6 увеличивает ширину блока с текстом, что может «поломать» структуру вёрстки.

Проблема известна достаточно давно, но возможно не все о ней знают. Баг подробно описан в этой статье.

Проблема проявляет себя достаточно хаотично. Слудующие условия в той или иной степени влияют на её появление:

  • на возникновение проблемы влияют: длина строки текста, содержание и шрифт (семейство, размер и т.д.);
  • несколько слов написанных курсивом (возможно, в середине текста);
  • наличие слова, написанного курсивом в начале или конце строки;
  • проблема проявляет себя тем чаще, чем больше курсивного текста;
  • проблема возникает ещё чаще, если курсивный текст выровнен по ширине (text-align:justify);
  • проблема проявляеться независимо от того каким образом получен курсивный текст (используеться ли элемент em или span с text-style:italic);

Решается, путём добавления блоку с текстом, hasLayout и overflow:visible:

1
2
3
4

.element{
  height:1%;
  overflow:visible
}
Теги: •

Наложение кнопок в меню

04 06/09
28

Периодически мне для вёрстки попадаются макеты в навигации у которых присутствуют перекрывающиеся по краям кнопки. Часто таким образом выделяют пункт меню открытой в данный момент страницы. У некоторых это вызывает некоторые трудности в реализации. В связи с этим выкладываю простой пример с подобным эффектом.

В качестве навигации используем список:

1
2
3
4
5
6
7

<ul>
    <li><a href="" title="">О нас</a></li>
    <li><a href="" title="">Новости</a></li>
    <li class="active"><span>Услуги</span></li>
    <li><a href="" title="">Портфолио</a></li>
    <li><a href="" title="">Контакты</a></li>
</ul>

Перекрывание кнопок осуществляется засчёт отрицательных внешних отступов, а позиционирование активного пункта поверх остальных с помощью z-index.

Перекрывающиеся кнопки в меню

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

ul{
    list-style-type:none;
    font-size:0.9em;
    color:#fff;
    height:50px;
    width:505px;
    margin:0 auto
}
ul li{
    float:left;
    border-right:solid 1px #fff;
    position:relative;
    z-index:5;
    background:#96B1D4 url(images/lc.gif) no-repeat -5px top;
    text-align:center
}
ul li.active{
    z-index:10;
    background:#9A2D7F url(images/lc.gif) no-repeat left -5px;
    border:none;
    margin:0 -9px 0 -10px;
    top:-10px
}
ul li a{
    float:left;
    display:block;
    padding:10px 0;
    background:url(images/rc.gif) no-repeat 95px top;
    text-decoration:none;
    color:#fff;
    width:100px
}
ul li span{
    float:left;
    display:block;
    padding:15px 0;
    position:relative;
    background:url(images/rc.gif) no-repeat 109px -5px;
    width:119px
}

Как видите ключевыми свойствами в примере являются margin и z-index применяемые к элементам li, остальные можно в той или иной степени менять по своему усмотрению.

Теги: •

Эффект увеличения миниатюр

30 04/09
31

Обнаружил на днях симпатичный эффект увеличения миниатюр изображений с помощью jQuery. Немного оптимизировал увиденное решение и решил опубликовать для общего пользования. А для личностей, которые негативно относятся к повсеместному использованию javascript, добавил вариант без использования оного.

HTML разметка представляет собой список, состоящий из миниатюр:

1
2
3
4
5
6
7

<ul id="gallery">
<li><a href="" title="Фото 1"><img src="spring.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 2"><img src="spring2.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 3"><img src="spring3.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 4"><img src="spring4.jpg" width="100" height="100" alt="" /></a></li>
…
</ul>

Т.к. в первом случае описание изображения создаётся и отображается с помощью скрипта, то для варианта без javascript необходимо после миниатюры добавить элемент span c этим описанием.

CSS стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#gallery{
    list-style-type: none;
    height: 1%;
    width: 500px;
    margin: 0 auto;
    font-size: 0.75em;
    margin-bottom: 20px
}
#gallery:after{ /* Чтобы список «охватывал» вложенные элементы */
    content:"";
    display:block;
    clear:both
}
    #gallery li{
        margin:0 10px 10px 0;
        float:left
    }
        #gallery li a{
            position:relative;
            display:block;
            float:left;
            width:110px;
            height:110px;
            text-decoration:none
            }
        #gallery li img{
            padding:4px;
            background:#f0f0f0;
            border:solid 1px #ddd;
            position:absolute;
            left:0;
            top:0;
            -ms-interpolation-mode:bicubic /* Для нормального масштабирования изображений в IE6 и 7 */
        }
        #gallery li span{
            display:block;
            padding:5px;
            background:#f0f0f0;
            color:#666;
            position:absolute;
            top:-35px;
            left:-35px;
            width:170px
        }

А следующие стили нужно добавить в случае использования варианта без javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#gallery li a:hover{
    z-index:100;
    display:inline
}
    #gallery li a:hover img{
        left:-40px;
        top:-40px;
        width:180px;
        height:180px
    }
    #gallery li a span{
        opacity:0.7; /* Если нужно сделать блок с информацией прозрачным */
        filter:alpha(opacity=70); /* Прозрачность в IE */
        visibility:hidden;
        cursor:pointer
    }
    #gallery li a:hover span{
        visibility:visible
    }

Далее необходимо подключить библиотеку jQuery и добавить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(function(){
    $("#gallery a").hover(function() {
        $(this).css({'z-index' : '10'});
        $(this).find('img').stop()
        .animate({
            top: '-40px',
            left: '-40px',
            width: '180px',
            height: '180px'
        }, 400);
        $(this).append('<span>' + this.title + '</span>');
        $(this).find('span').hide();
        $(this).find('span').fadeIn(500);
        }, function() {
        $(this).css({'z-index' : '0'});
        $(this).find('img').stop()
        .animate({
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 250);
        $(this).find('span').remove();
    });
});

Работа скрипта ничего необычного из себя не представляет. Всего лишь изменяются некоторые CSS свойства при наведении курсора на миниатюру, а также создаётся элемент span содержащий текст из атрибута title ссылки.

Теги: •

Альтернативные картинки для отсутствующих изображений

06 04/09
32

Отсутствующие изображения на вашем сайте могут показать вас или то, что вы предлагаете не с лучшей стороны. Со временем изображения по тем или иным причинам могут быть удалены без вашего ведома. В этом случае браузеры предлагают посетителю альтернативный контент. К несчастью у каждого браузера своё видение того, как этот контент представить и не всегда это выглядит лучшим образом.

Альтернативный контент для изображений

В качестве альтернативного решения можно использовать jQuery и специально подготовленное изображение, которое будет отображаться вместо отсутствующих картинок.

Альтернативное изображение

Создайте изображение, подключите фреймворк и добавьте следующий javascript код:

1
2
3
4
5
6
7
8

$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'missing.png',
        style:'border:3px solid #999;width:144px;height:144px;'
        });
    });
});

Оригинал: Use Custom Missing Image Graphics Using jQuery

Теги:

Кроссбраузерное использование inline block

24 02/09
31

Хочу поделиться с вами найденным решением проблемы, с которой я сталкивался раньше не один раз, но нормального выхода не находил. Проблема была связана с вёрсткой нескольких блоков, которые располагаются друг за другом.

Например так:

Кроссбраузерное использование inline block

Если высота одинакова для всех блоков, то проблем возникнуть не должно. Решалось это путём использования плавающих блоков и указания им необходимой ширины и высоты. Но что делать, если в каждом блоке разный объём контента и соответственно разная высота. В результате вёрстка могла «поехать»:

Кроссбраузерное использование inline block

Как написал автор оригинала: «Необходимо правильное и семантичное решение с гибкостью, которой обладают таблицы».

Использовать будем такую структуру:

1
2
3
4
5
6
7

<ul>
    <li>
        <img src="photo.jpg" width="75" height="75" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    …
</ul>

и следующие стили:

1
2
3
4
5
6
7

li {
    width:130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px
}

В FF3, Safari 3, Opera и IE8b2 выглядит вроде нормально, но что-то не так с вертикальным выравниванием:

Кроссбраузерное использование inline block

На самом деле результат логичен, но это не то, что нам нужно. Чтобы скорректировать вид, сделаем выравнивание по верхней линии строки.

1
2
3
4
5
6
7
8

li {
    width: 130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    vertical-align: top
}

Кроссбраузерное использование inline block

То что нужно. Однако в IE6 и IE7 всё совсем не так.

Кроссбраузерное использование inline block

IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.

1
2
3
4
5
6
7

<!--[if lte IE 7]>
<style type="text/css">
    ul li {
        display: inline
    }
</style>
<![endif]-->

Оригинал: Cross-Browser Inline-Block.

Теги: •