Image Display on Mouseover not Working in IE7

[thefmgirl]

Please help with this frustrating problem. I apologize for not knowing for sure, but I think this is javascript that I'm working with. If it is not javascript that I am using, please let me know and I will post this problem in the correct forum. I am by no means an expert and with this problem, I don't even know where to begin to fix it!

On my website, I have a page that displays images when you mouse over a text link. I also have it as a clickable link. The address is http://www.paigebrennan.com/reviews.htm

I did not do this with the mouseover attribute in Dreamweaver. I used some javascript coding from a website (I think).

In lower versions of IE, as well as FF and Netscape, when you mouse over a link, my image pops up where specified (see code below) and stays there until you move on to the next link.

However, in IE7, it displays only half of the image. I have included an example of one of my links below. It is the link for "Capitol Inn" on my page. Can anyone suggest why IE7 is only displaying half of the linked image?

Thanks for your help!

<td><div align="left" class="style15"><span class="style11"><a href="reviews/capitolinn.jpg?AID=/20060330/GO02/603300310/1025" target="_blank"><a href="reviews/capitolinn.jpg" onmouseover="this.T_FIX = [600, 200]; this.T_STICKY=true; return escape('<img src=\'reviews/capitolinn.jpg\' width=\'600\'>')">Capitol Inn </a></span></div></td>

[spinal007]

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.

[thefmgirl]

Thank you so much for taking the time to help me figure this out. I am baffled, however. I checked my page and can find the code you mentioned (below) nowhere! I simply couldn't find where it said width 300 or 100%.

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">

Oddly, I never found any of the -moz lines anywhere, either.

What you said made sense. So, I did a screenshot of my problem page and trimmed it to just the truncated picture. And the picture is exactly 300px wide. I checked my original page file, looking for the problem code you found, and I checked the page source in all browsers (especially FF, since that's what you used to look at it).

I apologize for my ignorance, but could you tell me where you found this code on my page? I'd love to fix the problem.

Also, your suggestion of how to fix it (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.) was a little above my head. I am not familiar with what you mean by "layers" or positioning the image itself. Could you dumb it down a little or give me an example of what that code would look like?

Thank you so much for your time and help!

[spinal007]

Hi,
That html is being generated by a script file called "wz_tooltip.js".
That's why you couldn't find it on the page. It is 'put there' by the scrpit when the page loads.

Here's the documentation for ws_tooltip.js:
http://www.walterzorn.com/tooltip/tooltip_e.htm

[thefmgirl]

Thank you! Thank you! Thank you!

[spinal007]

You're welcome! You're welcome! You're welcome!