15.05.2009

Трабл с попапом с закругленными уголками поверх селекта в IE6

Уважаемые читатели, помогите кто чем может. (Сами мы не местные.)

Как известно, в IE6 селекты (однострочные и многострочные) всегда поверх любых других элементов на странице. Чтобы это побороть, нужно в вытаскиваемый наверх попап положить iframe, который в IE6 как бы «убивает» под собой селект.

Однако, если у попапа есть закругленные уголки и фон страницы отличный от белого, то возникает проблема. Если закругленный уголок попапа находится над селектом, то там просвечивает цвет фона страницы, а не белый от селекта.

Выглядит это так:

Что происходит:

  • iframe полностью прозрачный {filter: alpha(opacity=0);}
  • он «убивает» под собой селект
  • и начинает просвечивать бекграунд (черный)

Тестовая страница

Кто найдет решение, тому респект и уважуха :)

UPD: в каментах есть решение.

11 комментариев:

Анонимный комментирует...

Что-то я не совсем понял надобность фрейма, ведь для того чтобы перекрыть селект достаточно js-файла который на момент "выведения" popup-a будет скрывать select.

Vii комментирует...

Тут, в том-то и задача, чтобы селект оставался видимым

Artur комментирует...

Это должно помочь
http://www.hedgerwow.com/360/bugs/css-select-free.html
но очень много памяти кушает

ast комментирует...

Напиши кастомный селект, как в gmail :-)

DenisX комментирует...

Artur, там же нет уголков :)

Pavel Volodko комментирует...

Select обрамить чем-нибудь (div-ом например) и прописать у этого div-а белый бэкграунд.
Можно попробовать ещё с фильтрами на select-е поиграться. Может какой и выстрелит...

Степан Резников комментирует...

Спасибо, Pavel! Ваша идея завернуть селект в div и прописать у него белый бэкграунд работает!

На самом деле оказалось достаточно указать у самого селекта background-color: white;

Ура!

Pavel Volodko комментирует...

Всё гениальное - просто.
:)

Вадим Макишвили комментирует...

Павел, Степан, вы задали белый фон селекту и при этом уголки попапа стали белыми и они собой перекрывают текст в селекте? Или уголки стали прозрачными, как и должно быть?

Степан Резников комментирует...

Вадим, да, уголки перекрывают текст в селекте. Конечно, внутренний голос перфекциониста говорит, что надо с этим бороться. С другой стороны, внутренний голос здравого смысла говорит, что можно забить на это и идти заниматься более интересными задачами. Думаю, надо придерживаться некоего компромисса. Конечно, поддерживать IE6 все еще нужно, но совсем не обязательно "пиксел в пиксел". Зачем отдавать лучшие годы жизни уходящему в прошлое недобраузеру? :)

Вадим Макишвили комментирует...

Степан, я на твоей стороне баррикад ;)
Я просто уточнял для себя результат предложенного решения. Конечно, лучше белый уголок, который кстати, может остаться и незамеченным, чем черный, который обязательно стрельнет в глаз.

Степан, спасибо тебе за поднятую проблему.
Павел, спасибо тебе за решение :)