CSS Tooltip/Lightbox issue + RSS feed

[nedsnurb]

Hi,

Basically I am developing a website for a university project, all fine so far, site is set-up and I have managed to display a image gallery using lightbox. However I need to have tooltips on the images, which I cannot seem to get working. I have some code in place but the images mess up when I hover over them.

my code in the css :-

.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

html

<a class="tooltip" href="images/friends/arnie.jpg" rel="lightbox[friends]"><span class="classic">This is my friend arnie, click to enlarge!</span><img class="gallery" src="images/friends/arnie_small.jpg" alt="friend 1" /></a>

I have uploaded an example picture to highlight the issue.

Secondary Question was less important but im looking at putting in a RSS feed, again first time of doing this in a website so any pointers/tutorials?

Many Thanks

[drjohn]

Just give each link a title, which will appear as a tooltip for you with absolutely no effort required. No special tooltip code required what so ever.

<a href="images/friends/arnie.jpg" rel="lightbox[friends]" title="This will show up as a tool tip when the mouse is hovering"><span class="classic">This is my friend arnie, click to enlarge!</span><img class="gallery" src="images/friends/arnie_small.jpg" alt="friend 1" title="While this bit will appear as the cation in the lightbox, okay?" /></a>

[nedsnurb]

cheers drjohn for the fast response, although this is what I am looking for I believe that I need to specifically use css for the tooltips.

[Arkinder]

You're using both float: left; and position: absolute; , only one is needed and putting only cancels one out. Also, when using float: left; or position: absolute; the element is removed from the normal flow of the page. Try using top and left to position the image where you would like it.

Regards, Arkinder

[nedsnurb]

thanks for the reply arkinder, I have now sorted the issue, albeit all I did was take out the

.tooltip:hover img

which seemed to work.

regards to the RSS issue, obviously I have'nt got a http address for the site, but would creating a live rss feed involve creating an xml file with the items and channels and then validating an publishing?

also is it possible to embed an rss into a site, and would this take much effort?