Проблема с селектором

[Trust]

Значит вот какая штука: у меня стоит селектор first-letter для тега h1. Шапка: я пишу в <h1> сам заголовок и под ним ещё слоган.

Задумка такая: у самого заголовка первая буква подкрашена другим цветом (благодаря селектору), под заголовком идёт слоган (между ними расстояние около 5px). Всё бы ничего, да когда прописываю у h1 line-height в IE первая буква заголовка зачем-то поднимается вверх.

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

Извините за сумбур, но мыслить уже нормально не могу, вроде всё просто, но убил на эту фигню кучу времени.

Код:

<div style="width:300px;height:100px; margin-top:55px; margin-left:30px">
<div style="float:left; height:100px; width:100px"><img src="картинка" border="0" align="left" /></div>

<div style="float:left; width:200px; height:20px; margin-top:10px"><h1 style="margin:0; padding:0; font-size:20px; font-weight:lighter">Заголовок</h1></div>
<span style="margin:0; font-size:11px !important; padding:0">слоган</span>
</div>

и селектор:

H1:first-letter {
	color:#2989b6;
	margin:0;
	padding:0;
	height:15px
}

Edited February 5, 2009 by Trust

[Vlad]

А зачем вообще line-height для h1? Расстоянием проще управлять через margin-top: -10px, добавляя к стилю слогана. Только span надо на div поменять, а то ничего не получится. Вместо -10px надо нужное значение, конечно же подставить, опытным путем подбери.

[Trust]

Влад, спасибо большое. Никогда бы не додумался. Работает в ie6, opera (последнее обновление) и ff.