By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Pop up not working properly in safari.

P: 3
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!
Jan 18 '08 #1
Share this Question
Share on Google+
4 Replies


P: 3
Here is the CSS

Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.     a
  3.     {
  4.     color: blue;
  5.     }
  6.     div#content
  7.     {
  8.     margin-top: 0px;
  9.     }
  10.     div#map
  11.     {
  12.     background-image: url(map.jpg);
  13.     width: 601px;
  14.     height: 362px;
  15.     }
  16.     div.test-popup
  17.     {
  18.     background-color: #B4D1D1;
  19.     border: 1px solid gray;
  20.     margin: 0px;
  21.     padding: 0px;
  22.     width: 250px;
  23.     }
  24.     table.pinner
  25.     {
  26.     border-top: 1px solid gray;
  27.     border-bottom: 1px solid gray;
  28.     margin: 0px;
  29.     padding: 0px;
  30.     }
  31.     p
  32.     {
  33.     font-family: Arial, Helvetica, sans-serif;
  34.     }
  35.     div.pdiv
  36.         {
  37.         border-bottom: 1px solid gray;
  38.         padding-left: 5px;
  39.         padding-right: 5px;
  40.         }        
  41.     #map a span.hid
  42.         { /*CSS for enlarged image*/
  43.         position: absolute;
  44.         background-color: lightyellow;
  45.         padding: 0px;
  46.         margin: 1px;
  47.         left: -1000px;
  48.         border: 1px dashed gray;
  49.         visibility: hidden;
  50.         color: black;
  51.         text-decoration: none;
  52.         }                    
  53.     #map a {
  54.       position: relative;
  55.       height: 5px;
  56.       width: 5px;
  57.       text-decoration: none;
  58.       }
  59.     #map a i {
  60.       visibility: hidden;
  61.     }
  62.     #map a:hover
  63.         {
  64.         background-color: transparent;
  65.         z-index: 50;
  66.         }
  67.     #map a span.hid img
  68.         { /*CSS for enlarged image*/
  69.         border-width: 0;
  70.         padding: 2px;
  71.         }
  72.     #map a:hover span.hid
  73.         { /*CSS for enlarged image on hover*/
  74.         visibility: visible;
  75.         top: -50px;
  76.         left: -255px; /*position where enlarged image should offset horizontally */        
  77.         }
  78.     div.pdivnob
  79.         {
  80.         padding-left: 5px;
  81.         padding-right: 5px;
  82.         }
  83.     p.ptitle
  84.         {
  85.         padding: 0px;
  86.         margin: 0px;
  87.         text-align: center;
  88.         font-size: normal;
  89.         font-weight: bolder;
  90.         }
  91.     p.pinfo
  92.         {
  93.         padding: 0px;
  94.         margin: 0px;
  95.         padding-bottom: 6px;
  96.         padding-top: 6px;
  97.         text-align: left;
  98.         font-size: x-small;
  99.         }
  100.     p.pinfo img
  101.         {
  102.         margin-right: -5px;
  103.         float: right;
  104.         }
  105.     p.plinks
  106.         {
  107.         padding: 0px;
  108.         margin: 0px;
  109.         text-align: center;
  110.         font-size: small;
  111.         }
  112.     span.pinfot
  113.         {
  114.         padding: 0px;
  115.         margin: 0px;
  116.         text-align: left;
  117.         font-size: x-small;
  118.         font-weight: bolder;
  119.         }
  120.     ul.fview
  121.         {
  122.         padding: 0px;
  123.         padding-bottom: 5px;
  124.         margin: 0px;
  125.         margin-left: 5px;
  126.         text-align: left;
  127.         font-family: Arial, Helvetica, sans-serif;
  128.         font-size: x-small;
  129.         list-style-type: none;
  130.         }
Jan 18 '08 #2

P: 3
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]
Jan 18 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
Believe it or not, 862 HTML errors is not the worst I've ever seen.
Jan 18 '08 #4

codegecko
Expert 100+
P: 533
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
Jan 20 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.