Почему мое меню категории HTML перемещается вправо при расширении подкатегорий?

Я использую виджет jQueryUI для аккордеона, чтобы обеспечить необходимую мне функциональность. Я не так знаком с IE tweaks, поэтому решение ускользает от меня.Почему мое меню категории HTML перемещается вправо при расширении подкатегорий?

Если вы посетите мой test site, попробуйте расширить категории с помощью современного браузера, такого как Firefox, Opera или Chrome. Он работает по назначению.

Однако при использовании IE8 дерево категорий немного перемещается влево, и между самими категориями существует даже более значительное разделение.

Что я могу сделать, чтобы исправить это плохое поведение?

(. Примечание: Забудьте о поддержке IE6,7, он просто должен работать, а не выглядеть довольно) ширина

источник

2012-02-15 Only Bolivian Here

На боковой ноте. В FF есть явная ошибка (для всех браузеров). Нажмите на значок «CCTV» «+». Это расширяет некоторые категории, такие как «Камеры» и «DVR». Теперь нажмите значок «+» для любой категории, например «Камеры». Иконка «CCTV» «-» вернется к значку «+». Это может быть или не быть связано с вашей проблемой IE 8, но если этот значок «+»/«-» сбрасывается, возможно, что какой-то тег класса CSS обновляется, что вызывает проблему IE. – jmbertucci

Боковое примечание 2. Ваши IE-ошибки IE9 тоже. Это действительно выглядит как проблема CSS. Ваш список переместится на первый клик, поэтому мое примечание, скорее всего, не является виновником. – jmbertucci

Но пока это влияет только на IE. Любая идея почему? Или, может быть, вы можете предложить более чистый способ достичь этой же функциональности списка с помощью разных HTML и CSS? Я открыт для любых предложений. :) Спасибо! –

удалить из категории класса, пытались в ie8 и проблема исчезнет

источник

2012-02-15 22:13:58 Yucel

Вы плохо сформированная разметка HTML5. Возможно, это не поможет. Количество элементов списка у вас действительно длинное, поэтому я просто дам снипп.

<div class="widget-box"> 
    <h1>MENÚ PRODUCTOS</h1> 
    <div class="content"> 
     <div class="categories"> 
      <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/66">CCTV</a><p class="subtext">Circuito cerrado de televisi&#243;n </p></h3> 
      <div> 
       <ul> 
        <div class="categories"> 
         <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/74">Camaras</a><p class="subtext"></p></h3> 
         <div> 
          <ul> 
           <div class="categories"> 
            <h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3> 
            <div> 
             <ul></ul> 
            </div> 
           </div> 
           <div class="categories"> 
            <h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3> 
            <div> 
             <ul></ul> 
            </div> 
           </div>

На 7-й и 11-й линии выше, у вас есть теги UL, а затем продолжить использовать DIV-теги. В тегах UL могут быть только элементы LI в качестве ребенка на W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html

Я думаю, что ваш HTML может быть ближе к этому:

<div class="widget-box"> 
    <h1>MENÚ PRODUCTOS</h1> 
    <div class="content"> 
     <ul> 
     <li> 
      <h3><a href="#">CCTV <b>Circuito cerrado de televisi&#243;n</b></a></h3> 
      <ul> 
      <li> 
       <h3><a href="#">Camaras</a></h3> 
       <ul> 
       <li><a href="#">Camaras Infrarrojas</a></li> 
       <li><a href="#">Profesional</a></li> 
       </ul> 
      </li>

Хотя, наверное, лучше семантическое использование тегов возможно, чем то, что у меня здесь.

Затем вы можете добавить небольшое дополнение слева от своего тега H3> и использовать +/- gif в качестве фонового изображения, которое можно поменять с помощью класса CSS. Это сделает обмен реальным прямо в jQuery, чтобы просто переключить выбранный класс привязки. Это поможет решить предыдущую ошибку, о которой я упоминал.

Надеюсь, это немного помогает, поскольку у Юселя есть решение для другой проблемы, но может возникнуть проблема с проблемами HTML.

Cheers!

источник

2012-02-15 22:37:27 jmbertucci

Я очень ценю это. :) –

Почему мое меню категории HTML перемещается вправо при расширении подкатегорий?

ответ

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