Итак, работая над «простым» веб-сайтом (XHTML и CSS), отформатированным с использованием таблицы, я столкнулся с этой мучительной небольшой проблемой с рендерингом текста вне ячейки в IE8. Он корректно отображается во всех других протестированных браузерах, а также в IE8 с режимом совместимости; Я просто не могу сделать из этого головы или хвосты. Я пошел вперед и загрузил урезанную версию страницы в http://olypen.com/yourface/f7u14/, чтобы показать, что я имею в виду. Текст, о котором идет речь, является основным фреймом данных <td id="mainbody">, он показывает торчащийся вправо фрейм.
Любые предложения будут с благодарностью; это был один из тех проектов, которые начинались так: «Эй, он знает, как писать веб-страницы; он сможет полностью переделать наш сайт. Насколько это сложно, я сам делал это на Frontpage для года «. и это просто пошло вниз оттуда. Из того, что я вижу, выглядит так, как если бы я понял это, я покончу с этим (сейчас вставьте драматическую музыку: dun dun dun ).
Спасибо
Richard
Вот мой код, если кто-то хочет иметь трещину, пробивающую его:
Страница:
<!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=ISO-8859-1" />
<link rel="stylesheet" href="css/default.css" type="text/css" title="default" />
<title>Y U NO WORK IN IE8?</title>
</head>
<body>
<table border="0" id="formatting">
<tr>
<td colspan="2" id="header">
<!--headerstuff-->
<h1><img src="images/y-u-no.jpg" height="100px" alt="Y U NO" />Y U NO WORK?</h1><br />
</td>
</tr>
<tr>
<td rowspan="2" id="leftbar">
<!--left navbar-->
<div align="center">
<table id="leftlinks"><tbody>
<tr>
<td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">H</span>ome</a></td>
</tr>
<tr>
<td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">O</span>ur <span style="font-variant: small-caps; font-size:16px;">S</span>ervices</a></td>
</tr>
<tr>
<td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">T</span>echnical <span style="font-variant: small-caps; font-size:16px;">S</span>upport</a></td>
</tr>
<tr>
<td><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">A</span>bout <span style="font-variant: small-caps; font-size:16px;">U</span>s</a></td>
</tr>
</tbody></table>
</div>
<!--end of left navbar-->
</td>
<td id="bgformattingwide">
<div align="center">
<!--Top Navlinks-->
<table id="navlinks-table"><tbody>
<tr>
<td id="navlinks"><a href="index.thml"><span style="font-variant: small-caps; font-size:16px;">H</span>ome</a></td>
<td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">O</span>ur <span style="font-variant: small-caps; font-size:16px;">S</span>ervices</a></td>
<td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">T</span>echnical <span style="font-variant: small-caps; font-size:16px;">S</span>upport</a></td>
<td id="navlinks"><a href="index.html"><span style="font-variant: small-caps; font-size:16px;">A</span>bout <span style="font-variant: small-caps; font-size:16px;">U</span>s</a></td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td id="mainbody">
<!-- main data frame -->
<br />
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit eros
at risus varius a lacinia risus porttitor. Pellentesque quis tristique elit. Sed
hendrerit nulla ac mi aliquet porta. Suspendisse non leo lectus. Fusce tristique
laoreet magna in porttitor. Morbi nunc mi, bibendum nec faucibus nec, aliquet eget
ante. Quisque placerat ipsum sit amet nulla porttitor quis accumsan nisl mollis.
Proin elit leo, adipiscing nec congue id, suscipit ut risus. Nunc vitae odio nisl.
Curabitur varius dictum eros placerat porta. Donec vestibulum urna sed sem facilisis
varius. Donec id ante justo. Mauris condimentum tristique justo vitae dapibus. Donec
mattis tristique accumsan. Suspendisse condimentum lacinia lobortis. In hac habitasse
platea dictumst. Sed id tortor eu purus rutrum adipiscing.
</p>
<!--end of main data frame -->
</td>
</tr>
<tr>
<td colspan="2" id="footer-frame">
<!--Copyright Notice-->
Content Copyright © 2011, <a href="http://deafmutetech.com/">Deaf-Mute
Technologies</a>. All Rights Reserved.
</td>
</tr>
</table>
</body>
</html>
А вот и мой CSS:
body{font-family: Arial;font-size: 12px;cursor: default;color: #000;background-color:#FFFFFF;}
img{border: 0px;}
#formatting {border-spacing: 15px 15px;width: 100%;height: 100%;}
#header {text-align: center; height: 170px;padding-top: 15px;background:
#CCCCCC; border: 5px solid #000000;}
#navlinks-table {border-spacing: 5px 0px;}
#navlinks {text-align: center;width: 200px;padding-left: 0px;padding-right: 0px; background : #FFFFFF;border: 2px solid #000000;}
#navlinks a{font-family: Arial;font-size: 18px;color: #000000;}
#mainbody {text-align:center;vertical-align:top;padding-left:5%;padding-right:5%;width: 82%;background: #CCCCCC;border: 5px solid #000000;min-width: 840px;}
#footer-frame{padding-top: 10px;text-align: center;height: 2%;background: #CCCCCC;border: 3px solid #000000;}
h3{font-family: Arial;font-size: 18px;color: #000000;font-weight: bold;}
a{font-family: Arial;font-size: 16px;color: #000000;text-decoration: none;}
a:link{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:visited{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:hover{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}
#bgformattingwide {text-align: center;height:1%;min-width: 840px;padding-top:5px;padding-bottom: 5px;}
#bgformattingtall {width: 1%;}
#leftbar {border: 5px solid #000000; background: #cccccc;width: 17%;min-width: 210px;vertical-align: top;}
#leftlinks td {text-align: center;width: 200px;padding-left: 5px;padding-right: 5px;background : #FFFFFF;border: 2px solid #000000;}
#leftlinks {border-spacing: 5px 15px;}
#leftlinks a{font-family: Arial; font-size: 18px;color: #000000;}