для того чтобы убрать в Google Chrome бордер у элемента input с типом search в css необходимо прописать для этого элемента правило
-webkit-appearance: none;

довольно часто беру заказы на верстку email рассылок.
Ниже список особенностей которые нужно учесть при выполнении таких заказов, а также делюсь небольшим скриптом для тестирования email рассылок.

0. Письма делаем в text/html
1. Кодировка. Оптимальный вариант utf-8 но не для аутлука, поэтому берем windows-1251.
2. Вспоминаем HTML 3.2 верстаем в нем, css вырезается почтовиками Яндекса , Маил ру и Рамблера.
3. При форматировании кода отказываемся от табуляции (табуляция = глюкам в Яндексе и Маил ру)
4. Не используем фоновые картинки, нужно чтото красивое вставляем его картинкой как есть, это же относится к тексту на красивом фоне, все картинкой. Outlook 2007 не дает использовать фоновые картинки.
5. Верстаем преимущественно табблицами.
6. Отступ в Gmail у картинок снизу, примерно 3 пикселя, фиксится прописыванием у картинки style=»display:block»
7. Картинки не ресайзим, используем ширину и высоту как есть у оригинала

В качестве бонуса скрипт для тестирования email рассылок

использует класс phpmailer

как правило в email рассылках картинки лежат где-то на сервере и при получении письма подгружаются по указанным урл

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

соответственно в верстке нужно использовать не полные пути а относительные

/*наша рассылка*/
$message = file_get_contents('index.html');
include '../phpmailer/class.phpmailer.php';
$mail = new PHPMailer();
$mail->IsHTML(1);
$mail->CharSet="windows-1251";
/*от кого*/
$mail->SetFrom('noreply@saintist.ru' , 'subscribe');
/*кому*/
$mail->AddAddress('email1@saintist.ru', "John Doe");
$mail->AddAddress('email2@saintist.ru', "John Doe");
$mail->AddAddress('email3@saintist.ru', "John Doe");
/*ntvf*/
$mail->Subject = "Subscribe";
/*из верстки дергаем все картинки и упаковываем в письмо*/
preg_match_all('//i',$message, $images);

  foreach($images[1] as $k=>$v)
  {
  	$mail->AddEmbeddedImage(basename($v), 'mail-img-'.$k, basename($v));
  	$message=str_replace(basename($v),'cid:mail-img-'.$k,$message);

  }
$mail->Body =$message;
if(!$mail->Send())
{
    echo "Ошибка отправки письма: " . $mail->ErrorInfo;
}
else
{
     echo "Письмо отправленно!";
}

скрин как выглядит папка с версткой

фиксится этот баг вот каким образом.

в head добавляем код

<!—[if IE]>

<script src=’/js/dropdown_menu_hack.js’></script>
<style type=’text/css’>

.class-select{behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0);}

</style>

<![endif]—>

Скачать dropdown_menu_hack.js

class-select — класс назначенный select который необходимо адекватно выводить

1. Чтобы все красиво выглядело в head добавим тег

<meta http-equiv=»X-UA-Compatible» content=»IE=EmulateIE7″/>

2. Через условные комментарии исключительно для  IE  в head подключаем загрузку js библиотеку от Drew Diller, низкий ему поклон, удружил так удружил, что мы бы делали без него.

<script type=»text/javascript»>
var sukaIE=false;

</script>

<!—[if IE]>
<script type=»text/javascript» src=»DD_roundies_0.0.2a-min.js»></script>

<script type=»text/javascript»>
var sukaIE=true;

DD_roundies.addRule(‘#sidebar-top’, ’16px’);

</script>

<![endif]—>

и все, при загрузку в IE на странице у объекта #sidebar-top уголки станут радиусом 16px, если нужно разные задать размеры скругления то пишем DD_roundies.addRule(‘#sidebar-top’, ’16px 17px 18px 19px’);

еще один момент

скрипты срабатывают у нас при загрузке что делать если контент генерится динамически и нужно как-то отловить IE?

если внимательно посмотреть код то видно что до условных комментариев у меня определяется переменная sukaIE а в условных этой переменной присваивается true, соответственно при создании чего-то через динамику, нужно будет дополнительно проверять эту переменную и у нужных объектов включать через DD_roundies округления в IE уголков

ps: метод несомненно трешевый и уж сильно смахивает на говнокод, что в принципе оно и есть как скажут ранимые натуры)), но в ситуации когда важно время и скорость оправдывает себя, и показывает как отличное решение в битве с IE.

