Отображение в разных браузерах. Help!
При написании странички проявилась проблема различного отображения того, что написано в разных браузерах.
Это, как приблизительно должно было выглядеть:
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... |
