how to suppress line breaks assoc. with div

[clair]

Hi John --
Here is the question I threatened you with yesterday after you answered my DD script question:

Is there a way to suppress the line breaks associated with a div ??
The page in question is

http://www.vt2000.com/testpop.htm

Well, I answered that question myself -- use span instead of div. (I'm constantly reading because I'm just starting with CSS -- and today I read about span and class!)

NOW I have another question:
Why does the text below the link in question disappear when the box pops up??


The section in question is the "virtualhosting.com" link at the bottom of the center section. It is an implementation of Eric Meyer's non-javascript popup box.

Here's the HTML:

<span class="popup">
<a href=""https://mywebs.securesites.com/affiliate/program/clickme.cgi?exec=cadunn$amp;site=site1">virtualhosting.com
<span><strong><u>Why Would I Send <br />You Somewhere Else</u>?</strong><br />
If you don't want to use VT2000, then I still want to save you money and hassle. What you can get for $15 or $20 at virtualhosting.com many, many others will charge between $25 and $50 for. Sometimes good advice is free! Cheers.
</span></a></span>

Any thoughts much appreciated. Thanks.
clair

Here's the CSS:

.popup a span {display: none;}

a:hover {text-indent:0;}

.popup a:hover span {
display: block;
border: 3px ridge maroon;
position: relative; top: -210px; left: 100; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: maroon; background: #FFFFcc;
font: 10px "Trebuchet MS", sans-serif; text-align: left; text-decoration: none;
}

[jscheuer1]

Try using position absolute, instead of relative. Your left and top coords will have to be different, however, oftentimes a position absolute element with no left and top will display in place. The problem you are having is that with relative position, the element takes up layout space and is pushing the rest of the content down. You might notice the scrollbar on the right showing that the page has gotten longer. I'd also try this:


.popup a span {
display: none;
position:absolute;
top:150%;
left:42%;
}

a:hover {text-indent:0;}

.popup a:hover span {
display: block;
border: 3px ridge maroon;
width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: maroon; background: #FFFFcc;
font: 10px "Trebuchet MS", sans-serif; text-align: left; text-decoration: none;
}


But, from playing around with this a little bit, I suspect that your layout may make things different in different browsers. You might want to look into a pop up script, where the pop up is outside the flow of the document completely and therefore easier to position.