Таблица рисунком

[AlexMak]

Делаю таблицу 3 на 3, в центре - информация. По краям - оформление таблицы. Но при отображениикартинок, почему-то появляется расстояние между ячейками, шириной в 1-2px, если форму делать темной, то очень заметно, хотя выставляю border и cellspacing в 0. В чем может быть проблема?

[youmay]

Попробуй сделать margin и padding нулевыми. Но вполне возможно что зазор все равно останется.

Лучше сверстать при помощи layers.

[AlexMak]

А поподробнее про layers? Почитать хотя бы?

[rash]

Покажите код.

[youmay]

это при помощи layers

<style type="text/css">
<!--
.window,
.window .f_r,
.window .f_b,
.window .f_l,
.window .f_c
{
float: left;
position: relative; z-index: 1;
width: auto; height: auto;
margin: 0; padding: 0;
}
.window .f_tt,
.window .f_rr,
.window .f_bb,
.window .f_ll
{
display: none;
}
.window
{
margin: 0 30px 15px 0;
background: url('hint-t.png') no-repeat left top;
//background: none;
}
.window .f_r
{
left: 30px;
background: url('hint-r.png') no-repeat right top;
//background: none;
}
.window .f_b
{
top: 30px;
background: url('hint-b.png') no-repeat right bottom;
//background: none;
}
.window .f_c
{
float: none;
position: relative;
left: 30px; top: -15px;
padding: 1px 0; margin: 0 30px 0 0;
background: #fffcb8;
}
.window .f_l
{
left: -30px;
padding: 15px 0;
background: url('hint-l.png') no-repeat left bottom;
//background: none;
}
* html .window .f_r,
* html .window .f_b,
* html .window .f_l
{ height: 0; }
* html .window .f_tt,
* html .window .f_rr,
* html .window .f_bb,
* html .window .f_bb *,
* html .window .f_ll,
* html .window .f_ll *
{
display: block;
position: absolute;
left: 0; top: 0;
}
* html .window .f_tt
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-t.png,sizingMethod=crop);
}
* html .window .f_rr
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-r.png,sizingMethod=crop);
}
* html .window .f_tt,
* html .window .f_bb
{
width: expression( parentNode.offsetWidth ); height: 30px;
}
* html .window .f_rr,
* html .window .f_ll
{
width: 30px; height: expression( parentNode.offsetHeight );
}
* html .window .f_bb,
* html .window .f_ll
{
overflow: hidden;
}
* html .window .f_bb *
{
width: 3000px; height: 30px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-b.png,sizingMethod=crop);
}
* html .window .f_ll *
{
width: 30px; height: 3000px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-l.png,sizingMethod=crop);
}
/* Исправляем неправильный расчет позиции при "нечетной ширине" */
* html .window .f_rr,
* html .window .f_bb *
{ right: expression( this.parentNode.offsetWidth % 2 ? -1 : 0 ); left: auto; }
* html .window .f_ll,
* html .window .f_ll *,
* html .window .f_bb,
* html .window .f_bb *
{ bottom: expression( this.parentNode.offsetHeight % 2 ? -1 : 0 ); top: auto; }


-->
</style>

<div class="window" id="window">
		<div class="f_tt"></div>
		<div class="f_r"><div class="f_rr"></div>
			<div class="f_b"><div class="f_bb"><div></div></div>
				<div class="f_l"><div class="f_ll"><div></div></div>
					<div class="f_c">
		   здесь текст

					</div>
				</div>
			</div>
		</div>
	</div>

hint-l - левая картинка

hint-r - правая картинка

hint-t - верхняя картинка

hint-b - нижняя картинка

Edited January 27, 2009 by youmay

[Amigos]

AlexMak при выставлении border, cellpadding, cellspacing в ноль, проблем с отступами быть не должно, по внимательнее проверь.

PS <div class="window" id="window"> — трешизм!

[Vlad]

Я считаю, что в крайности впадать не надо и таблицы нечего заменять слоями. Если конечно, таблицы не в качестве модульной сетки применяется.