CSS Float Positioning Question

[TopherB]

Here is the functional part of my problem

    <a onmouseover="document.getElementById('PopUp').style.display = 'block';"><img src="http://www.garthbigelow.com/images/Marchsep.gif"></a>
    <div id='PopUp' style='display: none; position: absolute; border: solid black 1px; padding: 10px; 
                           background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
         onfocus='this.blur();'
         onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
    This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
    </div>

Yes, this does what I want. It creates a float which appears when the mouse points to the image and disappears when the mouse leaves the float.
What I can't get, is that I want the float to be positioned so that the top left corner of the float is the same as the top left corner of image.

I've played with this for hours, but I just barely understand what I've already done, let alone what I'm trying to do.

Thanks
Garth

[AricC]

Here is the functional part of my problem

    <a onmouseover="document.getElementById('PopUp').style.display = 'block';"><img src="http://www.garthbigelow.com/images/Marchsep.gif"></a>
    <div id='PopUp' style='display: none; position: absolute; border: solid black 1px; padding: 10px; 
                           background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
         onfocus='this.blur();'
         onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
    This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
    </div>

Yes, this does what I want. It creates a float which appears when the mouse points to the image and disappears when the mouse leaves the float.
What I can't get, is that I want the float to be positioned so that the top left corner of the float is the same as the top left corner of image.

I've played with this for hours, but I just barely understand what I've already done, let alone what I'm trying to do.

Thanks
Garth

You got a link to the page? So it's popping up just not where you want it too?

Aric

[drhowarddrfine]

Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.

[TopherB]

You got a link to the page? So it's popping up just not where you want it too?

Aric

I've been testing it locally, really didn't post it anywhere but I can if that's important.
Yes, it's just not popping up where I want it. I can position it in absolute terms, but I didn't do that in the example, because what I want to do is position it so that the upper top left corner is the same as that of the image.

[TopherB]

Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.

removed 'position:absolute' added 'float:left'. It caused no noticeable change in the action of the code.

[TopherB]

Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.

Ah, just understood what you were saying, but the centering of the picture is important to the final product.

[drhowarddrfine]

So what did you do? I assume the "for fun" solution was not what you want so did the first one work? If not, what doctype are you using and which browser?

[TopherB]

So what did you do? I assume the "for fun" solution was not what you want so did the first one work? If not, what doctype are you using and which browser?

Let me try this again. I've been trying to figure this out in the interim so the code has changed some as I keep trying to remove elements.

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>float test</title>
</head>
<body>
 
    <p align="center">
    <img src="images/Marchsep.gif" onmouseover="document.getElementById('PopUp').style.display = 'block'; 
                                                document.getElementById('PopUp').style.top = this.top;
                                                document.getElementById('PopUp').style.left = this.left;">
    <div id='PopUp' style='float: none; display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px; 
                           background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
         onmouseout= "this.style.display = 'none' ">
    This is a CSS Popup. I would like it to be positioned so that the top left of the pop up is based on the top left of the IMG.
    </div></p>
 
</body>
 
</html>
 

This code produces an error, I suspect that this because img.left and/or img.top are probably not legal elements.
This should hopefully be enough to inform on what I am trying to do, and hopefully a solution will be provided.

Thank you for your time on this so far.
Garth

[AricC]

what doctype are you using and which browser?

I don't see a doc type in your code.

[drhowarddrfine]

You need a doctype. See the sticky at the top of this board.
Change this to utf-8:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
************************************************** ***************
align is deprecated. Use css instead
<p align="center">
************************************************** **************
There is no "float:none" document.getElementById('PopUp').style.left = this.left;">
<div id='PopUp' style='float: none; display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px;
background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'

[drhowarddrfine]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" >
    <style type="text/css">
 
    </style>
  </head>
<body>
<p>
<a onmouseover="document.getElementById('PopUp').style.display = 'block';">
    <img src="http://www.garthbigelow.com/images/Marchsep.gif" style="float:left">
</a>
</p>
<div id='PopUp' style='display: none; position:absolute; border: solid black 1px; padding: 10px; 
                      background-color: rgb(255,255,225); text-align: justify; font-size: 12px; 
                      width: 235px;'
 
                     onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
    This is a CSS Popup that can be positioned anywhere you want on the page 
    and can contain any test and images you want.
</div>
 
</body>
</html>