VPF::Кликабельность ссылки в IE - Форум программистов

Munya

Дата 8.1.2009, 18:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 15.2.2007

Репутация: нет
Всего: нет

итак, имеем следующее:

Код


     .actionMenu {
            border:1px solid #aaaaaa;
            display: block;
            position: absolute;        
            width: auto;
         background: #fff;
            float: right;            
        }
        .actionDropdown ul {
         border: #808080 13px solid;
         padding: 0px;
        margin: 0px;
        }
        .actionDropdown ul li {
            border: #ff0000 2px solid;
            position: relative;                
            display: block;
            background: #00ffff;    
        }
        .actionDropdown ul li a {
            border: #ff00ff 1px dashed;    
            background: #00ff00;
            width:expression(Math.floor(parentNode.offsetWidth)+'px');
            display:block;
            text-decoration:none;
            margin:8px
        }

Код

  

    <div id="FavIntPointMenu" class="actionMenu open" style="float:rig">
        <a href="">Actions</a> 
        <div class="actionDropdown">
            <ul>
                <li><a href="">View</a> </li>
                <li><a href="">Edit</a> </li>
                <li><a href="">Remove from Favorites</a> </li>
                <li><a onclick="deleteIntegration(''); return false" href="">Delete</a> </li>
             </ul>
         </div>
    </div>

Проблема: ссылки (зеленый бекграунд) в IE7 кликабельны только по ширине текста, необходимо по ширине li-элемента,

решение этой проблемы для FF нашел при помощи display:block, ослик же нивкакую.
порывшись здесь нашел решение похожей проблемы с помощью принудительного задания ширины ссылки

width:expression(Math.floor(parentNode.offsetWidth)+'px');

Данный пример работает, но только при абсолюте.
В моем же случае данное меню должно быть привязано слева float`ом, при этом IE7 вычисляет значение expression равным около 12 тысяч. (эффект достигается убрав position: absolute; )

FF справляется нормально.

bars80080

Дата 8.1.2009, 19:22 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

можно поназадавать a, li, ul ширину 100% и display: block; и посмотреть что получится.

Munya

Дата 8.1.2009, 19:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 15.2.2007

Репутация: нет
Всего: нет

можно,

только не работает

Wolf1994

Дата 8.1.2009, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 1
Всего: 29

Поставьте "onclick" на "li".

bars80080

Дата 8.1.2009, 20:48 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ещё можно подумать о том, чтобы вообще выкинуть ul и li, как излишние элементы и задать ссылке блочность и 100% ширину

если не получится, значит всё портит float, надо будет думать о нём

webster

Дата 8.1.2009, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Или для:

Код


.actionDropdown ul li a {
float: left;
width: 100%;
....
}

Munya

Дата 9.1.2009, 13:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 15.2.2007

Репутация: нет
Всего: нет

Цитата

ещё можно подумать о том, чтобы вообще выкинуть ul и li, как излишние элементы и задать ссылке блочность и 100% ширину

все бы ничего, но структуру менять не могу smile

Решение найдено, - необходимо задать

.actionDropdown ul li a { width:auto}

при этом ширин родителя должна быть тоже auto.

(приведу стили, может кто потом искать будет)

Код


actionMenu {
            border:1px solid #aaaaaa;            
        background: #fff;
            float: right;            
        }
        .actionDropdown ul {
         border: #808080 13px solid;
         padding: 0px;
        margin: 0px;            
        }
        .actionDropdown ul li {
        border: #ff0000 2px solid;            
        background: #00ffff;               
        }
        .actionDropdown ul li a {
       border: #ff00ff 1px dashed;    
       background: #00ff00;
       width:auto;                 
       display:block;
       text-decoration:none;
       margin:8px
        }

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »