2013-04-23 3 views
-1

мне нужен кусок кода CSS (или коварный хак), который будет определять ширину выпадающего DIV на странице шириной 436 пикселей:Tricky CSS селекторы

http://warehouse.haddrellspoint.com/product/calcutta-can-bottle-coolers-149252-1.htm

(Нажмите «Выбрать параметры» под ценой продукта, чтобы просмотреть проблемный DIV)

Имя класса нарушителя спокойствия DIV - «ddChild». Тем не менее, все объявления CSS, которые я придумал для изменения его ширины, были проигнорированы.

Благодарим за помощь!

+0

Отказ от ответственности: HTML-код этой страницы получен из встроенного шаблона, поэтому я не могу контролировать способ записи и загрузки страницы и поддержки файлов CSS. Я могу написать код CSS в 'override_styles.css' и внутренние таблицы стилей. Я также могу включить HTML и JavaScript в верхний и нижний колонтитулы. – elcucococo

ответ

0

Я играл с вашей страницы. Удаление ширина элементов здесь:

<div id="sevariationlist_child" class="ddChild" style="height: 157px; z-index: 4999; display: block; width: 470px;"> <!--REMOVE WIDTH --> 

и здесь:

.dd .ddChild { 
    background-color: #FFFFFF; 
    border: 1px solid #999999; 
    display: none; 
    margin: 0; 
    overflow-x: hidden !important; 
    overflow-y: auto; 
    position: absolute; 
    width: 336px !important;/*REMOVE THIS*/ 
} 

Затем примените ширину здесь:

.dd .ddChild a.selected { 
    background-color: #999999; 
    color: #FFFFFF; 
    width: 500px; /*Visible width*/ 
} 

Я нашел это с помощью FireBug и изменения CSS там. Если вы еще не используете это, я настоятельно рекомендую его.

+0

RacerNerd, Спасибо! Ваше решение было совершенным. Вы нашли все конфликтующие важные теги и другие заданные ширины. Я смог переписать их в своем коде, и теперь отображается страница, как и предполагалось. Большое вам спасибо за ваше время и силы! :) – elcucococo

+0

Рад помочь. Счастливое кодирование для вас. – RacerNerd

3

Попробуйте это:

#sevarationlist_msdd .ddChild { 
    width:436px !important; 
} 

С селектор идентификатора для родителя будучи более конкретным, он должен переопределить существующий !important ширина набора для 336px (см рисунок ниже). черт возьми, вы даже можете уйти с width:auto !important;, что позволит сэкономить головные боли, если по какой-то причине ширина будет отличаться в будущем.

enter image description here

+1

У меня был тот же ответ, но важно, чтобы это было последнее средство. Узнайте, что задает ширина в вашем JavaScript и исправьте это. – isherwood

+3

бит '! Important' был потому, что в CSS было другое объявление'! Important'. вам нужно будет переопределить (мне тоже это не нравится, но это то, что есть). чтобы показать, что я имею в виду, было добавлено. – PlantTheIdea

+0

PlantTheIdea, отличное предложение, и вы определенно на правильном пути. Я попробовал ваше решение, но, к сожалению, это не сработало. Спасибо! – elcucococo

Смежные вопросы