горизонтальное (боковое) расширение меню с использованием HTML и CSS в IE6

Question

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

в коде, я использую background-position:left для одного деленияи background-position:right для следующего внутреннего деления.

работает нормально во всех браузерах, кроме IE6 ... так как IE6 не поддерживает background-position:left

Мне нужно то же самое для работы в IE6, так какну ... например, верхнее меню здесь .

мне нужно кодировать по-другому ??

Answer 1

У многих людей возникают проблемы при попытке заставить код работать правильно в IE6.Если вам это не нужно, я бы рекомендовал не пытаться, так как это очень сложно.

Если вы собираетесь продолжить, я рекомендую создать другую версию веб-сайта, совместимую с IE6, используя другой файл CSS только для IE6.См. Ссылку ниже.

http://www.quirksmode.org/css/condcom.html

Также это очень удобно для работы с причудами IE6

http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Answer 2

Это может быть переусердствовать ... но, по словам netrenderer, оно работает до 5,5

http://photoshopmesta.net/1/test.html

CSS:

.left { 
    width: 25px;
    height: 46px;
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_left.png);
    background-position: top left;
    background-repeat: no-repeat;
    float: left;
}

.middle {
    height: 46px;
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
    background-position: top left;
    background-repeat: repeat-x;
    float: left;
}
.middle span {   
    font-family: Arial;
    font-size: 12px;
    color: #ffffff;
    padding: 19px 20px 10px 20px;
    float: left;
}

.right {
    width: 40px;
    height: 46px;
    background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
    background-position: top right;
    background-repeat: no-repeat;
    float: left;
}

HTML:

<span class="left"></span> 
<span class="middle"> 
    <span>Lorem ipsum</span> 
</span> 
<span class="right"></span> 

Answer 3

Попробуйте использовать расширенную форму:

#something{
    background-position: left center;
}

Ad @ m