CSS Dynamic Hover Div

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Dynamic Hover Div

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> General Web Development >> CSS Dynamic Hover Div

Page: [1]

matthewm

Posts: 4
Joined: 1/30/2008
Status: offline

CSS Dynamic Hover Div - 1/30/2008 2:37:00

Hello,

I am creating a dynamic floor map for work, it is coded in VB ASP and uses CSS DIV's for the rooms, I cant provide a URL due to it being internal (and no uploads due to only new here).

I will try to explain how the code works as it is a bit unusual. We six floors and each floor is represented individually depending upon the query string provided. Each office has a unique name, when the page is loaded it pulls all the necessary data from the DB (initials, room, extension), it then puts this information into an array with the room as the key.

To display the information, each room is made up of an absolute positioned div, and within the div a function is called which returns the user(s) information for each room.

What I would like to do is to have a hover feature where you can hover over the persons name and it bring up a div with more user information such as their full name, position etc.

I am stuck at the hover div, to test this I am using static information just so that I can get it to work. At the moment if you hover over the link, nothing happens. I think the issue is to do with me using overflow: hidden, I am using this so that if there is more information than can fit within the div that the div doesnt stuff up the alignment of everything else.

My code for the office div's:

#7E01{
	position: absolute;
	top: 295px;
	left: 912px;
	height: 55px;
	width: 65px;
	border: 2px SOLID #CCCCCC;
	text-align: center;
	overflow: hidden;
}

This is what I am trying at the moment, this isnt working though:

<DIV ID="7E01">
    7E01<BR>
<%
     strUsers = split(roomCheck("7E01"), "-")
     for each item in strUsers
         strDetails = split(item, ";")
            for each item1 in strDetails
%>
                <div class="balloon">
	    <ul>
	        <li>
		<a href="#"><% response.Write(item1) %>
		<table><tr><td>
 		    <dl id="web1">
                                        <dt>fadtastic</dt>
  		        <dd>
			<p>Fadtastic - Test 123.</p>
			<a href="#">fadtastic</a><br />
	                                <a href="#">archive</a><br />
			<a href="#">RSS Feed</a><br />
			<em></em>
                                          </dd>
                                          </dl>
 		  </td></tr></table>
  		  </a>
	         </li>
	     </ul>
	</div>
<%
	'response.Write(item1)
       next
   next
%>
</DIV>

Without this hovering div attempt, the code looks like:

<DIV ID="7E02">
     7E02<BR>
<%
     strUsers = split(roomCheck("7E02"), "-")
         for each item in strUsers
             strDetails = split(item, ";")
             for each item1 in strDetails
	response.Write(item1)
             next
         next
%>
</DIV>

The CSS and HTML for the balloon stuff is from this site: http://www.cssplay.co.uk/menu/balloons.html, this is similar to what I would like to accomplish, here is the CSS which is only slightly different to the original (different sizes and bg colour):

 /* common styling */
.balloon {
font-family: verdana, sans-serif; 
width:40px;
height:30px;
margin:10px 15px;
background: #ff0000;
}
.balloon ul {
padding:0; 
margin:0;
border:0;
list-style-type: none;
}
.balloon ul li {
float:left;
margin:5px;
width:20px;
height:20px;
border:0px solid #000;
}
.balloon ul li a, .balloon ul li a:visited {
display:block;
text-decoration:none; 
color:#000; 
width:20px; 
height:20px; 
color:#000; 
background:#fff;
}
.balloon ul li a img, .balloon ul li a:visited img {
border:0;
}

.balloon ul li dl {
visibility:hidden;
position:absolute;
}

table {
margin:-2px;
border:0;
padding:0;
border-collapse:collapse;
font-size:1em;
}

