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!

Register Log in
  • Congratulations strongm 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

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;}
 
Sort by date Sort by votes
I also notice you have
position: fixed;
Click to expand...
I beleive you need absolute, to make it float how you want!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Sorry to bump this up but I never got around to looking at this until today.

Vragabond: the link didn't offer me a solution. I can get the images to pop up in IE, but they're not stable. They jump all over the place, whereas in FF, they're in the same location and rather smooth.

1DMF: I went with fixed because it's what worked in FF. In IE fixed makes it jump around. When I change it to absolute, as you suggested, they're stable, but the problem is that they show up at the top of the page which doesn't work if I'm scrolling. Ie, the pictures are in the same location every time. Is there a way to get it a combination of both kind of? I want the image to pop up in the top left corner, but not the fixed top left corner... whatever the top left corner is relative to how far down the page it's scrolled.
 
Upvote 0 Downvote
That is because [tt]position: fixed;[/tt] is not supported in IE but it is the only way to have the element be positioned according to the currently scrolled viewport without scripting. If you want to achieve the same in IE, you would need to apply absolute positioning to it and some javascript that would calculate where on the page to put it.
 
Upvote 0 Downvote
you can place a holding div around it so you have a relative div containing an absolute. I use this for a message scroller box.

but it might be best as you want this to be posiotioned roughly center of the screen for the pop up to just apply top and left position.

also remember, I.E. doesn't support margin: 0 auto; on absolute positioned elements so, you will have to use JS to work it out. here is what I use...
Code: 
function floatinfo() {
        if (document.all) {
             document.all.infowin.style.top = document.documentElement.scrollTop + 20;
        }
        else if (document.layers) {
            document.infowin.top = window.pageYOffset + 20;
        }
        else if (document.getElementById) {
            document.getElementById('infowin').style.top = window.pageYOffset + 20 + 'px';
        }
}
so the div infowin will always appear 20px down from the top of the screen regardless of where on the page they have scrolled. in the CSS I have #infowin{margin-left:20%;} - it's not an exact but suits my needs due to the fixed width of my infowin, i'm sure you can find the best parameters to meet your needs



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
1DMF: thanks, I'm trying to get the script to work, but it doesn't seem to be. I'm getting the images showing, but they're not taking into account the scrolled status of the page. What am I missing?
 
Upvote 0 Downvote
have you created a div called infowin, then change the inner.HTML of the div = <img blah blah> on the mouse over.

but this method is not ure CSS, which is what you were trying to do, if you want ure CSS ask somelike vargabond, he knows his stuff!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I'm not too worried about it being pure CSS... I just used it because I figured it would be easier, not realizing that IE doesn't support it well! :D

Here's what I've done:

* Pasted your JS code into the top of the photos.html page.

* Modified styles.css (which is included in the photos.html page) with:
Code: 
#infowin	{margin-left: 20%;}

* Modified styles.css to have absolute instead of fixed:
Code: 
div a:hover span {position: absolute;

* Modified the image to display with the following:
Code: 
<div id="infowin">
  <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>
</div>

Pictures pop up but are not doing it relative to the scroll position.

I'm probably misplacing or miscoding something obvious. :/
 
Upvote 0 Downvote
you need an onmouseover to repositon the infowin div - so each img tag put
Code: 
onmouseover="floatinfo();"
also you need to put the absolute on the infowin div.

to see it in action here is my site im working on at the moment.


check out the CSS, JS and HTMl on the page to see how I put it all together.

click sign up when the page loads, the infowin pops up 20px down from the top of the page....close the infowin box... scroll to the bottom of the page...click signup again, and it will be 20px from current scroll postion :)




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
*sigh*. It's still not going. I inserted the onmouseover (can't believe I forgot that) and put in "position: absolute" in the CSS page for infowin.

I'll check your code and see what comes up.
 
Upvote 0 Downvote
good luck, i'm about to hit the hay, as I'm off to Iceland tomorrow on my Stag reunion - so cannot help further till i come back - hope you got it sorted by them :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Sounds like a blast, have fun!

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
Ooookay. Now I'm not sure what I did... the base small picture is moving! It's *kind* of doing what it should be doing though, as it's 20 pixels down and moves down.

You can't see the actual site because I'm doing it locally right now (at work, no access to the server this should be on). But here's the modified code.

Code: 
<div id="infowin" name="infowin">
   <div id="popup">
      <a href="#"><img src="pics/head-1-t.jpg" width=84 height=100 border=3 onmouseover="floatinfo();">
      <span><img src="pics/head-1.jpg" border=3></span></a>
   </div>
</div>

As you can see, there's a small thumbnail that you should be able to mouse over to get the larger image popped up. Make sense? Did I place something in the wrong location?
 
Upvote 0 Downvote
heh! no problems! Have fun! I'm going to Vancouver tomorrow and won't be back for a few days myself! My bro-in-law won't be too ansty on this as the page is up and live and getting some good traffic for him. He's accepting that I'll get to it soon. :)
 
