Извечные Div'ы и разные браузеры

[Kaylang]

Доброго времени суток, всемогущий All!

Ситуация: Верстаю шаблон для Joomla 1.5. Три колонки.

Решил пойти путем display:table

При этом, чтобы весь шаблон был без таблиц, скопировал папку html из шаблона Beez. Таким образом код генерируемой страницы получается таким (вставляю только интересующую часть):

<div id="middle_container">
	<div id="middle_wrap">
		<div id="left">
			<div class="moduletable_news">
				<h3>Наши новости</h3>

				<ul class="vert_news">
					<li>
						<p>Администрация располагается по адресу: via Banetti,50 - 21027 Ispra (Varese)</p><span class="article_separator"> </span>
					</li>
					<li>
						<p>Билингвистический академический центр проводит день открытых дверей и запись.</p>
						<a href="/aist/index.php?option=com_content&view=article&id=163%3Ah-&catid=2&Itemid=2〈=ru" class="readon">Подробнее ... </a>
						<span class="article_separator"> </span>
					</li>
					<li>
						<p>Для детей: Русский язык и Русская школа.</p>
						<a href="/aist/index.php?option=com_content&view=article&id=165%3A2010-10-06-14-45-09&catid=2&Itemid=2〈=ru" class="readon">Подробнее ... </a>
						<span class="article_separator"> </span>
					</li>
					<li>
				</ul>
			</div>
	</div><!--left-->
	<div id="center">
		/* тут контент. */
	</div><!--center-->
	<div id="right">
		<div class="moduletable_ob">
			<h3>Объявления</h3>
			<ul class="vert_ob">
				<li>
					/* тут контент правой колонки */
				</li>
			</ul>
		</div>
		</div><!--right-->
	</div><!--middle_wrap-->
</div><!--middle_container-->

CSS:

#middle_container{
	border:1px solid #333;
	display:table;
	width:962px;
	margin:5px 0;
	padding:5px;
}
#middle_wrap{
	width:100%;
	display:table-row;
}
#left{
	border:1px solid #000;
	background-color:FFF;
	width:240px;
	display:table-cell;
	overflow:hidden;
	margin:0;
	padding:0;
}
#center{
	border:1px solid #000;
	width:470px;
	display:table-cell;
	overflow:hidden;
	padding:5px 0 0 0;
}
#right{
	border:1px solid #000;
	background-color:FFF;
	width:240px;
	display:table-cell;
	overflow:hidden;
	padding:5px 0 0 0;
}
div.moduletable_news,div.moduletable_ob{
	border:1px solid #f0f;
	background-image:url(../images/block_header.png);
	background-position: top center;
	background-repeat:no-repeat;
	margin:0px 5px 16px 5px;
	padding:0px;
	width:230px;
}
div.moduletable_news>h3,div.moduletable_ob>h3{
	font-size:16px;
	font-family:Georgia, Times, serif;
	text-align:center;
	line-height:38px;
	color:#FFF;
	padding:0;
	margin:0;
}

бордеры поставил, чтобы разобраться с траблом.

Трабл заключается в том, что в FF и Chrome над дивами moduletable_news и moduletable_ob появляется свободное пространство порядка 15-20px. В IE8, Опере и Сафари такой ерунды не наблюдается.

Скрины:

Уже мозги сломал с этой фигней. Может у кого будут идеи, как обороть ее?

Заранее благодарен.

Edited October 9, 2010 by Kaylang

[npofopr]

ссылку тут надо на сайт

[Kaylang]

сайт на локале.

[psywalker]

сайт на локале.

Тогда я за волшебным шаром и сразу к тебе)

[Kaylang]

Тогда я за волшебным шаром и сразу к тебе)

Ну, если по делу ответить нечего, то можно и за волшебным шаром.

ЗЫ. Непристало модеру флудить.

А по теме, судя по всему, трабл в параметрах display:table, display:table-row или display:table-cell.

Edited October 10, 2010 by Kaylang

[npofopr]

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

тем более, что ксс явно не полная.

регистрируй free hosting

[psywalker]

Ну, если по делу отвечить нечего, то можно и за волшебным шаром.

ЗЫ. Непристало модеру флудить.

Запомни дружище, если хочешь чтобы тебе помогли, подготовь для начала качественную почву для этого. Тут нет телепатов и волшебников, прости.

[CEBEP]

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

[Kaylang]

Запомни дружище, если хочешь чтобы тебе помогли, подготовь для начала качественную почву для этого. Тут нет телепатов и волшебников, прости.

Про телепатов и волшебников я в курсе, бабушка писала.

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

В принципе, проблема таки в табличном представлении div'ов. Не знаю по какой причине у них паддинги и маргины отличны от нуля. По крайней мере, только Опера показывает их так, как надо, остальные браузеры добавляют ненужное мне пространство.

В качестве решения проблемы решил просто переверстать одним из старых методов для трехколоночной верстки.

Всех благодарю за внимание и попытки помочь!