Проблема со слоями

[Wind]

http://geriss.test.012345.ru/geriss/ru/epLWUNmD/ - вот ссылка, если посмотреть в IE7 и в FF3, то проблема станет понятной.

А так имеем:

<div class="middle">
		<table cellpadding="0" cellspacing="0" class="main_table">
			<tr>
				<td class="left_td">
					<div class="left_menu">
						<div class="left_child"></div>
					</div>
				</td>
				<td class="right_td">
					<div class="article">
						<div class="article_top"></div>
					</div>
					<div class="article_bottom">
						<div class="bottom_left"></div>
						<div class="bottom_right"></div>
					</div>
				</td>
			</tr>
		</table>
	</div>

CSS:

table.main_table{position:relative; z-index: 0;}
				td.left_td{background:url(/img/left_t_bg.jpg) left top repeat-y; margin:0; padding:0px; vertical-align:top; border:0px solid red; width:190px; max-width:190px; position:relative; z-index:0;}
					div.left_menu {border:0px solid red; width:190px; max-width:190px;min-height:368px; background:url(/img/left_menu_bg.jpg) no-repeat left top;padding-top:109px; position:relative; z-index:0;}
						div.left_child{border:0px solid red; position:relative; z-index:0;}
							div.left_baby{border:0px solid red; height:10px; margin-top:0px; width:235px; height:38px; background: url(/img/button.png) top left no-repeat; z-index:1; position:relative;}
								div.left_baby_link {margin-left:40px; padding-top:7px; position:relative;}
									div.left_baby_link a {font:bold 12px Tahoma; color:#000000; text-decoration:none;}
				td.right_td{vertical-align:top;border:0px solid red; width:100%; border:0px solid blue; background:url(/img/artic_bg.jpg) left top repeat-y;}
					div.article{border:0px solid red; width:100%; min-height:420px;}
						div.article_top{ background:url(/img/artic_top_bg.jpg) left top repeat-y; border:0px solid blue;min-height:382px; }
					div.article_bottom div.bottom_right{ background:url(/img/artic_bottom_bg.jpg) right top repeat-y; border:0px solid magenta; height:52px; }
		div.bottom{height:39px; background:url(/img/bottom_menu_bg.jpg) top right no-repeat; margin-top:0px;}

Надо:

Что бы плашки меню были наложены на ТД-ку, сверху. как это есть в FireFox.

[s0rr0w]

Зачем так много position: relative?

И ответ на ваш основной вопрос - не используйте особенности алгоритма рендеринга блоков, ширина которых не влазит в контейнер, используйте лучще position: absolute для плашек меню. IE просто не умеет делать то, что умеет делать FF

[Wind]

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

[s0rr0w]

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

Я бы кусочек фона перенес с правой части в левую, и пусть оно себе тянется.

Как еще один вариант, никто не мешает абсолютно спозиционировать кусочек плашки.

[Wind]

Я бы кусочек фона перенес с правой части в левую, и пусть оно себе тянется.

Как бы мне этого не хотелось, видимо придется к этому прибеч в конце концов...

Как еще один вариант, никто не мешает абсолютно спозиционировать кусочек плашки.

Что вы имеете ввиду?!

[s0rr0w]

Что вы имеете ввиду?!

Плашка под меню может состоять из двух частей: до границы ячейки и после нее.

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

[Wind]

Понял вас =) попробую. спасибо.

Все решилось с добавлением очередного дива =)

<div class="left_baby">
	<div class="crack">
		<div class="left_baby_link">
			<a href="[#REQUEST_URI#]/[#PATH#]">[#NAME#]</a>
		</div>
	</div>
</div>

div.left_baby{border:0px solid red; height:10px; margin-top:0px; width:190px; height:38px; z-index:11; position:relative;}
div.crack{width:235px; height:38px; background: url(/img/button.png) top left no-repeat; position:absolute; border:0px solid red; top:0px; left:5px;}
div.left_baby_link {margin-left:40px; padding-top:7px; position:relative;}
div.left_baby_link a {font:bold 12px Tahoma; color:#000000; text-decoration:none;}

Еще раз огромное спасибо за помощь.