В общем ситуация такая. Пишу свой сайт и решил проверить его на кроссбраузерность. И правильно сделал... нашёл гору ошибок в отображении. Вроде подправил и ошибки в коде и CSS, но мазила отказывается открывать корректно, сдвигая одну из таблиц не туда, куда надо... Далее прилагаю исходный код полученной html страницы и CSS фаил. Попробуйте открыть в опере, эксплорере, мазиле... Проблема только в лисе, но не могу понять где... одно только ясно - проблема в исходном коде. Помогите, пожалуйста, исправить данный html, чтоб отображалось всё корректно.
заранее спасибо.
Примечание:
html фаил:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="123" />
<meta name="description" content="123123" />
<title>123</title>
<link href=style.css rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<td class="header"><a href=index.php><img class=logo src=../images/logo.gif alt="logo"></a></td>
</tr> <tr>
<td class="topmeny"> </td>
</tr> <tr>
<td class="centerside"><table>
<tr>
<td class="sideblocks">
<table class="sideblocks">
<tr>
<td class=modyles_header>
Добро пожаловать, </td>
</tr>
<tr>
<td><table>
<tr>
<td class="border-left"></td>
<td class="contentmodule">
<form class='modyles_form' name='login_panel' method='post' action='modyles/login/login_check.php'>
<label>Пользователь
<input type='text' name='login' id='login'>
</label><br>
<label>Пароль
<input type='password' name='passwd' id='passwd'>
</label><br>
<input type='submit' value='Войти'>
<label><br>
<input type='checkbox' name='remember' id='remember'>запомнить</label><br><br>
<a class='modyles' href=modyles/login/singup.php>Зарегистрироваться</a><br>
<a class='modyles' href=modyles/login/recover.php>Забыли пароль?</a>
</form>
</td>
<td class="border-right"></td>
</tr>
<tr>
<td class="border-left-bottom"></td>
<td class="border-bottom"></td>
<td class="border-right-bottom"></td>
</tr>
</table></td>
</tr>
</table>
<table>
<tr>
<td class=modyles_header>Main menu</td>
</tr>
<tr>
<td><table>
<tr>
<td class="border-left"></td>
<td class="contentmodule">
<a href=index.php>На главную</a><br /><a href=pages/news.php>Новости</a><br /><a href=pages/article.php>Статьи</a><br />
</td>
<td class="border-right"></td>
</tr>
<tr>
<td class="border-left-bottom"></td>
<td class="border-bottom"></td>
<td class="border-right-bottom"></td>
</tr>
</table></td>
</tr>
</table>
</td> <td><table>
<tr>
<td class="border-left-top"> </td>
<td class="border-top"> </td>
<td class="border-right-top"> </td>
</tr>
<tr>
<td class="border-left"> </td>
<td class="contentblock">
От такой от сайтик =)</td>
<td class="border-right"> </td>
</tr>
<tr>
<td class="border-left-bottom"> </td>
<td class="border-bottom"> </td>
<td class="border-right-bottom"> </td>
</tr>
</table></td> <td class="sideblocks">
</td> </tr>
</table>
</tr>
<tr>
<td class="footer"><table>
<tr>
<td class="leftfoot"> </td>
<td><p class="footer">Авторские права сайта </p>
<p class="footer">Права на движок </p></td>
<td class="rightfoot"> </td>
</tr>
</table></td>
</tr></table></body>
</html>
Примечание:
style.css часть1
@charset "windows-1251";
/* CSS Document */
body {background-color:#efdbcd;}
body.blank {text-align:center;
vertical-align:top;
background-color:#b88975;}
H1 {font-size:14px;
text-align:center;
font-family:Tahoma, Geneva, sans-serif}
H3 {text-align:center;
padding: 0 0 7px 0; margin: 0;}
table {border:0;
height:100%;
width:100%;
border-collapse:collapse;
vertical-align:top;
}
td {vertical-align:top;}
a img {border:none}
p.footer {font-size:11px;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:oblique;
text-align:center;
padding: 2px 0 3px 0; margin: 0;
color:#efdbcd}
.header {background-image:url(images/header.gif);
height:160px;
background-repeat:no-repeat;}
.topmeny {background-image:url(images/blocktop.gif);
height:25px;}
.sideblocks {width:250px;
text-align:center;
background-image:url(images/back.gif);}
.centerblocks {max-width:500px;
text-align:center;
background-image:url(images/back.gif);}
.centerside {border-collapse:collapse;
background-image:url(images/back.gif);}
.footer {background-image:url(images/back.gif);
text-align:center;}
.contentblock {background-image:url(images/backcontent.gif);
text-align:justify;}
.contentmodule {background-image:url(images/backcontent.gif);
text-align:center;
vertical-align:middle;}
.leftfoot {background-image:url(images/angle1.gif);
width:35px;
height:35px;}
.rightfoot {background-image:url(images/angle2.gif);
width:35px;
height:35px;}
.border-left-top {background-image:url(images/lefttop.gif);
width:25px;
height:25px;}
.border-right-top {background-image:url(images/righttop.gif);
width:25px;
height:25px;}
.border-left-bottom {background-image:url(images/leftbottom.gif);
width:25px;
height:25px;}
.border-right-bottom {background-image:url(images/rightbottom.gif);
width:25px;
height:25px;}
.border-left {background-image:url(images/left.gif);}
.border-right {background-image:url(images/right.gif);}
.border-top {background-image:url(images/top.gif);}
.border-bottom {background-image:url(images/bottom.gif);}
Примечание:
.logo {position: absolute;
top: 10px;
left: 40px;
}
.logoblank {position: fixed;
top: 10px;
}
.modyles_header {text-align:center;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bolder;
background-image:url(images/blocktop.gif);
height:25px;}
.modyles_form {text-align:center;}
a.modyles:link {background: none; color: #000000; font-size: 11px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
a.modyles:active {background: none; color: #000000; font-size: 11px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
a.modyles:visited {background: none; color: #000000; font-size: 11px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
a.modyles:hover {background: none; color: #000000; font-size: 11px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
a:link {background: none; color: #000000; font-size: 13px; font-family: tahoma, helvetica, sans serif; text-decoration: none}
a:active {background: none; color: #000000; font-size: 13px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
a:visited {background: none; color: #000000; font-size: 13px; font-family: tahoma, helvetica, sans serif; text-decoration: none}
a:hover {background: none; color: #000000; font-size: 13px; font-family: tahoma, helvetica, sans serif; text-decoration: underline}
.smalltext {font-size:12px;}
.news {}
.HeaderNews {font-size:11px;
font-family:Tahoma, Geneva, sans-serif;
padding: 0 0 7px 0; margin: 0;
border-left:inset #CCC;
border-right:inset #CCC}
.NameOfNews {background-image:url(images/blocktop.gif);
font-size:11px;
font-family:"Times New Roman", Times, serif;
text-align:center;
font-weight:bold;}
.DescriptionNews {border:inset #CCC;}
.BodyNews {border-left:inset #CCC;
border-right:inset #CCC;
border-bottom:inset #CCC;}
.FooterNews {font-size:11px;
font-family:Tahoma, Geneva, sans-serif;
padding: 6px 0 7px 0; margin: 0;;
text-align:right;
border:inset #CCC}
.comment { border: inset #CCC;
padding:10px;
text-align:justify;}
.comment_header { margin-bottom:2px;
padding: 2px 0 0 0; margin: 0;
font-size:9px;
border-bottom:inset #CCC}
.search { color:#309;
font-weight:bold}
Примечание:
PS если это важно, то сайт делается не на html естественно, а на PHP. Разбросан на много кусочков/модулей/блоков... Подгружается всё в одно целое по средством include().
Примечание:
по первой ссылке он нашёл 102 (вроде) ошибки, но все они с невезде проставленными кавычками, и якобы неверно открывающимися и закрывающимися тегами.. Если честно, он плохо проверяет и когда теги в теге выдаёт ошибки на их парности... не верю я ему (но всё проверил, изменил, результата нет...)
валидатор ссылок неправильно парсил ссылку на лого и вывел же об этом ошибку... на самом деле получаем на выходе путь иной, верный.
css валидатор завершился без ошибок.
PS консоль ошибок мазилы ошибок тоже не находит (по нему я и исправил пару ошибочек с css до этого). В логах пусто, словно так и должно быть... чистка кеша не помогает.
Примечание:
Спасибо, как и думал, ответа нормального не получу... проблему решил сам.
Это явный косяк мазилы - неверно парсит таблицы при работе с вложенными. Переписал основной дизайн используя <div> взамен <table><tr><td>.
Оставил представление в табличном виде для статей, новостей, комментов и тп, но также нормально не отображалось, пока не объеденил выводимы таблицы в тег <div> без указания стилей. Видимо браузер просто неверно определяет закрывающие теги, однако при добавлении контейнера начинает обрабатывать его отдельно - рисуя таблицу верно.