Помогите изменить слайдер изображения с img на li

Question

Я потратил много часов, пытаясь понять, как заставить этот слайдер использовать li с фоновыми изображениями, а не с img.

Причина этого в том, что я собираюсь использовать слайдер для Wordpress и многих других.Темы Wordpress применяют свои собственные свойства CSS к изображениям (например, 'max-width'), которые часто ломают ползунок.Я был бы признателен, если бы кто-нибудь мог проверить следующие сценарии и изменить их для работы с li :) Я пробовал сам, но по какой-то причине все, что он сделал бы, это загрузил бы навсегда, никогда не показывая никаких изображений.это сценарий:

http://pastebin.com/8J9uwRtZ

Тем временем я продолжу пытаться понять это сам.Я был бы признателен, если бы кто-нибудь мог мне помочь.

Вот тестовый сайт с примером слайдера, не работающего с темой 'Thematic', который применяет 'max-width' 100% к изображениям ипример темы, которая не (следовательно, слайдер работает отлично).К сведению, удаление максимальной ширины из «Тематических» и других тем исправляет ползунок каждый раз, так что это определенно проблема;поэтому я хочу использовать li вместо img.

http://www.matthewruddy.com/demo/ <- не работает </p>

http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- работает </p>

БлагодаряЛюбой, кто может помочь!Мэтью.

Answer 1

Как сказал Аконсу, лучше всего применять определенный стиль изображения к классу lof. Стиль по умолчанию, определенный файлом theme.css, применяется только для ... как вы уже догадались ... изображений по умолчанию. Правильное переопределение его в классе lof перезапишет это правило и будет использовать новый стиль. Если ваш браузер, похоже, все еще не подхватывает его, бросьте большой жирный ! Важный в конец правила стиля, и все, кроме IE6, поднимет его просто отлично.

Максимальная ширина применяется только к изображениям без каких-либо других определенных правил, следовательно, «каскадные» таблицы стилей. Правила CSS помечены! Важно, имеют приоритет над другими правилами для того же типа. Обычно в CSS правила работают сверху вниз, поэтому, если вы назначаете новый стиль элементу, который расположен ниже в таблице стилей или во вторичной таблице стилей, более позднее правило будет иметь приоритет. ! важный гарантирует, что это правило имеет приоритет. а именно:

p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }

В любом браузере, кроме IE6, цвет шрифта для всех элементов абзаца будет синим, если ваш тип документа установлен правильно и вы не попадете в режим причуд. Тем не менее, делая что-то вроде этого:

p { color: blue; }
.container p { color: red !important; }

Показывает красный цвет шрифта для всех элементов абзаца только в контейнере, для всех браузеров. Это работает, потому что даже если IE6 не понимает правило! Важный, он все равно полностью понимает правила каскадирования и будет применять стиль на основе того, что было определено в последний раз.

Так что в вашем случае следующее правило работает нормально и исправляет проблемы с отображением в IE:

ul.lof-main-wapper li img { max-width: none !important; }