Why doesn't Chrome render this page correctly?
I'm 开发者_如何学编程having issues with this page in Chrome: http://www.pieterdedecker.be/index.htm
For those of you that don't have Chrome, here's what happens: Chrome screenshot http://img39.imageshack.us/img39/241/chromeerr.jpg
How can I fix this glitch?
Here's an alternative that will render correctly, and be a lot less code to maintain:
CSS:
body {
margin: 0;
padding: 0;
}
a:link, a:hover, a:active, a:visited {
color: #3D566E;
}
#wrapper {
width: 800px;
height: 500px;
padding: 0;
margin: 0 auto;
border-collapse: collapse;
}
#top {
background: url('img/wrap_top.jpg');
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
height: 300px;
}
#bodywrap {
padding: 10px 20px 0 30px;
background: url('img/wrap_body.png');
}
#bottom {
padding: 15px 20px 5px 30px;
background: url('img/wrap_bottom.png');
background-repeat: no-repeat;
color: #4d4d4d;
font-family: Arial;
font-size: 80%;
text-align: left;
}
table.grid {
width: 100%;
}
/* Grid thumbnails */
table.grid a:link img, table.grid a:visited img, table.grid a:active img {
width: 100px;
height: 100px;
border: 3px solid #bbbbbb;
}
table.grid a:hover img {
width: 100px;
height: 100px;
border: 3px solid #0075b5;
}
/* Exception for grid descriptor: see below */
table.grid tr td {
text-align: center;
}
/* Grid descriptor */
table.grid tr td.grid_descriptor {
text-align: left;
vertical-align: top;
padding-left: 5px;
padding-top: 0px;
}
table.grid tr td.grid_descriptor h1 {
color: black;
font-size: 130%;
font-family: Arial;
margin-top: 0px;
}
table.grid tr td.grid_descriptor p {
color: black;
font-size: 80%;
font-family: Arial;
}
span.language {
padding: 5px;
background-color: #4d4d4d;
color: white;
font-weight: bold;
text-align: center;
vertical-align: center;
}
Here's the body replacement before the first body <script> tag:
<div id="wrapper">
<div id="top"></div>
<div id="bodywrap">
<table class="grid">
<tbody>
<tr>
<td><a href="http://www.cybernetnews.com/author/pdedecker/"><img src="./Pieter De Decker's website_files/cybernetnews.jpg" onmouseover="showDescription('CyberNet News', 'Experiencing Facebook overkill? Looking for a one-click solution to make your photos look better?<br /><br />In my occassional contributions to CyberNet News, I show you how to make your digital life easier and more fun.<br /><br />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="CyberNet News" /></a></td>
<td><a href="http://www.pieterdedecker.be/beradio/"><img src="./Pieter De Decker's website_files/beradio.jpg" onmouseover="showDescription('beRadio', 'This piece of software bundles popular Belgian radio stations in one app.<br /><br />Added bonus: song information for most stations.<br /><br />\x3Ci>Software, built with C#\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span> \x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="beRadio" /></a></td>
<td><a href="http://www.pieterdedecker.be/dvbt/"><img src="./Pieter De Decker's website_files/dvbt.jpg" onmouseover="showDescription('The Belgian DVB-T Resource', 'The missing manual to receiving free over-the-air television in Belgium.\x3Cbr />\x3Cbr />\x3Ci>Website, built with HTML/JS/CSS\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="The Belgian DVB-T Resource" /></a></td>
<td><a href="http://www.pieterdedecker.be/ipodcalsync/"><img src="./Pieter De Decker's website_files/ipodcalsync.jpg" onmouseover="showDescription('iPodCALsync', 'A tool that lets iPod owners sync their Google calendars with their device.\x3Cbr />\x3Cbr />\x3Ci>Software, built with AutoItScript\x3Cbr />Not for the iPhone/iPod touch\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="iPodCALsync" /></a></td>
<td class="grid_descriptor" rowspan="2" style="width: 30%">
<h1 id="descriptor_title">Pick a thumbnail</h1>
<p id="descriptor_body">Hover over a thumbnail to find out more about my projects.</p>
</td>
</tr>
<tr>
<td><a href="http://labs.pieterdedecker.be/blog/"><img src="./Pieter De Decker's website_files/softwarelabo.jpg" onmouseover="showDescription('Pieter\'s Software Lab', 'See what I\'ve been cooking up in the labs. Has sneak peaks on new software and sites I may or may not release later.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="Pieter's Software Lab" /></a></td>
<td><a href="http://www.twitter.com/pdedecker"><img src="./Pieter De Decker's website_files/twitter.jpg" onmouseover="showDescription('My Twitter', 'My latest thoughts on tech, the world and bubble wrap.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="My Twitter" /></a></td>
<td><a href="http://www.pieterdedecker.be/podcast/itsallmellow/"><img src="./Pieter De Decker's website_files/itsallmellow.jpg" onmouseover="showDescription('It\'s All Mellow', 'A podcast that features cheery and moody music to warm up your inner self.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="It's All Mellow" /></a></td>
<td><a href="javascript:;"><img src="./Pieter De Decker's website_files/empty.png" alt="Coming soon?" /></a></td>
</tr>
</tbody>
</table>
</div>
<div id="bottom">
Fascinated by the cat? You can find its owner <a href="http://www.flickr.com/photos/afu007/2398217277/" target="_blank">here</a>. An up-to-date browser such as <a href="http://www.getfirefox.com/" target="_blank">Firefox 3.5</a> or <a href="http://www.microsoft.com/netherlands/windows/internet-explorer/" target="_blank">Internet Explorer 8</a> ensures the site is rendered correctly. We're <a href="http://validator.w3.org/check?uri=referer" target="_blank">compliant</a> with international web standards.
</div>
</div>
This is a rather big change to fix your issue, but just showing you the option of a lot less HTML/CSS, but still XHTML compliant. This is wiki, anyone else feel free to improve.
I think you are running into an empty cell glitch in Chrome, I haven't tested it on your page but I've seen this same problem before on my sites. Try putting or a single pixel image in your TD.
This is a known bug where the background is being inherited by the table cells ...
You will have to not use the background image on the tr but on the td instead..
so your following code
<tr class="body">
<td class="spacer"></td>
<td class="content">....</td>
<td class="spacer"></td>
</tr>
will have to change to
<tr class="body">
<td class="spacer left"></td>
<td class="content center">....</td>
<td class="spacer right"></td>
</tr>
and in your CSS add
table.wrapper .body td{
background-image: url('img/wrap_body.png');
background-repeat:repeat-y;
}
table.wrapper .body td.left{ background-position: 0 0; }
table.wrapper .body td.center{ background-position: 50% 0; }
table.wrapper .body td.right{ background-position: 100% 0; }
and change
table.wrapper tr.body, table.wrapper tr.bodyspacer {
background: url('img/wrap_body.png');
}
to
table.wrapper tr.bodyspacer {
background: url('img/wrap_body.png');
}
Check your:
table.wrapper td.spacer
Looks like the width isn't rendering correctly. It is also not rendering in IE8 as well.
Try adding a background-repeat: no-repeat; declaration to your table.wrapper tr.body rule-set.
The problem is caused by the td's inheriting the background of the parent tr. This is more noticeable if you turn off the background color here:
table.wrapper td.content {
vertical-align: top;
/*background-color: #EEEEEE;*/
}
To minimize necessary changes to your table layout, you could just move your spacers to the "grid" table and remove the colspan=3 declaration from the cells in the other rows:
<tr class="body">
<!--td class="spacer"> </td-->
<td class="content">
<table class="grid">
<tr>
<td class="spacer"> </td>
<td><a href="http://www.cybernetnews.com/author/pdedecker/"><img src="img/thumbs/cybernetnews.jpg" onmouseover="showDescription('CyberNet News', 'Experiencing Facebook overkill? Looking for a one-click solution to make your photos look better?<br /><br />In my occassional contributions to CyberNet News, I show you how to make your digital life easier and more fun.<br /><br />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="CyberNet News" /></a></td>
<td><a href="http://www.pieterdedecker.be/beradio/"><img src="img/thumbs/beradio.jpg" onmouseover="showDescription('beRadio', 'This piece of software bundles popular Belgian radio stations in one app.<br /><br />Added bonus: song information for most stations.<br /><br />\x3Ci>Software, built with C#\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span> \x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="beRadio" /></a></td>
<td><a href="http://www.pieterdedecker.be/dvbt/"><img src="img/thumbs/dvbt.jpg" onmouseover="showDescription('The Belgian DVB-T Resource', 'The missing manual to receiving free over-the-air television in Belgium.\x3Cbr />\x3Cbr />\x3Ci>Website, built with HTML/JS/CSS\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="The Belgian DVB-T Resource" /></a></td>
<td><a href="http://www.pieterdedecker.be/ipodcalsync/"><img src="img/thumbs/ipodcalsync.jpg" onmouseover="showDescription('iPodCALsync', 'A tool that lets iPod owners sync their Google calendars with their device.\x3Cbr />\x3Cbr />\x3Ci>Software, built with AutoItScript\x3Cbr />Not for the iPhone/iPod touch\x3C/i>\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="iPodCALsync" /></a></td>
<td class="grid_descriptor" rowspan="2" style="width: 30%"><h1 id="descriptor_title"></h1><p id="descriptor_body"></p></td>
<td class="spacer"> </td>
</tr>
<tr>
<td class="spacer"> </td>
<td><a href="http://labs.pieterdedecker.be/blog/"><img src="img/thumbs/softwarelabo.jpg" onmouseover="showDescription('Pieter\'s Software Lab', 'See what I\'ve been cooking up in the labs. Has sneak peaks on new software and sites I may or may not release later.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>NL\x3C/span>');" onmouseout="revertDescription();" alt="Pieter's Software Lab" /></a></td>
<td><a href="http://www.twitter.com/pdedecker"><img src="img/thumbs/twitter.jpg" onmouseover="showDescription('My Twitter', 'My latest thoughts on tech, the world and bubble wrap.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="My Twitter" /></a></td>
<td><a href="http://www.pieterdedecker.be/podcast/itsallmellow/"><img src="img/thumbs/itsallmellow.jpg" onmouseover="showDescription('It\'s All Mellow', 'A podcast that features cheery and moody music to warm up your inner self.\x3Cbr />\x3Cbr />\x3Cspan class=\'language\'>EN\x3C/span>');" onmouseout="revertDescription();" alt="It's All Mellow" /></a></td>
<td><a href="javascript:;"><img src="img/thumbs/empty.png" alt="Coming soon?" /></a></td>
<td class="spacer"> </td>
</tr>
</table>
</td>
<!--td class="spacer"> </td-->
</tr>;
加载中,请稍侯......
精彩评论