Upvote 0 Downvote
ok i'm back, thanks for the bon voyage messages. it was a blast :) (god damn expensive though!) - hope you have a good one in vancouver!

are you in a position to continue with this? - just holla!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I'm holla'ing! :) I haven't managed to get it to work yet. I'm debating just scrapping the way I have it set up and doing "open in new window" links with it!
 
Upvote 0 Downvote
nah, your idea is great, just need to get it working, no need for a new window!

what code do you now have in place, can you upload it to a test area for me to peek at?

I've been playing with my code and now my infowin is even draggable ;-)



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Sorry about the pause... had to take a streetcar to work instead of biking! Stupid rain!

Here's what I have so far:

in the photos.html page (just the relevant areas):

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

<script type="text/javascript">
	function floatinfo() {
			if (document.all) {
				 document.all.infowin.style.top = document.documentElement.scrollTop + 20;
			}
			else if (document.layers) {
				document.infowin.top = window.pageYOffset + 20;
			}
			else if (document.getElementById) {
				document.getElementById('infowin').style.top = window.pageYOffset + 20 + 'px';
			}
	}
</script>

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

<div id="infowin" name="infowin"><div id="popup"><a href="#"><img src="pics/head-1-t.jpg" width=84 height=100 border=3 onmouseover="floatinfo();"><span><img src="pics/head-1.jpg" border=3></span></a></div></div>

in the CSS sheet:
Code: 
div a:hover {text-decoration: none;
    border: none;}

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

div a:hover span {display: block;
    position: absolute;
    top: 10px;
    left: 150px;
    width: 1px;
    height: 1px;
    padding: 0px;
    z-index: 100;
    color: black;
    border: #984700 2px solid;
    background: white;}

#infowin	{ margin-left:20%;
		  position: absolute; }

And what the page is currently doing:

* loads with the image in the wrong spot (this might be fixed once I add in the popup code to all the pictures... I'm just doing one right now until it's working properly to save on changing code for 30 pictures!)

* mousing over the thumbnail makes the thumbnail image jump to the top of the page initially

* once the thumbnail has readjusted itself, the large image shows up to the right of it and slightly lower (when moused over)

* scrolling a bit, then mousing over the thumbnail makes the thumbnail readjust again to a location at the top left of the browser.

Ideally, I don't want the thumbnails to move and I do want the larger image to pop up on the top left corner, readjusting based on scrolling.

I wish I could post the website for you, but I don't have access to the server from work. :/ I can do it when I'm at home though later this evening if we can't get this worked out. Thanks!
 
Upvote 0 Downvote
ok, what i've done is knock together an example for you to make it easier for you to follow what you need to do.

I've also changed the 'popup' id to a class, I can't see where you were applying CSS to the id='popup' , but you cannot have a page with more than one element with the same ID!

so if you do have some CSS you want to apply to the DIV change your CSS from #popup to .popup

here is the dummy page for you to play with ....
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<script type="text/javascript">

// preload images
image1 = new Image();
image1.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-1.jpg";[/URL]

image2 = new Image();
image2.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-2.jpg";[/URL]

image3 = new Image();
image3.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-3.jpg";[/URL]

image4 = new Image();
image4.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-4.jpg";[/URL]

image5 = new Image();
image5.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-5.jpg";[/URL]

image6 = new Image();
image6.src = "[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-6.jpg";[/URL]

// Float infowin div from current scroll location

function floatinfo() {
        if (document.all) {
             document.all.infowin.style.top = document.documentElement.scrollTop + 20;
        }
        else if (document.layers) {
            document.infowin.top = window.pageYOffset + 20;
        }
        else if (document.getElementById) {
            document.getElementById('infowin').style.top = window.pageYOffset + 20 + 'px';
        }
        
}

// function to update infowin and show image

function showpic(img){

document.getElementById('mypic').src = img;
floatinfo();
document.getElementById('infowin').style.visibility='visible';
}

function hidepic(){

document.getElementById('infowin').style.visibility='hidden';

}
</script>
<style type="text/css">
div a:hover {
    text-decoration: none;
    border: none;}

#infowin    { 
          margin-left:20%;
          position: absolute; 
          visibility: hidden;
}
</style>          
</head>
<body>
<div id="infowin"><img src="" id="mypic"></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-1-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-1.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-2-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-2.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-3-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-3.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-4-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-4.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-5-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-5.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-6-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-6.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-1-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-1.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-2-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-2.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-3-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-3.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-4-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-4.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-5-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-5.jpg');"[/URL] onmouseout="hidepic();"></a></div>
<div class="popup"><a href="#"><img src="[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-6-t.jpg"[/URL] width="66" height="100" border="3" onmouseover="showpic('[URL unfurl="true"]http://www.personainternet.com/mbeauclerc/pics/head-6.jpg');"[/URL] onmouseout="hidepic();"></a></div>
</body>
</html>

i've inline embedded the CSS for this test but hopefully this will give you what you need to make it all work.

Let me know how you get on!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
416
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
691
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
362
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
719
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
285
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top