klierik

Magento

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

qip + antispam

да, а rgba брать с потолка?

Закэшировались что-то, не видны были сразу. Теперь должны быть заметны всем. а что за медальки то?

так он там и стоит как бэ

ух тыж йожег, это на каком языке сказано то о_О

а если будет верстка, то было бы не плохо выкладывать PSD. Ну люблю я 1:1, а для того что бы сделать правильную тень, пришлось раз 10 менять значения что бы получить то что в задании не феншуй, имхо

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

давайте так же будет учитывать что с каждым годом сложность и функциональность макетов растёт, так что в тот момент когда все браузеры и будут 1:1 то сложность будет больше текущей. А соответственно и стоимость работы ниже быть ну никак не может.

положи в TD DIV и на него вешай фон (предарительно задай DIV`у размеры и float)

В общем решение пришлось все таки делать через дополнительный элемент-контейнер, ех CSS: Стили для <input type="text"> /* @group Text field */ .b-text-field { font-size: 12px; font-family: inherit; /* because Firefox */ display: inline-block; height: 23px; width: 200px; padding: 0 0 0 4px; line-height: 21px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #a5acb2; background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, #EAEAEA 0%, #FFFFFF 50%, #FFFFFF 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAEAEA), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* IE10+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAEAEA', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* W3C */ } /* focus and hover view */ .b-text-field:focus, .b-text-field:hover { border-color: #bcd8ea; } /* _default value */ .b-text-field_default_value { color: #999; } /* @end */ /* @group RTL */ .g-rtl .b-text-field { padding: 0 4px 0 0; } /* @end */ /* @group Custom styles */ .mac.chrome .b-text-field { line-height: 23px; } /* @end */ Стили для всей конструкции /* @group Text Field > _advanced */ .b-text-field_advanced { font-style: normal; /* because of opera */ height: 23px; width: 200px; /* default width */ display: inline-block; line-height: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #a5acb2; outline: none; background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, #EAEAEA 0%, #FFFFFF 50%, #FFFFFF 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAEAEA), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* IE10+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAEAEA', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #EAEAEA 0%,#FFFFFF 50%,#FFFFFF 100%); /* W3C */ } .b-text-field_advanced:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* field */ .i-text-field { font-style: normal; display: block; float: none; overflow: hidden; } .i-text-field > .b-text-field { width: 100%; height: 21px; border: 0; outline: none; } /* icons */ .b-text-field_advanced > .b-text-field__icon { display: block; float: right; width: 18px; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; } /* :hover and :focus */ .b-text-field_advanced:hover, .b-text-field_advanced:hover > .b-text-field__icon, .b-text-field_advanced_focus, .b-text-field_advanced_focus > .b-text-field__icon, .b-text-field_advanced_focus > .b-text-field__icon.dropdown { border-color: #bcd8ea; } /* @end */ /* @group RTL */ .g-rtl .b-text-field_advanced > .b-text-field__icon { float: left; } /* @end */ HTML: Обычный text-field <input type="text" class="b-text-field" value="First name" /> Combo-box <i class="b-text-field_advanced b-text-field_combo"> <i class="b-text-field__icon dropdown"></i> <i class="i-text-field"> <i class="b-text-field b-text-field_clone"></i> <input type="text" class="b-text-field" value="Default Combo text" /> </i> </i> извеняюсь за длинный код, но codebox не работает

http://validator.w3.org/#validate_by_input

:rofl:

видать за твои +100500 постов на форуме ;)

в разных элементах интерфейса разные инпуты по ширине.

а никто не говорит про конкретный li. ты посмотри на код внимательно. тебе надо повесить отступ на <span> - а он согласно твоего примера везде есть toisreste,

так, понятно. лови <ul> <li><span style="margin-left:-5px;"></span></li> </ul>

фактически можно сказать (?!) хобби переросло в професию?

конечная цель: ширина, высота изменяемая расположение иконок может быть как справа так и слева, причем может меняться на лету.

отступ и поле - это разные вещи.

угу, уже прочитал на хабре. смешно однако. как такое вообще в печать уходит.

1. http://htmlbook.ru/css/list-style-position 2. поместить содержимое в <span> и придать ему отрицательный отступ слева

rookie, Да, родителю поставил display: table. Пришлось из-за IE mishka, Зато во всех браузерах, кроме chrome, работа элементов получилась ожидаемая. При чем очень даже гибкая и удобная. А вот теперь на флотах придется больше мучатся.

С сайзом и так понятно. А вот с или без display: block инпут все равно не будет тянутся по ширине строки, чего не скажешь про table-cell. Странно это как-то.