skip to content

Information balloon pop-ups

22nd April 2006

Updated 24th June 2006


Information

For Corl DeLuna, thank you.

This one has a little bit extra to my previous demonstration. Links in the pop-ups.

The method is based on my drop-down and flyout menus whereby Internet Explorer can be made to recognise nested links by using tables.

Hover the mouse over any of the web pages to see a pop-up information box with the site name and a snippet of information. Also included are three links from the particular web site.

Non IE browsers are able to use the li:hover styling to show the pop-up balloon but IE is limited to using a:hover. Conditional comments are used to feed the nested links to IE5.5 and IE6.

IE7 beta 2 recognises li:hover so it is excluded from the conditional comments.

This works in IE5.5, IE6, IE7 beta X, Firefox, Opera etc.

IE5.01 will just see the browsers images which can still be clicked to take you to the web site.

I have chosen the above web site for no particular reason except that they have been shown in css galleries over the last few months.
If you have a CSS WEB SITE and would like it shown here instead then email me stu{at}cssplay.co.uk, the url, a line of text (similar in length to the ones above) and the three links/text. I will take a look, BUT it has to be very good to swap with the ones shown at the moment.
There are three places left.
Once these remaining web sites have been selected I will remove this offer of free advertising ;o).
Remember, there were only six places available so don't be too disappointed if I do not use your web site.

Cascading Style Sheet

Updated 24th June

There is now only one CSS file and that is the balloons.css file. This file combines the non-IE and IE CSS into a single CSS file and makes it easier to understand and update.

The xhtml

The xhtml code for the 'information balloon pop-ups' can be seen in the #info div of the page markup, so just view the source code for this information.

Please note that you will also need a standards compliant !doctype for this demonstration to work correctly.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.

2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.

3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




Recommended Sites

CSSplay web design/assistance

"The citroen.co.uk web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth


Advertise with CSSplay

CSS play pages

CSS (Design) - TOP.ORG

CSS play recommend

Earn from your site today with Netklix text adsSitegrinderFree, practical CSS menus, layouts, and examplesPSD to HTML