[css] кроссбраузерный "список"

pilot

Задачка:
хочется список чтоб был "вертикальный", заранее неизвестна ширина элементов, нужно выделять элемент над которым мыша — как активный.

<html>

    <head>

        <title>Test</title>

        <style type="text/css">

div {

    display: inline;

    position : absolute;

    z-index: 2;

    border: 1px solid blue;

    background-color : #FAFAFA;

    margin-top: 10px;

    padding: 0px;

    overflow: auto;

    cursor: default;

    }

div a {

    margin: 1px;

    border: 1px solid #FAFAFA;

    display: block;

    padding-left: 3px;

    padding-right: 3px;

    }



div a.hover, div a:hover {

    background-color : #EFEFEF;

    border: 1px solid blue;

    }

        </style>

    </head>

    <body>

<div>

    <a>string1</a>

    <a>string2</a>

    <a>long string</a>

</div>

    </body>

</html>

Вот такая конструкция. В Опере 8.5 и 9, Firefox-е 1.0, IE — короткие string1 и string2 выделяются на всю ширину div.
В Firefox 1.5 выделяется только текст (т.е. выделение string1 и string2 — не на всю ширину div)
Исходная задачка — сделать меню для выбора. Меню поверх всей страницы должно быть, поэтому "z-index:2" и "position: absolute;"
Для IE (IE не умеет :hover на <a> без href) Javascript'ом меняется класс <a> на 'hover' — так что в IE тоже работает.
Как сделать и для FF 1.5?

banderon

overflow: auto;

Убери, если не критично. В Firefox'е тогда заработает.
Если же overflow: auto очень критично, то придется думать...
Могу лишь извратный вариант предложить для Firefox, остальных браузеров нет под рукой, но скорее всего IE не будет пахать

<html>

    <head>

        <title>Test</title>

        <style type="text/css">

div.x {

    display: inline;

    position : absolute;

    z-index: 2;

    border: 1px solid blue;

    background-color : #FAFAFA;

    margin-top: 10px;

    padding: 0px;

    overflow: auto;

    cursor: default;

    }

div.x div {

    display: table-row;

    }

div.x div a {

    margin: 1px;

    border: 1px solid #FAFAFA;

    display: block;

    padding-left: 3px;

    padding-right: 3px;

    }



div.x div a.hover, div.x div a:hover {

    background-color : #EFEFEF;

    border: 1px solid blue;

    }

        </style>

    </head>

    <body>

<div class="x">

   <div><a>string1</a></div>

   <div><a>string2</a></div>

   <div><a>long string</a></div>

</div>

    </body>

</html>

Размеры только надо будет подогнать. И наверняка можно как-то проще

PS: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5

pilot

Спасибо.
Решил все же пожертвовать overflow. Буду считать что список все-таки не настолько длинный.

Оставить комментарий