CSS: Div с плавающей точкой в ​​Firefox, но в Safari - нормально - PullRequest
Новая
       20

CSS: Div с плавающей точкой в ​​Firefox, но в Safari - нормально

1 голос
/ 31 октября 2011

У меня есть выпадающее меню, которое появляется при наведении курсора на ячейки в большой таблице на странице.Таблица становится достаточно большой, чтобы клетки могли иногда появляться в дальнем правом углу окна.Наведение курсора на строку показывает меню чуть ниже строки, и оно динамически сдвигается, чтобы оказаться под ячейкой, на которую вы наведите курсор (все через JQuery).Появляется кнопка меню или div заголовка, что вы можете навести курсор мыши, чтобы показать выпадающий список, который представляет собой контейнерный div, который содержит два ul, которые плавают: влево, чтобы они оставались рядом.наведите курсор мыши на ячейку в правой части страницы.Это работает в Safari, в том случае, если выпадающий список находится за пределами окна, ul остается на плаву и удаляется со страницы / окна.Но в Firefox есть разрыв строки / ul теряет свое плавающее число, а второй разрывается на следующую строку, чтобы остаться в окне.

Я пробовал этот хак, но Firefox 7 все еще не нравится: CSS плавает - как мне держать их в одной строке?

Любая помощь очень ценится,Соответствующая разметка / код:

HTML 

<table summary="" class="tbl">
<thead>
<tr>
<th>Select</th>
<th>Employee<br>ID</th>
<th>Position Title</th>
<th>Job Code</th>
<th>Name</th>
<th>Employee<br>Dept</th>
<th>Organization</th>
<th>Location</th>
<th>FTE</th>
<th>Annualized FTE<br>Base Pay</th>
<th>Performance<br>Rating</th>
<th>Grade</th>
<th>Annualized<br>Base Min</th>
<th>Annualized<br>Base Max</th>
<th>Annualized<br>Compa-ratio</th>
<th>Annualized Range<br>Penetration</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell"><a href="#">Accounting Manager</a></td>
<td class="dataCell"><a href="#">ACC1000</a></td>
<td class="dataCell"><a href="#">Doe, John</a></td>
<td class="dataCell">Accounting</td>
<td class="dataCell"><a href="#">Portland</a></td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell"><a href="#">Accounting Manager</a></td>
<td class="dataCell"><a href="#">ACC1000</a></td>
<td class="dataCell"><a href="#">Doe, John</a></td>
<td class="dataCell">Accounting</td>
<td class="dataCell"><a href="#">Portland</a></td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
</tbody>
</table>

<div id="menu">
<div id="menuHeader"><a href="#">Menu</a></div>
<div id="menuItems">
<ul>
<li><a href="#">Select</a></li>
<li><a href="#">View or Edit</a></li>
<li><a href="#">Assign to Job Markets</a></li>
<li><a href="#">Add a Note</a></li>
<li><a href="#">Delete</a></li>
</ul>
<ul>
<li><a href="#">Select</a></li>
<li><a href="#">View or Edit</a></li>
<li><a href="#">Assign to Job Markets</a></li>
<li><a href="#">Add a Note</a></li>
<li><a href="#">Delete</a></li>
</ul>
<br style="clear: both"/>
</div>
</div>

CSS 

#menu {
position: absolute;
top: 36px;
left: 600px;
display: none;
white-space: nowrap;
}

#menu #menuHeader {
line-height: 24px;
height: 24px;
padding: 0 15px 0 0px;
}

#menu #menuHeader a {
height: 23px;
width: 61px;
margin: 0 58px 0 0;
display: inline-block;
padding: 0 0 0 15px;
}

#menu #menuItems {
border-collapse: collapse;
position: relative;
display: none;
}

#menu #menuItems ul {
float: left;
position: relative;
}

#menu #menuItems li {
display: block;
position: relative;
height: 23px;
line-height: 23px;
}

#menu #menuItems a {
display: block;
position: relative;
padding: 0 15px 0 15px;
}

JQuery 

// row highlighting, menu display (visiblity)
$('tr.dataRow').mouseenter(
function () {
$('div#menu').css('display', 'block');
}
);

// menu offset relative to td hovered
$('td').mouseenter(
function () {
var tempOffset = $(this).offset();
var tempHeight= $(this).outerHeight();
var tempTop = tempOffset.top + tempHeight - 1;
var tempLeft = tempOffset.left;
$('div#menu').offset({top:tempTop, left:tempLeft});
}
);
...