Паспарту с текстом

[Red_baron]

Здравствуйте! Занимаюсь дизайном собственного сайта об автомобилях (Пример проблемной страницы), а так как сайт научно-популярный, то кроме паспарту делаю подрисуночные надписи, но их текст искажает размеры паспарту. Хочу, чтобы текст не выходил за границы рисунков. Как вариант можно фиксировано задавать ширину каждого блока, но все рисунки разного размера - это очень трудоёмко.

Кусочек html кода с рисунком

<div class="picturebox"> 
<img src="umenchenie_massy_auto/dvigatel.jpg" alt="Двигатель, расположенный в задней части автомобиля в едином блоке с коробкой передач и главной передачей" title="Двигатель, расположенный в задней части автомобиля в едином блоке с коробкой передач и главной передачей"> 
<p class="center"><span class="picturebox">Рис. 1 Двигатель, расположенный в задней части автомобиля в едином блоке с коробкой передач и главной передачей</span></p> 
</div>

Кусочек из CSS файла

div.picturebox {
	font-size: 0.8em;
	margin:  1em 0 1em 0;
	padding: 1em 1em 1em 1em;
	text-align: center;  
	border-width: 3px;
	border-style: double;
	border-color: #cccccc;}

Надеюсь на дельный совет! Заранее, спасибо

[psywalker]

У меня в ФФ всё в порядке. Где именно косяки?

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

[Red_baron]

У меня в ФФ всё в порядке. Где именно косяки?

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

Возможно я плохо объяснил. Лучше один раз увидеть, чем сто раз услышать.

Схема

[swetlana]

вероятно такое можно сделать некошерными методами вроде таблицы.

то есть, что-то в духе:

<table class="figure">
<tr><td><img src="image.tiff" /></td></tr>
<tr><th>подпись к картинке</th></tr>
</table>

и

table.figure {
width: 20px; /* заведомо уже, чем может быть */
margin: auto;
}

Никаких гарантий. Это только предположение. Даже не проверялось.

Но по крайней мере попробовать так можно.

[Red_baron]

Сделал другой вариант, оформил таким образом пока только страничку о экономии топлива (Пример). У меня нет IE6 или IE7, чтобы проверить правильность условного комментария. Большая просьба, взгляните, пожалуйста. Заранее, спасибо.

HTML

<!--[if lte IE 7]>		
	<style type="text/css">
		caption.img {display: none;}			
	</style>
<![endif]-->

<div class="rimg"><table>
	<caption class="img">Устали заправляться?</caption>
	<!--[if lte IE 7]><caption valign="bottom">Устали заправляться?</caption><![endif]-->
	<tr><td><img src="kak_economit_avtomobilnoe_toplivo/zapravka.gif" alt="Знак автозаправочная станция"></td></tr>					   				
</table></div>

CSS

caption.img{caption-side: bottom;}

Edited February 17, 2011 by Red_baron