Pop up not working properly in safari.

[zairali]

Hi,

I am trying to fix a webpage ( http://www.d.umn.edu/itss/labs/maps/ ) which uses some html (or xml also?) to show pop ups when you rollover the numbers on a map of the building. They work fine in IE and Fire Fox but dont work properly in Safari. does anyone know why its not working properly in safari and how i can get it to work? Your help would be much appreciated!

[zairali]

Here is the CSS

/* CSS Document */
    a
    {
    color: blue;
    }
    div#content
    {
    margin-top: 0px;
    }
    div#map
    {
    background-image: url(map.jpg);
    width: 601px;
    height: 362px;
    }
    div.test-popup
    {
    background-color: #B4D1D1;
    border: 1px solid gray;
    margin: 0px;
    padding: 0px;
    width: 250px;
    }
    table.pinner
    {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin: 0px;
    padding: 0px;
    }
    p
    {
    font-family: Arial, Helvetica, sans-serif;
    }
    div.pdiv
        {
        border-bottom: 1px solid gray;
        padding-left: 5px;
        padding-right: 5px;
        }        
    #map a span.hid
        { /*CSS for enlarged image*/
        position: absolute;
        background-color: lightyellow;
        padding: 0px;
        margin: 1px;
        left: -1000px;
        border: 1px dashed gray;
        visibility: hidden;
        color: black;
        text-decoration: none;
        }                    
    #map a {
      position: relative;
      height: 5px;
      width: 5px;
      text-decoration: none;
      }
    #map a i {
      visibility: hidden;
    }
    #map a:hover
        {
        background-color: transparent;
        z-index: 50;
        }
    #map a span.hid img
        { /*CSS for enlarged image*/
        border-width: 0;
        padding: 2px;
        }
    #map a:hover span.hid
        { /*CSS for enlarged image on hover*/
        visibility: visible;
        top: -50px;
        left: -255px; /*position where enlarged image should offset horizontally */        
        }
    div.pdivnob
        {
        padding-left: 5px;
        padding-right: 5px;
        }
    p.ptitle
        {
        padding: 0px;
        margin: 0px;
        text-align: center;
        font-size: normal;
        font-weight: bolder;
        }
    p.pinfo
        {
        padding: 0px;
        margin: 0px;
        padding-bottom: 6px;
        padding-top: 6px;
        text-align: left;
        font-size: x-small;
        }
    p.pinfo img
        {
        margin-right: -5px;
        float: right;
        }
    p.plinks
        {
        padding: 0px;
        margin: 0px;
        text-align: center;
        font-size: small;
        }
    span.pinfot
        {
        padding: 0px;
        margin: 0px;
        text-align: left;
        font-size: x-small;
        font-weight: bolder;
        }
    ul.fview
        {
        padding: 0px;
        padding-bottom: 5px;
        margin: 0px;
        margin-left: 5px;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        list-style-type: none;
        }

[zairali]

Here is how one of the pop ups is defined on the page:
[html]
<h2 align="left">&nbsp;</h2>
<table width="100%" border="0">
<tr>
<td width="79%"> <div id="content" align="center">
<div id="map" align="left"> <a name="kplz143" id="kplz143" style="left: 361px; top: 138px">
<!--[if lte IE 7]>
<a name="kplz143" id="kplz143" style="left: 361px; top: 138px" href="#8">
<![endif]-->
<i>8</i> <span class="hid">
<!-- BEGIN POPUP CODE _KPLZ 143_ -->
<div class="test-popup">
<div id="lab-title" class="pdiv">
<p class="ptitle">KPLZ 143</p>
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px">
<tr><td>
<div id="lab-info" class="pdivnob" valign="middle">
<p class="pinfo" valign="middle"><img src="pcicon.jpg"><img src="bwprinticon.jpg"><span class="pinfot">HOURS OF OPERATION</span></p>
</div>
</td></tr></table>
<table class="pinner" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top"> <div id="lab-info2" class="pdivnob">
<p class="pinfo"><u><b>M-Th</b></u><br>7:00am - 11:00pm<br><u><b>F</b></u><br>7:00am - 4:00pm<br><u><b>S-Su</b></u><br>CLOSED<br><!--<span class="pinfot"> CURRENT AVAILABILITY:</span></p>
<ul class="fview">
<li>10:00am: RESERVED</li>
<li>11:00am: RESERVED</li>
<li>12:00pm: OPEN</li>
</ul> -->
</div></td>
<td valign="middle"> <img src="http://labstats.d.umn.edu:8080/PieChart?lab=5&title= " height="90" border="0" align="middle"> </td>
</tr>
<tr>
<td colspan="2" align="center"> <img src="key.jpg"> </td>
</tr>
</table>
<div id="lab-links" class="pdiv">
<p class="plinks"><span class="pinfot"><a href="http://labstats.d.umn.edu:8080/public/public.swf?map_id=3&lab_id=5&srv=http://labstats.d.umn.edu:8080" target="_blank">ROOM
VIEW</a> | <a href="https://summit.d.umn.edu/r25/html/Computer_Labs.html" target="_blank">SCHEDULE</a>
| <a href="#8" target="_self">LAB INFO</a></span></p>
</div>
</div>
<!-- END POPUP CODE -->
</span>
<!--[if lte IE 7]>
</a>[/html]

[drhowarddrfine]

Believe it or not, 862 HTML errors is not the worst I've ever seen.

[JamieHowarth0]

Believe it or not, 862 HTML errors is not the worst I've ever seen.

I have to say, it is the worst I've ever seen... the worst prior to that being approx. 360 errors in HTML 4.01 Transitional...

medicineworker