Text rendering outside of td in IE8 but renders properly in all other browsers
So, working on a "simple" website (XHTML and CSS) formatted using a table, I ran into this nagging little issue with text rendering outside of a cell in IE8. It renders properly in all other browsers tested, as well as in IE8 with compatibility mode; I just can't make heads or tails of it. I've gone ahead and uploaded a stripped down version of the page to http://olypen.com/yourface/f7u14/ to show what I mean. The text in question is the main data frame <td id="mainbody">, it renders sticking out to the right on the frame.
Any suggestions would be greatly appreciated; this was one of those projects that started as, "Hay, he knows how to write web pages; he'll be able to completely re-do our site. How hard can it be, I've been doing it myself in Frontpage for years." and it just went downhill from there. From what I can see it looks as though once I get this figured out I'll be done with it (for now, insert dramatic music: dun dun dun).
Thanks,
Richard
Here's my code if anyone wants to have a crack as slugging through it:
Page:
<!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开发者_Go百科 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>
And here's my 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;}
I changed mainbody's padding from percent to pixels, and that seems to render correctly in IE8.
It seems that the problem of computed padding in a table-cell is a known bug in IE8, see here: http://jhop.me/ie8-bugs: "Computed width of a content area of a table-cell isn’t re-calculated when a padding (percentage) value is applied", with an example here: http://jhop.me/tests/bugs/ie8/tablecell-computedwidthpadding.html
加载中,请稍侯......
精彩评论