Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS popup works in Firefox, glitchy in IE 1

Status
Not open for further replies.

fdarkness

Programmer
Feb 17, 2006
110
CA
I used the pure CSS popup feature for a picture section on a website I developed for a family member. My bad, I didn't test it in IE before completing it. It works great in Firefox, but is definitely not good in IE.

The website is and the section that's acting up is the photo page.

Here's the code that I used which works great in FF. Is there something I need to incorporate into it to get it to work fine in IE? (only relevant code copied over)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<LINK REL="stylesheet" type="text/css" href="styles.css">

<div id="popup"><a href="#"><img src="pics/head-1-t.jpg" width=84 height=100 border=3><span><img src="pics/head-1.jpg" border=3></span></a></div>

from styles.css:
Code:
div a span {display: none;
    padding: 5px;
    color: #000000;
    font-size: 12px;
    width: 200px;}

div a:hover span {display: block;
    position: fixed;
    top: 10px;
    left: 150px;
    width: 1px;
    height: 1px;
    padding: 0px;
    z-index: 100;
    color: black;
    border: #984700 2px solid;
    background: white;}
 
Yahoo! It worked! Thank you thank you! :D

One last little question!

How can I put a border around the images that pop up? I had that with the CSS popup thing going and I'd like to put it back in. This chunk of code doesn't do it now.

Thankyouthankyou!
 
Also, how can I get it to move over a bit towards the right? This is smack up against the left border. I've tried playing with the CSS and JS code for the location, but I've only been able to move it down.
 
ok, ok , crickey I'm certainly earning my star on this one - lol

1. If you want a border on the images you can do this by apply it to the mypic ID relating to the img tag..
Code:
#mypic{
border-style:solid;
border-width:2px;
border-color:red;
}

2. Appearing hard left shouldn't be happening? do you still have the #infowin CSS appied ? it's the 'margin-left:20%;' which sets the distance from the far left of the page.

see if you are missing this in the CSS, if you create a test html with the exact code above you will see it is 20% from the left hand side of the page.

nearly there :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Yup, the #infowin is still there and I can see the margin-left code. For some reason it's not picking up the 20%. Weird.

Yet it works perfectly in FF. Go figure.

I'm going to leave it as it is and upload it like this. It works better than it did before and everyone will be happy. :) Thanks *tonnes* for all your help! If I could give you ten stars I would!
 
there are a few things i noticed which might help.

1. Your Script & CSS link should be between the <HEAD> tag
2. You have a round bracket instead of a curly brace on the end of the infowin CSS code
3. The infowin div should be directly under the body tag.

hopefully this will resolve any issues you have with the margin.

also it might be worth using the javascript code I showed you for pre-loading the images as there is a big delay on some of them and it's confusing as when you hover over one image it shows the previous one for a second or two while the real image loads.

regards,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
thanks! I fixed the errors you pointed out. And I'll try to do that pre-load thing. It's just a pain considering there's *so* many pics. :/
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top