Весь лэйаут должен быть таблицами. При этом, без крайней необходимости — их тоже лучше не использовать. Забываем семантику, сокращенные css-правилах, валидацию, плавающих блоках — и прочее.

При вёрстке html для почтовой рассылки используем приемы 90-ых годов XX века.

layout

лэйаут на таблицах (никакого позиционирования средствами css, никаких float’ов, clear’ов и пр.), mail.ru автоматически добавляет довольно внушительные padding’и для всех td, это надо учитывать (картинка порезана на куски и раскидана по разным ячейкам — добиться их бесшовного соединения будет невозомжно);

css

все стили должны быть инлайновыми (т.е. находиться в атрибутах style):

<div style=»…»>…</div>

padding-left, padding-right

горизонтальные отступы, по идее, делались в былые времена при помощи дополнительных ячеек таблицы… но нормальные веб-сервисы (типа gmail, yandex и rambler) не поймут любимой многими в прошлом конструкции:

<table cellpadding=»0″ cellspacing=»0″ border=»0″ width=»100%»>
<tr>
<td width=»10″ nowrap></td>
<td width=»100%»></td>
<td width=»10″ nowrap></td>
</tr>
</table>

только фиксированные размеры всех ячеек;

Можно для создания левого отступа средствами чистого html использовать соответствующий тэг, имеющий левый отступ «по умолчанию» — dd… но outlook 2007, осуществляющий рендеринг html-страниц при помощи движка от microsoft office word (!), начинает при этом страшно глючить, так что вариант отпадает

padding-top, padding-bottom

для создания вертикальных отступов надо использовать картинки , сделать «пустую» картинку (лучше не 1?1, а хотя бы 10?10, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё нужной высоты формировать соответствующий отступ (также мы помещаем картинку в div, понятно, думаю, зачем):

<div><img src=»padding.png» alt=»" border=»0″ height=»10″></div>

единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами;

font

чтобы поменять гарнитуру/размер/цвет шрифта придётся каждый раз задавать все параметры при помощи архаичного тэга font (каждый раз — вообще для любого текста внутри любых блочных тэгов и все):

<font face=»tahoma,sans-serif» color=»#000000″ size=»2″>текст ссылки</font>

нужно поменять цвет ссылки, тэг font располагаем внутри a;

ссылки

следует не забывать добавлять атрибут target со значением _blank (чтобы ваш сайт не пытался открыться прямо в окне почтового клиента) и если вы привыкли ставить «до поры до времени» в пустые ссылки решетку (#), не удивляйтесь, что gmail и yandex такие ссылки за ссылки не посчитают — проще говоря, следует сразу задавать реальные адреса;

цвета

для того, чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, делаем таблицу, в ней строку, в ней ячейку и для ячейки — атрибут bgcolor, больше вариантов нет… кроме того, при задании любого цвета в шестнадцатеричном формате нельзя использовать сокращенную запись (например, #FFF вместо #FFFFFF) — заданный таким образом цвет автоматически трансформируется в чёрный;

картинки в тексте

В любом самоучителе по html тех времён рассказывалось, как можно сделать обтекание текста вокруг картинки (без всякого css) — при помощи атрибутов тэга img, а именно align, vspace и hspace — воспользоваться этим нам тоже нельзя некоторые почтовые клиенты (и среди них, например, the bat) эти атрибуты проигнорируют, при этом, float:left будет работать в них также криво (или не работать вообще) — вывод: опять спасаемся таблицами;

картинки в оформлении

т.к. в background адреса картинок мы прописывать, фактически, не можем — все оформительские рисунки придётся включать при помощи тэга img и лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных (и непонятных) отступов в том же the bat:

<div style=»line-height:0;»><img src=»border.png» alt=»"></div>

программы и инструментарий

ничего лучше outlook express нет — он позволяет легко создавать html-письма на основе шаблона (Сообщение ? Создать с использованием ? Выбор бланка…)

вот пример верстки в html для email рассылки

смотри код как и что

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

Решение черз iframe:

<div id=”media” style=”position:absolute; left:198px;
top:97px; width:400px; height:106px; z-index:3;”>
<iframe style=”position:absolute; left:0px; top:0px; width:100%;
height:100%; z-index:103;”></iframe>

<div style=”position:relative; left:0px; top:0px; width:300px;
height:400px; z-index:203;background-color: #7777FF;border: 1px solid #000;”></div>
</div>

<select style=”position: relative; left:208px; top:165px; width:200px; display: block;”>
<option. item option</option>
</select>