.balloon dl {width:20px; padding:0 0 20px 0; background:transparent url(../images/bottom.gif) no-repeat bottom left; height:auto;}
.balloon dt {margin:0; padding:5px; font-size:1.4em; font-weight:bold; color: #000; background:transparent url(../images/top.gif) no-repeat top left; text-align:center;}
.balloon dd {margin:0; padding:5px 15px; color:#000; font-size:1em; border:1px solid #000; border-width:0 1px; background:#fff url(../images/info.gif) no-repeat bottom right;}
.balloon dd p {padding:0; margin:10px 0; line-height:1.5em;}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon ul li:hover,
.balloon ul li a:hover {
color:#000; 
position:relative;
cursor: pointer;
cursor:hand;
}

.balloon ul li:hover dl,
.balloon ul li a:hover dl {
visibility:visible;
color:#000;
top:-75px;
left:120px;
cursor:default;
}

.balloon ul li:hover dl em,
.balloon ul li a:hover dl em {
display:block;
position:absolute;
left:-35px;
top:75px;
width:36px; 
height:36px;
background:transparent url(../images/pointer.gif);
}

.balloon ul li:hover dl a,
.balloon ul li a:hover dl a {
height:0.8em;
color:#606;
background:transparent;
text-decoration:underline;
display:inline;
}

.balloon ul li:hover dl a:hover,
.balloon ul li a:hover dl a:hover {
text-decoration:none;
background:transparent;
}

If anyone can provide me with some assistance or point me to a better resource it will be greatly appreciated.

If you require some further information let me know.

Thanks,

Matt


Tailslide Posts: 6270 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS Dynamic Hover Div - 1/30/2008 3:53:31 can you show us the generated markup so we can see what the dynamic stuff will be actually producing - it should make it easier to come up with ideas regarding displaying the extra information and the CSS. Other thing is - are you using a Valid DOCTYPE? If you're wanting to produce anything using CSS effectively then having all the browsers singing from (close to) the same songsheet is really helpful - having a DOCYTPE will at least ensure that we're not relying on their error handling routines. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to matthewm)

matthewm

Posts: 4
Joined: 1/30/2008
Status: offline

RE: CSS Dynamic Hover Div - 1/30/2008 18:41:21

Tailslide,

Thanks, I didnt have a DOCTYPE so I have added one but didnt make any changes that I could tell.

As we only use IE7 internally, I am only interested in coding for IE7.

Below is the source of the page after it has been processed by IE7:


<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>:Finlaysons Floor Maps:</title>
<link href="layout/default.css" rel="stylesheet" type="text/css" />
</head>
<body>

<DIV ID="topNavigation">
<A HREF="/arraymap/Default.asp?action=level07">Level 07</A>
<A HREF="/arraymap/Default.asp?action=level08">Level 08</A>
<A HREF="/arraymap/Default.asp?action=level09">Level 09</A>
<A HREF="/arraymap/Default.asp?action=level11">Level 11</A>
<A HREF="/arraymap/Default.asp?action=level12">Level 12</A>
<A HREF="/arraymap/Default.asp?action=ground">Ground</A>
</DIV>

<!--<IMG CLASS="map" SRC="images/Level07.jpg" WIDTH="900px">-->
<DIV ID="container">
<DIV ID="library">
<P CLASS="libraryLabel">Library<P>
</DIV>
<DIV ID="plant">
Plant
</DIV>
<DIV ID="maleWC">
Male WC
</DIV>
<DIV ID="femaleWC">
Female WC
</DIV>
<DIV ID="lifts">
Lifts/Stairwell
</DIV>
<DIV ID="serverRoom">
Computer Room
</DIV>
<DIV ID="itWall1">

</DIV>
<DIV ID="L7Kitchen">
Kitchen
</DIV>
<DIV ID="7E01">
7E01<BR>

<div class="balloon">
<ul>
<li>
<a href="#"><DIV ID="rowDiv"><DIV ID="UID">jxh</DIV>
<table><tr><td>
<dl id="web1">
<dt>fadtastic</dt>
<dd>
<p>Fadtastic - The Multi-Author Web Design Trends Journal. Web design trends discussed.</p>
<a href="http://www.fadtastic.net/">fadtastic</a><br />
<a href="http://www.fadtastic.net/archives/">archive</a><br />
<a href="http://fadtastic.net/?feed=rss2 ">RSS Feed</a><br />
<em></em>
</dd>
</dl>
</td></tr></table>
</a>
</li>
</ul>
</div>

<div class="balloon">
<ul>
<li>
<a href="#"><DIV ID="extensionDiv">(x845)</DIV>
<table><tr><td>
<dl id="web1">
<dt>fadtastic</dt>
<dd>
<p>Fadtastic - The Multi-Author Web Design Trends Journal. Web design trends discussed.</p>
<a href="http://www.fadtastic.net/">fadtastic</a><br />
<a href="http://www.fadtastic.net/archives/">archive</a><br />
<a href="http://fadtastic.net/?feed=rss2 ">RSS Feed</a><br />
<em></em>
</dd>
</dl>
</td></tr></table>
</a>
</li>
</ul>
</div>

<div class="balloon">
<ul>
<li>
<a href="#"><DIV ID="callGroup02">2</DIV><DIV ID="callGroup03">3</DIV></DIV>
<table><tr><td>
<dl id="web1">
<dt>fadtastic</dt>
<dd>
<p>Fadtastic - The Multi-Author Web Design Trends Journal. Web design trends discussed.</p>
<a href="http://www.fadtastic.net/">fadtastic</a><br />
<a href="http://www.fadtastic.net/archives/">archive</a><br />
<a href="http://fadtastic.net/?feed=rss2 ">RSS Feed</a><br />
<em></em>
</dd>
</dl>
</td></tr></table>
</a>
</li>
</ul>
</div>

</DIV>
<DIV ID="7E02">
7E02<BR>
<DIV ID="rowDiv"><DIV ID="UID">rmi</DIV><DIV ID="extensionDiv">(x604)</DIV><DIV ID="callGroup03">3</DIV></DIV>
</DIV>
<DIV ID="7E03">
7E03<BR>
<DIV ID="rowDiv"><DIV ID="UID">eft</DIV><DIV ID="extensionDiv">(x443)</DIV><DIV ID="callGroup03">3</DIV></DIV>
</DIV>
<DIV ID="7E04">
7E04<BR>
<DIV ID="rowDiv"><DIV ID="UID">amc</DIV><DIV ID="extensionDiv">(x418)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>
<DIV ID="7W05">
7W05<BR>
<DIV ID="rowDiv"><DIV ID="UID">sxc</DIV><DIV ID="extensionDiv">(x433)</DIV><DIV ID="callGroup13">13</DIV></DIV>
</DIV>
<DIV ID="7E06">
7E06<BR>

</DIV>
<DIV ID="7E07">
7E07<BR>
<DIV ID="rowDiv"><DIV ID="UID">mz</DIV><DIV ID="extensionDiv">(x473)</DIV><DIV ID="callGroup02">2</DIV></DIV><DIV ID="rowDiv"><DIV ID="UID">aeh</DIV><DIV ID="extensionDiv">(x473)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>
<DIV ID="7W08">
7W08<BR>
<DIV ID="rowDiv"><DIV ID="UID">mc</DIV><DIV ID="extensionDiv">(x447)</DIV><DIV ID="callGroup13">13</DIV></DIV>
</DIV>
<DIV ID="7E09">
7E09<BR>

</DIV>
<DIV ID="7E09b">

</DIV>
<DIV ID="7E10">
7E10<BR>
<DIV ID='user'><DIV ID="rowDiv"><DIV ID="UID">pah</DIV><DIV ID="extensionDiv">(x450)</DIV><DIV ID="callGroup03">3</DIV></DIV></DIV><DIV ID='user'></DIV>
</DIV>
<DIV ID="7W11">
7W11<BR>
<DIV ID="rowDiv"><DIV ID="servicesDiv">Italy</DIV><DIV ID="extensionDiv">(x465)</DIV></DIV>
</DIV>
<DIV ID="7E12">
7E12<BR>
<DIV ID="rowDiv"><DIV ID="UID">sxd</DIV><DIV ID="extensionDiv">(x813)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>
<DIV ID="7E13">
7E13<BR>
<DIV ID="rowDiv"><DIV ID="UID">knr</DIV><DIV ID="extensionDiv">(x561)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>		
<DIV ID="7E14">
7E14<BR>
<DIV ID="rowDiv"><DIV ID="UID">amb</DIV><DIV ID="extensionDiv">(x703)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>		
<DIV ID="7E15">
7E15<BR>
<DIV ID="rowDiv"><DIV ID="UID">krc</DIV></DIV><DIV ID="rowDiv"><DIV ID="UID">pjb</DIV><DIV ID="extensionDiv">(x439)</DIV></DIV>
</DIV>		
<DIV ID="7E16">
7E16<BR>
<DIV ID="rowDiv"><DIV ID="UID">gcm</DIV><DIV ID="extensionDiv">(x452)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>				
<DIV ID="7E17">
7E17<BR>
<DIV ID="rowDiv"><DIV ID="UID">rxb</DIV><DIV ID="extensionDiv">(x437)</DIV></DIV>
</DIV>				
<DIV ID="rightIndent">
<DIV ID="rightIndentNoOffice">

</DIV>
</DIV>
<DIV ID="7E18">
7E18<BR>
<DIV ID="rowDiv"><DIV ID="UID">sd</DIV><DIV ID="extensionDiv">(x805)</DIV><DIV ID="callGroup03">3</DIV></DIV>
</DIV>
<DIV ID="7E19">
7E19<BR>
<DIV ID="rowDiv"><DIV ID="UID">bml</DIV><DIV ID="extensionDiv">(x455)</DIV><DIV ID="callGroup03">3</DIV></DIV>
</DIV>
<DIV ID="7E20">
7E20<BR>
<DIV ID="rowDiv"><DIV ID="UID">lxw</DIV><DIV ID="extensionDiv">(x808)</DIV><DIV ID="callGroup03">3</DIV></DIV>
</DIV>
<DIV ID="7E21">
7E21<BR>
<DIV ID="rowDiv"><DIV ID="UID">anb</DIV><DIV ID="extensionDiv">(x879)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>
<DIV ID="7E22">
7E22<BR>
<DIV ID="rowDiv"><DIV ID="UID">ath</DIV><DIV ID="extensionDiv">(x816)</DIV><DIV ID="callGroup02">2</DIV></DIV>
</DIV>
<DIV ID="7E23">
7E23<BR>
<DIV ID="rowDiv"><DIV ID="UID">kah</DIV><DIV ID="extensionDiv">(x542)</DIV></DIV>
</DIV>
<DIV ID="7E24">
7E24<BR>
<DIV ID="rowDiv"><DIV ID="UID">fmw</DIV><DIV ID="extensionDiv">(x575)</DIV></DIV>
</DIV>
<DIV ID="7E25">
7E25<BR>

</DIV>
<DIV ID="7W26">
7W26<BR>
<DIV ID="rowDiv"><DIV ID="UID">cmw</DIV><DIV ID="extensionDiv">(x547)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W27">
7W27<BR>
<DIV ID="rowDiv"><DIV ID="UID">dd</DIV><DIV ID="extensionDiv">(x705)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W28">
7W28<BR>
<DIV ID="rowDiv"><DIV ID="UID">ljs</DIV><DIV ID="extensionDiv">(x491)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W29">
7W29<BR>
<DIV ID="rowDiv"><DIV ID="UID">keh</DIV><DIV ID="extensionDiv">(x566)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W30">
7W30<BR>
<DIV ID="rowDiv"><DIV ID="UID">knp</DIV><DIV ID="extensionDiv">(x578)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W31">
7W31<BR>
<DIV ID="rowDiv"><DIV ID="UID">sjp</DIV><DIV ID="extensionDiv">(x635)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="leftIndent">
<DIV ID="7W32">
7W32<BR>

</DIV>
<DIV ID="7W33">
7W33<BR>

</DIV>
</DIV>
<DIV ID="7W34">
7W34<BR>
<DIV ID="rowDiv"><DIV ID="UID">djk</DIV><DIV ID="extensionDiv">(x806)</DIV><DIV ID="callGroup01">1</DIV></DIV><DIV ID="rowDiv"><DIV ID="UID">npl</DIV><DIV ID="extensionDiv">(x821)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W35">
7W35<BR>
<DIV ID="rowDiv"><DIV ID="UID">vlr</DIV><DIV ID="extensionDiv">(x533)</DIV><DIV ID="callGroup13">13</DIV></DIV>
</DIV>
<DIV ID="7W36">
7W36<BR>
<DIV ID="rowDiv"><DIV ID="UID">exs</DIV><DIV ID="extensionDiv">(x466)</DIV></DIV><DIV ID="rowDiv"><DIV ID="UID">tmpay</DIV><DIV ID="extensionDiv">(x466)</DIV></DIV>
</DIV>
<DIV ID="topIndent">
<DIV ID="7W37">
7W37<BR>
Library<BR>
(Reading Room)
</DIV>
</DIV>

<DIV ID="7W54">
7W54<BR>
<DIV ID="rowDiv"><DIV ID="UID">lad</DIV><DIV ID="extensionDiv">(x558)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W55">
7W55<BR>

</DIV>
<DIV ID="7W56">
7W56<BR>
<DIV ID="rowDiv"><DIV ID="UID">jkb</DIV><DIV ID="extensionDiv">(x412)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W57">
7W57<BR>
<DIV ID="rowDiv"><DIV ID="UID">nxs</DIV><DIV ID="extensionDiv">(x846)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W58">
7W58<BR>
<DIV ID="rowDiv"><DIV ID="UID">tlw</DIV><DIV ID="extensionDiv">(x666)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
<DIV ID="7W58Wall">

</DIV>
<DIV ID="7W59">
7W59<BR>
<DIV ID="rowDiv"><DIV ID="UID">mm</DIV><DIV ID="extensionDiv">(x638)</DIV><DIV ID="callGroup01">1</DIV></DIV>
</DIV>
</DIV>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div class="balloon">
<ul>
<li>
<a href="#">Hello There
<table><tr><td>
<dl id="web1">
<dt>fadtastic</dt>
<dd>
<p>Fadtastic - The Multi-Author Web Design Trends Journal. Web design trends discussed.</p>
<a href="http://www.fadtastic.net/">fadtastic</a><br />
<a href="http://www.fadtastic.net/archives/">archive</a><br />
<a href="http://fadtastic.net/?feed=rss2 ">RSS Feed</a><br />
<em></em>
</dd>
</dl>
</td></tr></table>
</a>
</li>
</ul>
</div>

Default.css looks like:
@import "level07.css";
@import "level08.css";
@import "level09.css";
@import "level11.css";
@import "level12.css";
@import "ground.css";
@import "floormap.css";

body,html{
background-color: #DDDDDD;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;  
}
.map{
}
#rowDiv{
position: relative;
float: left;
width: 99%;
}
#UID{
position: relative;
float: left;
margin-left: 3px;
}
#servicesDiv{
position: relative;
float: left;
margin-left: 3px;
width: 99%;
}
#extensionDiv{
position: relative;
float: left;
margin-left: 3px;
}

