Отображение в разных браузерах. Help!

[lyuq]

При написании странички проявилась проблема различного отображения того, что написано в разных браузерах.
Это, как приблизительно должно было выглядеть:
http://lyuq.pochta.ru/t.jpg
Так это выглядит в Опере, Мозилле и Нетскэйпе, а в IE все перекашивается ужасно.
При этом использован следующий код:

html

<table align="center" class="index">
<tr>
<td>
<div class="north"><h1 align="center"><em>Лаборатория Ионики Твердого Тела</em></h1></div>
<a href="about.htm">
<div class="west-i">
<img src="info.png" width="84" height="84" border="0" class="left">
<table class="in"><tr><td>О лаборатории</td></tr></table></div></a>
<a href="history.htm">
<div class="east-i"><img src="clock.png" width="84" height="84" border="0" class="right">
<table class="in"><tr><td>История</td></tr></table></div></a>
<a href="projects.htm">
<div class="west-ii"><img src="projects.png" width="84" height="84" border="0" class="left">
<table class="in"><tr><td>Проекты</td></tr></table></div></a>
<a href="publications.htm">
<div class="east-ii"><img src="articles.png" width="84" height="84" border="0" class="right">
<table class="in"><tr><td>Публикации</td></tr></table></div></a>
<a href="colaborators.htm">
<div class="west-iii"><img src="people.png" width="84" height="84" border="0" class="left">
<table class="in"><tr><td>Сотрудники</td></tr></table></div></a>
<a href="photo.htm">
<div class="east-iii"><img src="photo.png" width="84" height="84" border="0" class="right">
<table class="in"><tr><td>Фотоальбом</td></tr></table></div></a>
</td>
</tr>
</table>

css

table.index {
	position:relative;
	top:96px;
	width: 640px;
	height:311px;
	background-color:9bb3c4;
	padding-left: 0px;
	padding-right: 0px;
	}
table.in {
	width:229px;
	height:84px;
	text-align: center;
	vertical-align:middle;
	font-size:150%;
	}
img.left {
	float:left;
	}
img.right {
	float:right;
	}
div.north {
	position:absolute;
	top:0%;
	width:100%;
	height:40px;
	text-align:center;
	vertical-align:middle;
	border:1px solid;
	}
div.west-i {
	position:absolute;
	top:41px;
	left:3px;
	width:315px;
	height:86px;
	text-align:left;
	vertical-align:middle;
	background-color: bddcf4;
	margin-bottom: 3px;
	margin-top: 3px;
	border:1px solid;
	}
div.west-ii {
	text-align: left;
	position:absolute;
	top:133px;
	left:3px;
	width:315px;
	height:86px;
	background-color: bddcf4;
	margin-bottom: 3px;
	border:1px solid;
	vertical-align:middle;
	}
div.west-iii {
	text-align: left;
	position:absolute;
	top:222px;
	left:3px;
	width:315px;
	height:86px;
	background-color: bddcf4;
	margin-bottom: 3px;
	border:1px solid;
	vertical-align:middle;
	}
div.west-i:hover, div.west-ii:hover, div.west-iii:hover {
	background-color: b4d3eb;
	}

div.east-i {
	position:absolute;
	top:41px;
	right:3px;
	width:315px;
	height:86px;
	background-color: bddcf4;
	text-align: right;
	margin-bottom: 3px;
	margin-top: 3px;
	border:1px solid;
	vertical-align:middle;
	}
div.east-ii {
	text-align: right;
	position:absolute;
	top:133px;
	right:3px;
	width:315px;
	height:86px;
	background-color: bddcf4;
	margin-bottom: 3px;
	border:1px solid;
	vertical-align:middle;
	}
div.east-iii {
	text-align: right;
	position:absolute;
	top:222px;
	right:3px;
	width:315px;
	height:86px;
	background-color: bddcf4;
	margin-bottom: 3px;
	border:1px solid;
	vertical-align:middle;
	}
div.east-i:hover, div.east-ii:hover, div.east-iii:hover {
	background-color: b4d3eb;
	}

если из html кода убрать таблицы класса in, то все становиться более менее нормально и в IE (а без таблиц не знаю как текст разместить по центру), только при наведении мыши на элементы которые должны менять цвет ничего не происходит.

Мучаюсь с этим уже черт знает сколько, помогите plz...

[Izzyy]

Попробуй задать вопрос тут

[lyuq]

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