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

10 07/09
5

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

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

  • длина строки текста, содержание и шрифт (семейство, размер и т.д.);
  • несколько слов написанных курсивом (возможно, в середине текста);
  • наличие слова, написанного курсивом в начале или конце строки;
  • проблема проявляет себя тем чаще, чем больше курсивного текста;
  • проблема возникает ещё чаще, если курсивный текст выровнен по ширине (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>

Перекрывание кнопок осуществляется с помощью отрицательного margin, а отображение активного пункта поверх остальных с помощью 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
}
Теги: •

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

30 04/09
31

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

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>

Подпись к миниатюре создаётся с помощью JS. В варианте на «чистом» CSS необходимо после миниатюры добавить элемент span c этой подписью.

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
        }

Следующие стили нужно добавить для использования без JS:

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
    }
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();
    });
});
Теги: •

Кроссбраузерное использование 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.

Теги: •

Ссылки при печати

02 12/08
22

Главная цель использования альтернативных стилей при печати страницы — скрыть лишние элементы. Навигационное меню, форма поиска и другие элементы, обеспечивающие какую-либо функциональность на странице, становятся бесполезными на бумаге. Также, по возможности, убирается цветовое оформление страницы.

Однако помимо удаления, можно добавить кое-что полезное. Например, Kilian Valkhof предложил интересное решение, касающееся ссылок. После печати ссылки теряют свою функциональность, однако в будущем у пользователя может возникнуть необходимость, перейти по ссылке, опубликованной в тексте. Следующий код вставляет после каждой ссылки значения её атрибута href.

1
2
3
4
5

a:after {
  content:" (" attr(href) ") ";
  font-size:90%;
  font-weight:bold
}

Результат выглядит следующим образом:

Юзабилити стилей для печати

К сожалению это не сработает в IE ниже 7-го, т.к. эти браузеры не поддерживают псевдо-элемент :after.

Теги: