css, неупорядоченный список не отображает значок в нужном месте
Вопрос
Я очень расстроен этим.Несколько недель назад у меня все заработало как в Firefox, так и в порядке.Вернулся сегодня, чтобы провести небольшое тестирование, и обнаружил проблему с отображением в Firefox, я искал код, но ничего не нашел.Мне могли бы пригодиться несколько советов от любого желающего, я уверен, что смотрю не на те вещи.Я обновил свою версию Firefox, но мне кажется, что мой код сломан, а не Firefox.Я предполагаю, что проблема где-то в моем CSS-файле, но я не уверен.
Вот что я подтвердил на данный момент.Кажется, в других файлах CSS нет конфликтов с <ul> или <li>, которые могут переопределять настройки.Другое подтверждение: это отлично работает в Internet Explorer... следовательно, я, должно быть, идиот, потому что обычно бывает наоборот (работает в FF, но не работает в IE).
Вот как это выглядит в IE (обратите внимание на положение значка папки рядом с текстом):
альтернативный текст http://www.redsandstech.com/ie_works.jpg
Вот как это выглядит в FF (обратите внимание, что значок папки не опускается вниз вместе с соответствующим текстом).
альтернативный текст http://www.redsandstech.com/ff_broken.jpg
Вот неупорядоченный список:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Вот CSS, который используется для всего меню:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
Решение
Вы столкнулись с одним из самых больших и самых неприятных различий CSS между IE и другими браузерами.
Мой совет — использовать таблицу стилей сброса и стилизовать значки деревьев в качестве фоновых изображений их контейнеров.
Например, один из элементов вашего дерева может быть
<div class="folder">This is a folder</div>
и иметь следующий CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
Я делаю такие вещи всегда используя DIV, а не комбинации UL>LI.ЮММВ.Вы можете сделать то же самое с UL>LI, но мне не нравятся различия в том, где размещаются маркеры и т. д., и если вы все равно используете таблицу стилей сброса, вы просто преобразуете контейнеры LI во что-то похожее на DIV. в любом случае.
Другие советы
Ваша разметка имеет некоторые ошибки, поэтому он находится в решающем браузере, как генерировать DOM.
ul
может только иметь li
Как ребенок, не div
или другие ul
. Отказ Исправьте разметку и посмотрите, что произойдет.
У меня проблемы с Firefox, когда я использую переполнение: скрыто в моих списках. Попробуйте вынуть переполнение: скрыто и посмотреть, меняет ли это вещи.
Для моей проблемы, если я использую переполнение, скрытую, то это заставляет мои упорядоченные списки не показывать их А., Б., С. или 1. 2., 3. etc ... (превращает его в неупорядоченный список, без пуль)
Не тестировал, но это возможно, возможно, связано с тем, что FF использует маржу для установки знаков пули, пока IE использует прокладку. Или это наоборот? Забыл.