#serror{
float: right;
top: 1px;
right: 1px;
font: 11px #FF0000 veranda;
width: 30px;

}
#container{
position: absolute;
margin: 0px;
padding:0px;

text-align: left;
width: 1100px;
height: 458px;
background-color: #FFFFFF;
border: 4px SOLID #CCCCCC;
overflow: hidden;
}
#topNavigation{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; 
}
#user{
float:left;
width: 55px;
text-align: center;
}
#leftIndent{
position: absolute;
border-right: 4px SOLID #CCCCCC;
border-top: 4px SOLID #CCCCCC;
border-bottom: 4px SOLID #CCCCCC;
background-color: #DDDDDD;
border-left: 4px SOLID #DDDDDD;
left: -4px;
top: 167px;
height: 117px;
width:20px;
}
#rightIndent{
position: absolute;
border-left: 4px SOLID #CCCCCC;
border-top: 4px SOLID #CCCCCC;
border-bottom: 4px SOLID #CCCCCC;
background-color: #DDDDDD;
right: -4px;
top: 167px;
height: 117px;
width:20px;
}
#rightIndentNoOffice{
position: absolute;
left: -37px;
height: 116px;
width: 34px;
top: -4px;
border-bottom: 2px SOLID #CCCCCC;
border-top: 2px SOLID #CCCCCC;
text-align: center;
background-color: #FFFFFF;
}
#topIndent{
position: absolute;
border-left: 4px SOLID #CCCCCC;
border-right: 4px SOLID #CCCCCC;
border-bottom: 4px SOLID #CCCCCC;
border-top: 4px SOLID #DDDDDD;
background-color: #DDDDDD;
left: 450px;
top: -4px;
height: 20px;
width:160px;
z-index: 100;
}

