Апдейт к оформлению кнопок.

Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: input. Чтобы отличить текстовые поля от кнопок, а также флажков (чекбоксов) и переключателей (радиобаттонов), приходится снабжать их классами или придумывать обёртки (а при такой возможности проще использовать обычный графический <input type="image" />).

Однако по мере ухода со сцены IE6 появилась возможность обойтись без этих ухищрений. Теперь проблему решает селектор атрибута (иначе — селектор по атрибуту). Выглядит он так:

input[type="submit"]{
…
}

Теперь оформление кнопки (на том же примере, что и в прошлый раз) будет выглядеть так:

<form action="">
<fieldset>
<legend>Пример кнопки
<input type="text"/>
<input type="submit" value="Отправить" />
</fieldset>
</form>

<style type="text/css">
  input[type="submit"]{
   width:30px;/*Ширина картинки*/
   height:21px;/*Высота картинки*/
   padding:0 0 0 30px;
   /*Выталкивает надпись с картинки в ИЕ*/
   overflow:hidden;
   /*Обрезает кнопку до указанных размеров*/
   cursor:pointer;
   border:none;
   background:url('button.gif') no-repeat;
   /*Положить картинку фоном*/
   color:transparent;
   /*Надпись на кнопке прозрачна в ФФ и Опере*/
  }
fieldset{
   padding:50px;
   border:2px solid #3a5777;
  }
</style>

И вот результат: Пример. Не работает в IE6, но понимается современными браузерами.

Тем, кто занимается сайтостроем, нередко приходится слышать о кидалах или сталкиваться с ними. Я сама два раза налетала на таких. В других профессиях подобные встречи тоже бывают. И вообще кидалово — настолько древнее дело, что встречается даже в мифах, и даже цари порой бывали в нём замечены. Но расплачиваться за это порой приходилось жёстко.

Троянский царь Лаомедонт обнёс Трою нерушимой стеной. Стену строили боги Посейдон и Аполлон, назначенные на эту работу верховным богом Зевсом за какие-то свои божественные прегрешения. Когда стена была построена, боги захотели получить положенную строителям плату, но Лаомедонт платить не стал и даже пригрозил отрезать им уши; чувствовал он себя очень уверенно, ибо у самого в родне были боги по разным линиям. Однако оскорблённые боги не захотели смириться с кидальством, а за грехи царя пришлось расплачиваться народу: Аполлон наслал на Троаду мор, а Посейдон — страшное морское чудище, опустошавшее окрестности. Читать полностью »

Нашла программку, о которой давно мечтала. Позволяет упорядочить иконки в панели задач простым перетаскиванием. (Говорят, что в Windows7 такая возможность предусмотрена в системе, но я не проверяла.) Долго мечтала о такой возможности, а когда Винда очередной раз взбрыкнула, зачем-то перепутав тщательно расставленные окна (мне удобно, чтобы «вот эти» программы были слева, а «вон те» — справа), я полезла в Гугль. И он помог.

Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »

Ie7 озадачил меня новым глюком. Похоже, что он в странных отношениях со свойством min-height. На сей раз глюк вылез при обтекании картинки текстом, состоящим из абзацев — в ie7 первый абзац стоял столбом и обтекать картинку не желал:

Методом последовательного исключения обнаружилось, что глюк вызывает правило, задающее минимальную высоту абзацам:

#content p{
  min-height:1.2em;
}

(Зачем? Чтобы пустые строки не схлопывались. Мне не нужно, заказчику нужно).

Пришлось специально для седьмого ие сделать min-height:auto, остальное пусть будет на совести его разработчиков. Абзацы встали на место:

Старый полуслепой ИЕ6 таких фортелей не выкидывал. Он был инвалидом, но у его глюков была человеческая логика.

Преамбула: на этой неделе я сподобилась подцепить вирус — из тех, что вешают при загрузке компьютера порнобаннер на пол-экрана и требуют деньги на смс. Увы, Касперский его прошляпил, а мне пришлось бороться с последствиями. Не претендуя на изобретение панацеи, излагаю личный опыт в виде полезных советов. Читать полностью »

6. Твой CSS начинается со строчек * {padding:0; margin:0;}

«16 признаков крутого верстальщика», Максим Покровский

Символ * в css называется универсальным селектором (universal selector). Универсальность состоит в том, что он означает любой элемент: правило, которое начинается с этого селектора, относится ко всем элементам страницы.

Какие объявления стоит и какие не стоит указывать в этом правиле? Например, полезны те, которые приведены в эпиграфе:

*{
margin:0; 
padding:0;
}

Такое правило обнуляет поля и отступы у всех элементов на странице. Полезное правило: у элемента могут быть ненулевые дефолтовые значения, создающие в дальнейшем путаницу. Кстати, они могут быть разными у разных браузеров. Читать полностью »