tyaps_asp, posts by tag: html - LiveJournal (original) (raw)

Border-radius and gradient IE9 [Sep. 1st, 2011|12:46 pm]Программирование в ASP.Net
[**Tags**|css, html]Юзая HTML5 фичи, наткнулся на то, что IE9 не умеет вместе делать border-radius и градиентную заливку..button1{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfeff', endColorstr='#9bb2bb') !important; background: -webkit-gradient(linear, left top, left bottom, from(rgb(252,254,255)), to(rgb(155,178,187))) !important; background: -moz-linear-gradient(top, rgb(252,254,255), rgb(155,178,187)) !important; background-image: -o-linear-gradient(rgb(252,254,255),rgb(155,178,187)) !important; border:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }* This source code was highlighted with Source Code Highlighter.Решение в том, чтобы создать маленький градиентный png, перевести его в data URI (с помощью, например, http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ ) и загнать в такой стиль:.button2{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border:0; background-color: #5a5; background-image: url(data:image/png;base64,iVBORw0KGgANSUhEUgAAAB..много_буков..ElFTkSuQmCC); background-size: 100% 100%;}* This source code was highlighted with Source Code Highlighter.(найдено здесь http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding)
link post comment
Когда внутренний контент наезжает на закругленный бордер [Aug. 25th, 2011|06:21 pm]Программирование в ASP.Net
[**Tags**|css, html, ершик]Замечательные border-radius и box-shadow убиваются, если содержимое закругленного контейнера имеет собственный background-color. Особенно прикольно, если внутри закругленного дива со скроллом - полосатый список ul. Тогда при промотке списка полосы, выделенные цветом, "отмигивают" на закругленных уголках.Однако при заданном background-image вместо background-color такой фигни не происходит. Поэтому, как вариант, можно заливать полоски однопиксельными картинками, нежели ставить background-color - и будет все ОК.
link post comment
Как сделать padding в option [Aug. 17th, 2011|04:23 pm]Программирование в ASP.Net
[**Tags**|css, html, javascript]Да никак. (padding для option-ов поддерживает только FF)В итоге вставляем в текст пробелы.С javascript / jquery это можно сделать такvar emulatePaddingSymbol = '\u00A0'; realSelect.find("option").each(function () {$(this).text(emulatePaddingSymbol + $(this).text());});
link post comment
Когда в IE6 select виден сквозь нависшее меню div position:absolute [Feb. 4th, 2011|04:04 pm]Программирование в ASP.Net
[**Tags**|css, html, ie]В IE6 если делать div position:absolute и этот div попадает сверху на select, то select виден сквозь div. (вот засада!) Следующее решение доступно в инете. (краткий пересказ, опробовано на себе)Нужно под div положить iframe, который как раз будет перекрывать эти select-ы.< iframe scrolling="no" frameborder="0" style="position:absolute;width:100px;height:100px;top:10px;left:10px;border:none;display:block;z-index:0;" >< /iframe >< div style="position:absolute;width:100px;height:100px;top:10px;left:10px;border:none;display:block;z-index:10; ">Здесь меню< /div >
link post comment
Icons for web development [Jan. 18th, 2011|11:39 am]Программирование в ASP.Net
[**Tags**|css, html]Часто мы ищем иконки для стандартных действий на веб-страницах.Вот, один добрый человек поделился ссылкой, и я решил тоже ее запостить, чтоб потом 10 раз не искать.http://webdesignledger.com/freebies/20-excellent-icon-sets-for-application-design
link 1 comment|post comment
IE tr display none - javascript [Jun. 22nd, 2010|11:37 pm]Программирование в ASP.Net
[**Tags**|css, html, ie, javascript, jquery]Во всех браузерах сделать tr невидимым через javascript можно просто, указав display:none для этого. Но IE хочет большего. Нужно делать display:none также для td и th этой tr-строки, иначе вылезают какие-то черточки, фрагменты содержимого и прочая нечисть.Благо jquery с этим удобно справится.$('.ip_row, .ip_row td, .ip_row th').css('display','');
link post comment
Opacity кроссбраузерный [Jun. 22nd, 2010|12:49 pm]Программирование в ASP.Net
[**Tags**|css, html](Напоминалка) Просто в css-стиле/* для не IE*/opacity:.9;/* для IE*/filter: alpha(opacity = 90);
link post comment
DOCTYPE [Aug. 28th, 2009|03:11 pm]Программирование в ASP.Net
[**Tags**|html]Простецкий вопрос о том, как прилепить футер к низу страницы, [правда в некоторой хитрой вариации], (который описан в интернете везде), отнял пол-дня. На тестовой html-страничке все ОК, а в .aspx - отстой. А потому что<-!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"->Подробнее про это дело можно почитать, например, тутРаньше как-то не цеплялся я за мысль о том, что какая-то "ненужная мета-строчка" влияет на отображение html кода браузером. Поэтому при поиске примеров верстки обращаем внимание на doctype. Век живи...
link post comment
Несколько css-классов [Jun. 5th, 2008|04:34 pm]Программирование в ASP.Net
[**Tags**|css, html]А я и не подозревал, что можно делать так <-table class="t1 t2"->Применяются оба стиля. Если в каких-то параметрах они разнятся, то применяется параметр из класса, который последний(нижний) в файле. (По крайней мере в IE)."t1 t2" идентично "t2 t1".Разница в том<-style type="css/text"->.a {font-size:10pt}.b {font-size:20pt}<-/style->или <-style type="css/text"->.b {font-size:20pt}.a {font-size:10pt}<-/style->
link 2 comments|post comment
HTML-разметка. Обращаем внимание. [May. 18th, 2008|12:19 am]Программирование в ASP.Net
[**Tags**|html]В IE относительно других браузеров это реже бывает, но иногда портит жизнь.Разметка <-tr-><-td-><-img-><-/td-><-/tr-> не то же самое, что и <-tr-><-td-><-img-> <-/td-><-/tr->Пробел или пернос строки влияет на рендеринг, поскольку единичный пробел воспринимается как реальный символ пробела. Важно не забывать про это при формировании HTML-кода, когда какие-то строчки хочется для удобства восприятия куда-то подвинуть (а при переносе строки редактор часто заполняет место пробелами).Опять же сравнить<-tr-><-td-><-img-><-/td-><-/tr->и <-tr-> <-td-> <-img-> <-/td-><-/tr->(Upd:)
link 2 comments|post comment