Ritter

http://jsfiddle.net/9qwr2/1/

Расширенный режим cellspacing тоже не подходит. Так как мне нужно задать между <td>, именно - между. А не еще вокруг. С помощью php добавляются стили к <td>, вот им нужно прописать расстояние.

Не могу добиться расстояния между <td> в таблице. cellspacing не подходит. padding, тоже не подходит, так как идет рамка. Какие варианты еще есть?

Да правильно.

Так и почему не подходит-то? Ну добавляется он и что дальше? Структура же останется нужной. Или вы что-то не договариваете? Не договариваю. Для начала хотел услышать какие бывают варианты. Ширина фиксирована. Изначально я сделал, как описал выше, с помощью overflow:hidden, забыл что решение мне не подойдет. Так как серый квадрат у последнего блока уходит в значение hidden. Серый квадрат представлен как absolute, и вынесен из блока right:-x; Эти 4 блока повторяются ниже.

Зачем мне менять размер окна? Ты написал какую-то хрень. Таким макаром можно сделать даже лучше. прописываем для блока с фиксированной шириной overflow:hidden; дальше пишем еще блок с шириной больше на 30px. в него пишем эти 4 блока, прописывам им float:left;, задаем ширину и делаем отступ справа 30px. Вуаля! Но мне этот вариант не подходит.

Вполне. Этот вариант не подходит, так как эти блоки находятся внутри блока с фиксированной шириной.

Понятно. Значит варианто нет. Жаль...

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

Ка сделать также: Не подходит: overflow, display table и просто table.

Повтор по вертикали (в рамках height).

Почему так не работет repeat? background: url('../image/image.png') 16px 0 repeat; height: 14px; width: 2px; А так работает? background: url('../image/image.png') left top repeat; height: 14px; width: 2px; Как заставить первый вариант работать? В примере имеется ввиду, что при цифрах повтор не работает.

Да вы правильно меня поняли. Смысл тот же.

Даже если как-то через a её сделать, в итоге пр наведени на дочернее меню, картинка у а пропадет. единсвенный спопоб вижу, обнять span-ом (например), т.е.: <li> <span> <a href="#">Женская одежда</a> <div> <ul> <li><a href="#">Платья</a></li> <li><a href="#">Топы</a></li> </ul> </div> <span> <li> но тогда все сделанное рушится.

Либо я дуб, либо вы что не так пишите. Это a:hover {background:url(1.png) no-repeat 100% 0;} накладывается на это li:hover {background:url(1.jpg) no-repeat;} Я не понимаю смысл прозрачности? За рамки li картинка не выходит, а нужно именно чтобы левую картинку дополняла правая.

Какую вторую, у li? Если да, то у li она идет целая, а в зависимости от длины названия, она становится шире - уже.

Такой метод не подходит, так как a(display:block) внутри li, картинка будет накладываться.

div скрытый здесь, а по другому я не знаю как. рисунок у женской одежды (у основных разделов), у "#menu > ul > li"

Сделал выпадающее меню, также при наведении на "Женская одежда", у неё появляется фон рисунком, хочу прилепить еще недостающий рисунок к правой части основного рисунка. Как это сделать? У меня не получается. Меню сделал так: <div id="menu"> <ul> <li> <a href="#">Женская одежда</a> <div> <ul> <li><a href="#">Платья</a></li> <li><a href="#">Топы</a></li> </ul> </div> </li> <li> <a href="#">Мужская одежда</a> <div> <ul> <li><a href="#">Костюмы</a></li> <li><a href="#">Рубашки</a></li> </ul> </div> </li> <li> <a href="#">Детская одежда</a> <div> <ul> <li><a href="#">Шорты</a></li> <li><a href="#">Футболки</a></li> </ul> </div> </li> </ul> </div> CSS: #menu { background: #555555; height: 48px; width: 100%; } #menu ul { list-style: none; width: 1000px; margin: 0 auto; } #menu > ul > li { position: relative; float: left; z-index: 20; } #menu > ul > li:hover { background: url('../image/menu-hover.png') repeat-x; height: 48px; } #menu > ul > li > a { font-size: 12px; color: #FFFFFF; line-height: 14px; text-decoration: none; display: block; padding: 11px 15px 12px 15px; z-index: 6; position: relative;} #menu > ul > li > div { display: none; background: #FFFFFF; position: absolute; z-index: 5; padding: 5px; border: 1px solid #000000; background: url('../image/menu.png'); } #menu > ul > li:hover > div { display: table; } #menu > ul > li > div > ul { display: table-cell; } #menu > ul > li ul + ul { padding-left: 20px; } #menu > ul > li ul > li > a { text-decoration: none; padding: 4px; color: #FFFFFF; display: block; white-space: nowrap; min-width: 120px; } #menu > ul > li ul > li > a:hover { background: #000000; } #menu > ul > li > div > ul > li > a { color: #FFFFFF; }

Нет просто display:block; Спасибо.

Просто такое маловероятно. Сбросьте ссылку посмотреть или jsfidle сделайте пример. Кстати, помимо padding, проставил высосу кнопки, и проблема на компьютере пропала, странно, очень страноо...

Что такая редкая проблема?

В общем есть кнопка с фоном, ссылка обведена рамкой: padding {8px 20px}. В мозилле начиная с версии 4 и по 7-ю отображается по другому, как {9px 20px}. Поставил хак: @-moz-document url-prefix() { padding {7px 20px}. } На компьютере стало нормально, посмотрел с ноутбука (таже винда, таже мозилла), в ней padding {7px 20px} отображается как и есть на самом деле. Проверил в http://browsershots.org отображается также как и на ноутбуке. Где искать косяк?

Мда... Я виноват, в css, в начале вместо html, стояло hmtl. То что я изначально сделал, заработало. Извиняюсь. Пойду отдыхать.

Почитал... Не один метод не помог. Работает только в том случае, если у блоков с float стоит фиксированная высота...