only_dimon

Доброго времени суток уважаемые форумчане. Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки. Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода. 1. Кнопка Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот Попытки: a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста. б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой). c) Реализовать <span class="button_green"><input type="button" class="action" /><span class="text">Перенесите меня обратно</span><span class="bg"></span></span> .action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10 .text - текст с тенью c z-index: 5 .bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1 Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка. Но! Проблема в реализации ховеров, эктивов и фокусов. .button_green .action:hover + .text + .bg {} не работает нигде .button_green:hover .bg {} не работает в IE, так как .action закрывает собой родителя полностью Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил. 2. input[type=text], input[type=password] Условия: текст с тенью в IE. Скриншот Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS? Заранее спасибо за ответы.

Ясно, спасибо. Убил еще пару часов на поиски аналогов flush space для html, но так и не нашел ничего.

То бишь без display: table / table-row / table-cell не выйдет? При использовании этих свойств, вы совершенно правы, код от табличного ничем не отличается. В том и дело, что ищу способ научить дивы поведению табличных элементов без описанных выше свойств. Ячейки таблицы автоматически высчитывают ширину по какой-то мне неведомой формуле. Интересует, есть ли способ сэмулировать этот расчет ширины.

Дивами не будет заполнения по ширине родителя. И немного не так вы код написали. <div class="table"> <div class="table-cell">data</div> </div> <table role="presentation"> <tr> <td> <div class="content">data</div> </td> </tr> </table> По мне - сильно отличаются.

А разве сайт с большим количеством оберток и таблицами не хуже индексируется поисковыми системами? Поправьте меня, если я заблуждаюсь. P.S. Зачем Вы злитесь. Когда возникает техническое противоречие надо стараться искать способ, который не требует компромиссов. В данном случае, не важно с какой стороны: соответствия дизайну, отказоустойчивости, скорости, удобочитаемости кода и индексации. Меня вот проблема эта давно мучает. Идеального решения так и не нашел. Вот и решил обратиться к сообществу. Если здесь ответа не найду, ну что ж, придется идти на компромиссы. P.P.S Плохо, когда отключенный JS ломает верстку или нарушает функциональность. При грамотном greaceful degradation можно так сверстать, чтобы и без вертикального выравнивания при отключении JS нормально выглядело. На функциональность эта оформительская вещь вообще не влияет.

Да, именно поэтому первый пункт тоже включил, как не решенный окончательно. Посмотрите вот этот пример в FF http://jsfiddle.net/only_dimon/KSwA2/2/ Чтобы сделать выравнивание выпадающего списка относительно родителя, придется помещать еще div в каждую ячейку, а в этом диве еще <a> для перехода к страницам. Получаем лесенку table-tbody-tr-td-div-a. Не очень мне такое нравится. Если способов эмулировать таблицу чистым CSS не существует, тыкнете носом, пожалуйста, в источник

Доброго времени суток. Объектом моих неоднократных мучений является эмуляция таблицы. (важно! не использовать JS) Зачем мне так нужна таблица? 1. Вертикальное выравнивание, когда высота выравниваемого объекта неизвестна. (то есть трюк с отрицательным margin-top не пройдет) 2. Вот такое меню с гибким составом элементов: http://screenshot.su...b9d38b5d5e9.jpg (растягивающееся на всю ширину сайта меню, размеры элементов зависят от размера контента). С первым кое-как разобраться можно. display: table-cell и expression для IE lt 9. Со вторым проблемы. При верстке дивами, размер блока (float или inline-block) будет равен размеру контента, но не более. Таким образом у меня элементы всю область h-menu не заполнят. Когда набор элементов меню гибкий, прописывать паддинг или задавать точные размеры блокам, тоже не покатит. Процентная ширина элементов не будет зависеть от контента элемента. В случае с таблицей ширина элементов table-cell растягивается относительно своего контента так, чтобы заполнить всего родителя. Буду очень признателен, если тыкнете носом в инфу, почему так происходит и как это поведение без js и без table-cell эмулировать. (table-cell не хочу использовать, так как возникают траблы с раскрывающимся css меню. в FF, например, для table-cell позиция не работает как надо) Вот фиддл http://jsfiddle.net/only_dimon/KSwA2/ Нужно сделать так, чтобы элементы заполнили всю черную область (родителя), были разного размера в зависимости от размера содержимого (текста) и, чтобы выпадающее меню в FireFox могло выравниваться относительно родителя. Спасибо всем, кто просветит меня в этом вопросе. P.S. JS не подходит еще и потому, что неверно рассчитывает размер элементов, когда шрифт нестандартный подключается. Шрифт подгрузиться не успевает до запуска скрипта.

Простите за резкость, но читал я и именно это, и десяток похожих статей. Прекрасно знаю, что важен z-index родителя и должно быть задано position. И чем же это моему случаю помогает? Пробовал для li и для a задавать position и z-index больше, чем у ul. Ничего не помогает. Если задать ul бэкграунд, становится видно, что он ниже, чем li и a. Они его фоном не перекрываются. Без фильтра тени - все работает. В ie7 (который в статье) - все нормально. Так при чем тут статья про z-index, которую вы скинули? Не сидел бы часами над этой траблой, не писал бы на форум (снова простите за резкость). Здесь конкретно глюк только с IE8 и при использовании тени.

Доброго времени суток всем! Столкнулся с проблемой, с бубном танцевал, гуглил, но решения так и не нашел. Надеюсь на помощь. Есть попап-менюшка. Появляется ul. К нему я применил фильтр Shadow и тотчас в IE8 перестал работать hover для il. Пробовал для a hover - тоже не видит. Как оказалось после часов упорного тестирования, если вести мышью от элемента с большим, чем у ul z-index'ом, и навести на li - hover работает. Вот я и стал очень озадачен. Ниже код: <div id="add_panel"><a class="add active" href="#"></a> <ul id="popup-add"> <li><a href="#">Категорию</a></li> <li><a href="#">Товар</a></li> </ul> </div> и css для IE: #add_panel .add.active{ width: 16px; height: 16px; background: url(../images/icons.png) 0 -20px; display: block; margin: 12px 0 0 12px; z-index: 65; } #popup-add { filter: progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=45, Strength=10) progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=135, Strength=10) progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=225, Strength=10) progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=315, Strength=10); top: 46px; left: -2px; zoom: 1; z-index: 60; } #popup-add li { width: 150px; background: #fff; } #popup-add li a { color: #0097F8; padding: 0 0 0 10px; width: 150px; } #popup-add li a:hover { color: #FFF; } Если вести мышью с блока .add, hover работает. Заранее спасибо за помощь! P.S. В IE7 работает.