#plant{
position: absolute;
bottom: -4px;
left: 420px;
height: 72px;
width: 250px;
border: 2px SOLID #CCCCCC;
text-align: center;
}

#maleWC{
position: absolute;
bottom: 66px;
left: 495px;
height: 43px;
width: 51px;
border: 2px SOLID #CCCCCC;
text-align: center;
/*background-color: #FF0000;*/
}
#femaleWC{
position: absolute;
bottom: 66px;
left: 544px;
height: 43px;
width: 51px;
border: 2px SOLID #CCCCCC;
text-align: center;
/*background-color: #FF0000;*/
}
#lifts{
position: absolute;
bottom: 107px;
left: 380px;
height: 47px;
width: 350px;
border: 2px SOLID #CCCCCC;
text-align: center;
/*background-color: #FF0000;*/
}

#callGroup01{ position: relative; float: left; left: 3px; background: #FFF000; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup02{ position: relative; float: left; left: 3px; background: #FF0000; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup03{ position: relative; float: left; left: 3px; background: #FF00FF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup04{ position: relative; float: left; left: 3px; background: #DDC0FF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup05{ position: relative; float: left; left: 3px; background: #00FFFF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup06{ position: relative; float: left; left: 3px; background: #00FF00; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup07{ position: relative; float: left; left: 3px; background: #AAAAFF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup08{ position: relative; float: left; left: 3px; background: #2AFFFF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup09{ position: relative; float: left; left: 3px; background: #FFFF55; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup10{ position: relative; float: left; left: 3px; background: #00FF7F; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup11{ position: relative; float: left; left: 3px; background: #FF007F; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup12{ position: relative; float: left; left: 3px; background: #6E1999; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}
#callGroup13{ position: relative; float: left; left: 3px; background: #007FFF; height: 10px; width: 10px;  font: 8px #000000 verdana,arial;}

