Opera некорректно отрабатывает width:50%

@ciwl · Регистрация: 28.06.2011

Author24 — интернет-сервис помощи студентам

Кастомизированная кнопка с текстом.

Нашёл на сайте Эврики (kontur-evrika.ru) интересный вариант создания текстовых кнопок с динамическим бекграундом с использованием тега <ins>. Решил взять этот метод на вооружение и применить в своём макете.

HTML-код:

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Zagolovok</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
 
<body>
<div class="folio-filter">
            <ul>
                <li><a href="#">Lorem ipsum</a></li>
                <li class="filter-selected">
                    <ins class="leftIns"></ins>
                    <ins class="rightIns"></ins>                    
                    <span>Dolor sit amet</span>
                </li>
                <li><a href="#">Consectetur</a></li>
                <li><a href="#">Fringilla tristique</a></li>
            </ul>
        </div><!--.folio-filter-->
</body></html>

CSS-код:

CSS

* {
    margin: 0;
    padding: 0;
}
 
.folio-filter {
    margin:29px 0 34px 105px;
}
    .folio-filter li {
        display:inline;
        margin-right:55px;
        padding:10px 23px;
    }
 
.filter-selected {
    position:relative;
}
    .filter-selected ins {
        display:block;
        height:33px;
        width:50%;
        top:3px;
        position:absolute;
        background:url(img/active-types-bg.png) 0 0 no-repeat;
        border:1px solid black;
        
    }
        .filter-selected ins.leftIns {
            left:0;
        }
        .filter-selected ins.rightIns {
            left:-50%;
            margin:0 0 0 98%;
            background-position:100% 0;
        }
 
    .filter-selected span{
        position:relative;
    }

И всё бы хорошо, но в последней версии оперы правый край сдвигается влево. Включаю border для блока ins и вижу, что распределён он не по 50%.
Можно подправить тег width:50% (в .button ins), но тогда другие браузеры "обидятся".
Что можно подкрутить, чтобы всё ровно было?

Скриншоты FF и Opera в аттаче. Там же картинка с фоном.

P.S. Всякие "трюки", типа создание отдельного файла со стилями "opera/css" или "text/opera" не помогают
P.P.S У эврики в опере всё работает. Не работает при удалении свойства min-width, но мне это свойство не помогает

Vovan-VE · 15.07.2012, 14:51

Сообщение от ciwl

CSS

1 2	left:-50%; margin:0 0 0 98%;

А right:0; чем провинился?

@ciwl · 15.07.2012, 15:03 **[ТС]**

Вот спасибо, свежий взгляд решает =)
Только нужно

Код

right:1px;

указывать - уберёт пробел между половинками.

@ciwl 0 / 0 / 0 Регистрация: 28.06.2011 Сообщений: 7
	15.07.2012, 15:03 [ТС]	3
	Вот спасибо, свежий взгляд решает =) Только нужно Код right:1px; указывать - уберёт пробел между половинками. 0