Вертикальное центрирование многострочного текста

Читая свои RSS подписки, напоролся на статью о вертикальном центрировании многострочного текста. До этого у меня был проект в котором я решал эту проблему. Почитав оказалось не все в шоколаде, IE6 и IE7 опять показали характер. Сразу понял — статья бесполезна. Есть повод поделиться своим решением проблемы.

Помимо всего мне пришлось весь этот текст выводить как ссылку с меняющимся фоном при наведении.

HTML:

<div class="menu_box"><a href="#">Многострочный текст</a></div>

CSS:

.menu_box {
	background: url(vertically-center-multi-lined-text/menu-bg.jpg) 0 0 no-repeat;
	display: table-cell;
	height: 65px;
	vertical-align: middle;
	width: 178px;}
.menu_box:hover {background: url(vertically-center-multi-lined-text/menu-bg-hover.jpg) 0 0 no-repeat;}
	.menu_box a {
		color: #3d3d3d;
		display: block;
		font: 10px Tahoma, Geneva, sans-serif;
		padding: 10px 40px;
		text-decoration: none;
		margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
	.menu_box:hover a {color: #fff;}

Все работает классно, но в IE не меняется фон. Для этого уже давно припасено решение:

<!--[if lt IE 8]>
<script type="text/javascript" src="http://www.easylife.by/example/IE8.js"></script>
<![endif]-->

Единственный недостаток — область ссылки.

Пример.