/* common styling */
.balloon {
font-family: verdana, sans-serif; 
width:40px;
height:30px;
margin:10px 15px;
background: #ff0000;
}
.balloon ul {
padding:0; 
margin:0;
border:0;
list-style-type: none;
}
.balloon ul li {
float:left;
margin:5px;
width:20px;
height:20px;
border:0px solid #000;
}
.balloon ul li a, .balloon ul li a:visited {
display:block;
text-decoration:none; 
color:#000; 
width:20px; 
height:20px; 
color:#000; 
background:#fff;
}
.balloon ul li a img, .balloon ul li a:visited img {
border:0;
}

.balloon ul li dl {
visibility:hidden;
position:absolute;
}

table {
margin:-2px;
border:0;
padding:0;
border-collapse:collapse;
font-size:1em;
}

.balloon dl {width:20px; padding:0 0 20px 0; background:transparent url(../images/bottom.gif) no-repeat bottom left; height:auto;}
.balloon dt {margin:0; padding:5px; font-size:1.4em; font-weight:bold; color: #000; background:transparent url(../images/top.gif) no-repeat top left; text-align:center;}
.balloon dd {margin:0; padding:5px 15px; color:#000; font-size:1em; border:1px solid #000; border-width:0 1px; background:#fff url(../images/info.gif) no-repeat bottom right;}
.balloon dd p {padding:0; margin:10px 0; line-height:1.5em;}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon ul li:hover,
.balloon ul li a:hover {
color:#000; 
position:relative;
cursor: pointer;
cursor:hand;
}

.balloon ul li:hover dl,
.balloon ul li a:hover dl {
visibility:visible;
color:#000;
top:-75px;
left:120px;
cursor:default;
}

.balloon ul li:hover dl em,
.balloon ul li a:hover dl em {
display:block;
position:absolute;
left:-35px;
top:75px;
width:36px; 
height:36px;
background:transparent url(../images/pointer.gif);
}

.balloon ul li:hover dl a,
.balloon ul li a:hover dl a {
height:0.8em;
color:#606;
background:transparent;
text-decoration:underline;
display:inline;
}

.balloon ul li:hover dl a:hover,
.balloon ul li a:hover dl a:hover {
text-decoration:none;
background:transparent;
}

and as we are looking at level07, level07.css looks like:

.map{
}
#L7Kitchen{ /* Number 51 */
position: absolute;
top: 168px;
left: 324px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#serverRoom{ /* Number 51 */
position: absolute;
top: 168px;
left: 246px;
height: 55px;
width: 80px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#itWall1{
position: absolute;
top: 168px;
left: 190px;
height: 55px;
width: 80px;
border-bottom: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#library{
position: absolute;
top: -4px;
left: 110px;
height: 174px;
width: 342px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
.libraryLabel{
padding-top: 80px;

}
#7E01{
position: absolute;
top: 295px;
left: 912px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E02{
position: absolute;
top: 295px;
left: 849px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E03{
position: absolute;
top: 295px;
left: 786px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E04{
position: absolute;
top: -4px;
left: 662px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W05{
position: absolute;
top: -4px;
left: 347px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E06{
position: absolute;
top: 105px;
left: 849px;
height: 60px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E07{
position: absolute;
top: 105px;
left: 912px;
height: 60px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W08{
position: absolute;
top: -4px;
left: 284px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E09{
position: absolute;
top: 105px;
left: 662px;
width: 189px;
height: 113px;
border-bottom: 2px SOLID #CCCCCC;
border-top: 2px SOLID #CCCCCC;
border-left: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E09b{
position: absolute;
top: 163px;
left: 849px;
height: 55px;
width: 40px;
border-bottom: 2px SOLID #CCCCCC;
border-right: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E10{
position: absolute;
top: 163px;
left: 887px;
height: 55px;
width: 90px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}

#7W11{ /* Italy */
position: absolute;
top: 168px;
left: 387px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E12{
position: absolute;
top: -4px;
left: 725px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E13{
position: absolute;
top: -4px;
left: 788px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E14{
position: absolute;
top: -4px;
left: 851px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E15{
position: absolute;
top: -4px;
left: 914px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E16{
position: absolute;
top: -4px;
left: 1000px;
height: 90px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E17{
position: absolute;
top: 84px;
left: 1000px;
height: 85px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E18{
position: absolute;
top: 281px;
left: 1000px;
height: 85px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E19{
position: absolute;
top: 364px;
left: 1000px;
height: 90px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E20{
position: absolute;
top: 382px;
left: 942px;
height: 72px;
width: 60px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}

#7E21{
position: absolute;
top: 382px;
left: 884px;
height: 72px;
width: 60px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E22{
position: absolute;
top: 382px;
left: 826px;
height: 72px;
width: 60px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E23{
position: absolute;
top: 382px;
left: 768px;
height: 72px;
width: 60px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E24{
position: absolute;
top: 382px;
left: 717px;
height: 72px;
width: 53px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7E25{
position: absolute;
top: 382px;
left: 668px;
height: 72px;
width: 51px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W26{
position: absolute;
top: 382px;
left: 357px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W27{
position: absolute;
top: 382px;
left: 231px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W28{
position: absolute;
top: 382px;
left: 168px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W29{
position: absolute;
top: 382px;
left: 105px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W30{
position: absolute;
top: 364px;
left: -4px;
height: 90px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W31{
position: absolute;
top: 281px;
left: -4px;
height: 85px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}

#7W32{
position: absolute;
bottom: -4px;
left: 12px;
height: 59px;
width: 79px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W33{
position: absolute;
top: -4px;
left: 12px;
height: 59px;
width: 79px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W34{
position: absolute;
top: 109px;
left: -4px;
height: 60px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W35{
position: absolute;
top: 51px;
left: -4px;
height: 60px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W36{
position: absolute;
top: -4px;
left: -4px;
height: 57px;
width: 95px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W37{ /* Library Reading Room */
position: absolute;
top: 18px;
left: -4px;
height: 209px;
width: 160px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W54{
position: absolute;
top: 295px;
left: 107px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W55{
position: absolute;
top: 295px;
left: 170px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W56{
position: absolute;
top: 295px;
left: 233px;
height: 55px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W57{
position: absolute;
top: 382px;
left: 294px;
height: 72px;
width: 65px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W58{
position: absolute;
top: 225px;
left: 110px;
height: 60px;
width: 80px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}
#7W59{
position: absolute;
top: 168px;
left: 110px;
height: 59px;
width: 80px;
border: 2px SOLID #CCCCCC;
text-align: center;
overflow: hidden;
}

Thanks heaps for looking at this for me.

Matt

(in reply to Tailslide)