Новая проблема: в опере 7.0 под горизонтальной полосой прокрутки появляется полоска, относящаяся к тегу <td>, и в ней снова отображается верхняя часть фонового рисунка. Пробовал задавать размер <div'а> в процентах, размер ячейки опускать, а размер таблицы фиксировать (везде CSS), но тогда в Mozilla 1.7.4 рамка разматывается на всю длину абзаца... Что я опять неправильно делаю?
CODE:<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Официальный сайт Дмитрия Баскакова</title>
<link rel="stylesheet" type="text/css" href="../../css/html/index.css" />
<script type="text/javascript" src="../../js/html/index.js"></script>
</head>
<body>
<table class="big">
<tr height="15"><td class="links">
<acronym title="Вы сейчас находитесь на HTML-версии">HTML-версия</acronym> |
<a href="../js/index.htm" title="Версия сайта, целиком построенная на скриптах">JavaScript-версия</a> |
<a href="../flash/index.htm" title="Версия сайта, полностью построенная на Flash">Flash-версия</a> |
<a href="../print/index.htm" title="Версия сайта с простым оформлением">Версия для печати</a>
</td></tr>
<tr><td>
<table class="main" align=center cellpadding="0" cellspacing="0" width="500" height="375">
<tr>
<td width="500" height="375">
<div>
<h1>Доброго времени суток!</h1>
<p>
(текст)
</p>
</div>
</td>
</tr>
</table>
</td></tr>
<tr height="15"><td align="right">
<i>© Дмитрий Баскаков, 2006.</i>
</td></tr>
</table>
</body>
</html>
Содержимое index.css:
CODE:body
{
background-color: #e0e0e0;
font-family: monospace;
font-face: courier new, courier, lucida console;
font-size: 10pt;
}
a
{
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:visited
{
color: #404080;
}
a:hover
{
color: #000080;
text-decoration: underline;
}
table.big
{
width: 100%;
height: 100%;
font-size: 10pt;
}
table.main
{
border-style: solid;
border-width: 2px;
border-color: #808080;
/* width: 500px;
height: 375px;*/
background-image: url(../../img/html/index.jpg);
}
table.main td
{
vertical-align: top;
font-size: 10pt;
color: #303030;
font-size: 10pt;
width: 500px;
height: 375px;
}
div
{
/* width: 500px;
height: 375px;*/
width: 100%;
height: 100%;
overflow: scroll;
}
table.main p
{
text-indent: 20px;
text-align: left;
}
table.main h1
{
text-align: center;
font-size: 10pt;
font-weight: bold;
color: #000080;
}
.links
{
font-size: 11pt;
font-weight: bold;
color: #0000b0;
text-align: center;
}
acronym
{
cursor: default;
text-decoration: none;
}
|