- Code: Select all
<div style="position: absolute; z-index: 1010; left: 400px; top: 200px; width: 300px; visibility: visible; opacity: 1;" id="tOoLtIp014">
<table width="300" cellspacing="0" cellpadding="0" border="0" bgcolor="#003399" style="background: rgb(0, 51, 153) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="3" border="0">
<tbody>
<tr>
<td bgcolor="#e6ecff" align="left" style="padding: 3px; text-align: left;">
<font face="arial,helvetica,sans-serif" color="#000066" style="color: rgb(0, 0, 102); font-family: arial,helvetica,sans-serif; font-size: 11px; font-weight: normal;">
<img width="800" src="reviews/bestof2006.jpg"/>
</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
It's your fault matey. That's the perfect recipe for disaster. You have:
div 300px width;
> table 300px width;
> > table 100% width;
> > > img 800px width;
Something's gotta give in that situation, either the tables get strectched to accomodate the large image or the image isn't displayed properly. My opinion is to remove the layers and apply the effect to the image alone. IE.: show/hide and position the image itself, rather than the layers containing the image.
On another note, I have a standard screen resolution and your site is too wide for it. I am assuming you have a large monitor but when it comes to making websites, you must make it accessible to the bulk of web users.