Jump to content

Hover Content Hiding Behind Iframe


Recommended Posts

Please take a look at this link:

h ttp://tgd ev-com.ds5053.gre ybea rdhosting.com/store/pc/quickorder1.asp (remove spaces)


To the left, there is a category list. Click on one of the links and then hover over one of the items below. You can see the tooltip popup (ajax script) but it hides behind the iframe or that it does not appear on top of the entire page.


Any suggestions or fix for this?

Link to comment
Share on other sites

"I" personally don't see a way out with that current setup (but I'm sure there is - there almost always is). Do you have to have it in an iframe? Can you populate that content some other way?


Edit - don't listen to anything RyanReese says. He has some mental problems...


I threw together a simple test page to try and fix it - I still don't see it happening.


Untitled Document
<br /><!--<br />div {<br />width:300px;<br />height:300px;<br />}<br />--><br />


and the iframe code


Untitled Document
<br /><!--<br />.tooltip { <br />position:relative;<br />} <br />.tooltip span { <br />position:absolute;<br />left:-999em;<br />} <br />.tooltip:hover span, .tooltip:focus span {<br />left:260px;<br />padding:5px 10px;  <br />border:2px solid #000;<br />background:#999;<br />}<br />--><br />


Edited by Eric
Link to comment
Share on other sites

Ok...convinced the client to go with a div overflow.


Just got one tweak that I am confused with which that I cannot get the two columns of inputs to line up the same in both FF and IE.


h ttp://tgdev-com.ds5053.gr eybea rdhosting.com/store/pc/quickorder_edk.asp


I have set the first row of cells to have fixed widths. It seems IE is not playing nice where the Item Code column pushes out further than I like.





Link to comment
Share on other sites

I've come across this before. I checked all your table cells, even adding extra ids which you had in the same column for the input boxes and a background-color:-

/* Below sets 'Item Code' cell width */

#item-code, #item-code-box {

background-color: violet;

width: 120px;



but that wasn't necessary (if you set a width for one, the others below should be the same width), but it helped me check that nothing was wrong there.

I checked the actual input boxes and put a background-color on them:-


/* Below changes the 'Item Code' input box styles */

#item-code-box input {

width: 100px;


border: 1px solid #666;

background-color: fuchsia;/*#f1f1f1;*/

margin-right: 20px;



All was OK but then I realised that the id="item-code-box"> has javascript inside and I've noticed before that this can add a hidden margin somehow, so I disabled all the javascript like this in each item by disabling the input box:-


onChange="javascript:validateSKU(document.m.sku2.value, '2')"



and IE7 reduced the width to 120px (Firefox showed it still 120px)


so somehow you have to edit the javascript, which is beyond me.

Link to comment
Share on other sites

Don't ask me why and maybe you are right about the javascript but the cell that has the paragraph text somehow wanted to have a width assigned to it.


It now works...I just need to move all the inline styles over to the css file.


Thanks for looking into it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...