Вопрос по css, list – Возникли проблемы с абсолютным позиционированием / Z-Index со списками и таблицами в IE 6 и 7

11

Я создаю прототип календаря на основе таблиц CSS / XHTML, который в конечном итоге будет сгенерирован с помощью PHP для системы управления контентом Simple Updates. У меня возникла проблема с использованием абсолютного позиционирования для создания всплывающего окна, которое показывало бы все события за день, когда их больше, чем уместится в ячейке. Проблема может быть замечена здесь:

http://sutest.bravehost.com/

Как вы можете видеть, всплывающее окно появляется под многодневным событием и датой в IE7 и IE6. Помещение z-index во всплывающее окно устранило проблему в Firefox. Я пытался поместить все виды значений z-index во всплывающее окно, изменил свойство отображения всплывающего окна и связанного с ним элемента, а также многие другие различные подходы, но безуспешно.

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

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

Это ячейка таблицы с жестко заданным всплывающим окном. Первый список содержит нормальные, видимые события. Div, содержащий второй div - это всплывающее окно. Это должно отображаться в течение многодневного события:

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

Я использую элементы списка для "подделки" многодневное мероприятие. Ли в этот день стилизован как часть панели, отображаемой во всплывающем окне в IE 6 и 7.

CSS, относящийся к всплывающему окну:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

И на многодневное мероприятие:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

Я пытался решить эту проблему, неоднократно просматривая Google и пробуя другие сайты Q & A.

Любая помощь будет принята с благодарностью!

К вашему сведению: в IE8 тоже самое происходит ... SeanJA

Ваш Ответ

5   ответов
0

поможет ли это, но свойство z-index применяется к позиционированным, относительным, абсолютным, фиксированным элементамhttp://www.w3schools.com/Css/pr_pos_z-index.asp

Изменить: это означает, что элемент li может полностью игнорировать его ...

Error: User Rate Limit Exceeded
2

ирования, такого как PHP, .NET и т. Д.

Вы можете сделать что-то вроде этого:

Подсчитайте общее количество строк в вашей таблице, затем запустите Z-Index с этим итогом, затем уменьшите счетчик до последней строки. При этом ваша первая строка будет иметь самый большой z-индекс, а последняя строка будет ниже.

<table> position relative
<tr> nothing
<td> nothing
<div> position relative
<element position absolute>
</div>
</td></tr></table>

----
Table Loop:

$nZ = count($resource);
foreach($resource as $line) {
 <tr><td>
   <div style="z-index: $nZ">content</div>
 </td></tr>
 $nZ--;  // Decrement nZ
}
----

С тобой!

1

вы захотите попробовать установить z-индекс содержащего элемента. Итак, ваше всплывающее окно будет иметь z-индекс 1 (или 2), а ваш контейнер будет иметь z-индекс 0 (или 1).

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
22

position: relative устанавливает новый стековый контекст z-index внутри относительно позиционированного элемента в IE.

Элементы внутри относительно расположенного элемента будут сложены в соответствии с ихz-index, но при взаимодействии с элементами вне родительского элементаz-index родителя используется. Вот почему всплывающее окно отображается под многодневным элементом события (потому что, хотя здесь нет явногоz-index на элементе, элементы, которые приходят "позже" в документе неявно есть более высокийz-index чем те, что раньше)

Чтобы исправить это, вы можете

Not use position-relative on the cell and position the popup relative to the entire document Give the container <div> a higher z-index than the one later on in the document.

Я обнаружил, что изменениеz-index программно с JavaScript, чтобы быть лучшим, так как он сводит к минимуму странные взаимодействия с остальной частью страницы (т.е. установитьz-index выше, когда он открыт, и сбрасывает его обратно к значению по умолчанию, когда он закрыт)

Некоторые сообщения в блоге, которые говорят об этой проблеме:

http://annevankesteren.nl/2005/06/z-index http://verens.com/archives/2005/07/15/ie-z-index-bug/
Error: User Rate Limit Exceeded
0

обытия и даты, чем z-index во всплывающем элементе div? Кроме того, убедитесь, что любой элемент с атрибутом z-index имеет position: absolute (поэтому, возможно, придется немного поиграть с проблемами компоновки).

Error: User Rate Limit Exceeded

Похожие вопросы