Неправильное значение outerWidth()

[Nilagor]

Всем привет! Столкнулся с довольно странной вещью.
Есть примерно такой код html:

<ul id="cats">
	<li>
		<a href="#" class="one-cat-img"><img src="content/site/images/fake/cats/1.png" alt="@item.Link"></a>
		<a href="#" class="one-cat-title">Заголовок</a>
		<ul class="one-cat-menu">
			<li><a href="#">Пункт 1</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="one-cat-img"><img src="content/site/images/fake/cats/2.png" alt="@item.Link"></a>
		<a href="#" class="one-cat-title">Заголовок подлиннее</a>
		<ul class="one-cat-menu">
			<li><a href="#">Пункт 1</a></li>
			<li><a href="#">Пункт 2</a></li>
			<li><a href="#">Пункт 3</a></li>
		</ul>
	</li>
</ul>

ul#cats li имеют display: inline-block. Картинка, заголовок и подменю расположены в столбец друг за другом. Заголовок должен быть одной строкой и под его ширину должен подстроится весь li. Отчаялся сделать это средствами css и решил сделать простенький скриптик:

if ($('#cats > li').length > 0) {
	$('#cats > li').each(function () {
		var wid = $(this).find('.one-cat-title').outerWidth(true);
		console.log(wid);
		$(this).width(wid);
	});
}

И вот здесь возникла проблема - то что выводится в консоль не соответствует реальности и у каждого заголовка своя погрешность.
При этом если в консоли написать что-то типа:

$('#cats .one-cat-title').outerWidth()

То значение выводится верное. В чём косяк?
Да, на заголовке висит левый шрифт, подключённый через font-face, это может как-то повлиять?
Помогите, кто чем может, пожалуйста)

[Rise]

<style> a { display: block; } </style>

[Nilagor]

<style> a { display: block; } </style>

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

display: inline-block;

что бы ширина зависела от содержимого

[ksa]

Отчаялся сделать это средствами css

Для помощи с внешними видами нужно делать полные тестовые примеры с картинками, текстами и пр. атрибутикой.
При том желательно показать итоговую картинку, которую стремишся повторить...

Иначе х/з что тебе подсказать.

[Nilagor]

Для помощи с внешними видами нужно делать полные тестовые примеры с картинками, текстами и пр. атрибутикой.
При том желательно показать итоговую картинку, которую стремишся повторить...

Иначе х/з что тебе подсказать.

Помощь с внешними видами мне не нужна) Вопрос именно в неверном поведении outerWidth().
Однако продвижение есть - через фонт-фэйс подключено несколько начертаний одного шрифта. Стандартное прописано у body, а у заголовков своё.
Так вот outerWidth() выдавал значение ширины со стандартным font-face-ом, то ли не успевая подключить другой, то ли игнорируя его. Запуск скрипта от $(window).load() проблему не решил.