CSS help: "hovering" boxes

[Astronouth7303]

I'm working on getting the box next to the "slug" to display properly. http://www.astro73.com/slugs.html (Shut up about the tables, they'll go away.)

Basically, when you click the slug icon, it toggles the visibility of the box. When the box is hidden, the page should flow as if it were just an image. (It does.) When the box is visible, it should "float" or "hover" over the content following the icon (much like the image on the page). (Note that the red border is just for debugging.)

Any ideas?

[Ryan M.]

Do something like this:

<p>
	By clicking the slug at left, a you can hide and show a little box that displays the slug you can use in posts.
	<span class="slug" style="position: relative;"><img src="slugs_files/images/slug.gif" alt="(SLUG)" title="Show/Hide slug" /><span class="show" style="position: absolute; top: 0; left: 10px;">slug:this/should/hover/over/the/text@right</span></span>
	The slug address, when shown, should cover up this text (or at least the start of it).
</p>

The styles are inline. Basically, you just give the box an absolute positioning X (didn't check how many) pixels left. Because of a CSS quirck/firefox bug, you have to specify explicitly that the containing span (class="slug") is positioned relatively.

[Astronouth7303]

Originally Posted by Ryan M.

The styles are inline. Basically, you just give the box an absolute positioning X (didn't check how many) pixels left. Because of a CSS quirck/firefox bug, you have to specify explicitly that the containing span (class="slug") is positioned relatively.

Dang, you're good. Works perfectly in Firefox. (Too bad Opera has width problems. Working on that one...)
EDIT: Fixed Opera issues. Just white-space: nowrap.