6 replies [Last post]
Big Bat
Big Bat's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT-5
Joined: 2014-05-27
Posts: 4
Points: 5

Today I discovered a problem with this css that I have used for years:

#popitmenu{
position: absolute;
background-color: #FFDEAD;
border:1px solid black;
font: normal 12px "Lucida Console";
line-height: 24px;
z-index: 100;
visibility: hidden;
}
 
#popitmenu a{
border-Style: outset;
border-width: medium;
text-decoration: none;
padding-top:2px;
padding-left:7px;
padding-right:5px;
padding-bottom:1px;
color: black;
}
 
#popitmenu a:hover{
background-color: #FFFFE0;
color:blue;
}
 
#popitmenu a:active{
border-Style: inset;
}
.
It works but the problem is with the border-Style: inset; not displaying the same in all browsers. Once a link has been clicked, the popup button stays "inset" even if the browser has been closed and restarted even hours later. This happens in Google Chrome, Comodo Dragon, & Safari(all latest versions). It does not happen in Firefox, Opera, Seamonkey(latest versions) or even the last version of Netscape(9.0.0.6). "Inset" doesn't work at all in IE11. Is this the age old problem of browsers not implementing css standards across the board or is it something I have done wrong? Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta name="keywords" content="">
  <title>Church of Christ/North in Shreveport, Louisiana</title>
    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="style2.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.cocn.org/popitmenu.css">
    <link rel="shortcut icon" href="http://www.cocn.org/favicon.ico">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.magnifier.js"></script>
    <script type="text/javascript" src="http://www.cocn.org/popitmenu.js"></script>
</head>
<body style="font-size:100%; background-color:#E0FFFF">
  <noscript>Your browser does not support Javascript or you have Javascript disabled</noscript>
  <a name="Top_of_Page"></a>
  <table width="780" cellpadding="0" cellspacing="0" border="0" bgcolor="#E0FFFF">
    <tr>
      <td style="background-color:rgb(224,255,255)">
          <img src="CoCN_Online.gif" alt="" align="top" width="780" height="86">
      </td>
    </tr>
  </table>
  <table width="780" cellpadding="0" cellspacing="0" border="0" bgcolor="#E0FFFF">
    <tr>
      <td>
      <img src="ShreveportOnline.gif" alt="" align="top" width="280" height="86"></td>
      <td width="477"><center style="font-family:Tahoma; font-size:0.9em; font-weight:bold">CHURCH OF CHRIST/NORTH<br>
      3401 North Market St.<br>Shreveport, Louisiana&nbsp; 71107<br>
      Phone: 318-226-1305&nbsp;&nbsp;&nbsp;&nbsp; Fax: 318-226-1306</center>
      </td>
    </tr>
  </table>
  <table width="780" cellpadding="0" cellspacing="0" border="0" bgcolor="#E0FFFF">
  <tr>
    <td valign="top">
        <map name="FPMap0">
        <area href="#" alt="" shape="rect" coords="18, 6, 104, 25" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">
        <area href="#" alt="" shape="rect" coords="18, 40, 99, 58" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">
        <area href="#" alt="" shape="rect" coords="18, 76, 117, 94" onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()">
        <area href="#" alt="" shape="rect" coords="18, 110, 89, 128" onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()">
        <area href="#" alt="" shape="rect" coords="18, 148, 87, 162" onMouseover="showmenu(event,linksetx[0])" onMouseout="delayhidemenu()">
        <area href="http://www.cocn.org/contactus.html" alt="" shape="rect" coords="18, 178, 92, 197">
        <area href="http://www.cocn.org/" alt="" shape="rect" coords="18, 212, 61, 231">
        <area href="http://www.heartofgod.org/gospel/" alt="" shape="rect" coords="18, 247, 95, 266">
        <area href="http://www.cocn.org/cocn-shop/" alt="" shape="rect" coords="18, 281, 95, 300">
        </map>
        <img SRC="NewTabsWithText.gif" alt="" align="top" width="191" border="0" usemap="#FPMap0" height="340">
    </td>
    <td align="center" valign="top" width="343">&nbsp;<p><a href="http://www.heartofgod.org/gospel/">
	    <img src="Freecd.gif" alt="" border="0" width="252" height="101"></a>
        <br><div style="font-family:Tahoma; color:blue; font-size:0.83em"><a href="http://www.heartofgod.org/gospel/">Click to view or 
		download the<br> Gospel of Jesus Christ in Flash or HTML format...</a><br><br>
		<a href="add.html">List With Us</a> | <a href="congreg.html">CoC's Online</a>
         | <a href="archives.html">Audio lessons</a><br><a href="http://www.facebook.com/pages/Church-of-Christ-North/137086612072/" rel="nofollow">
        Find Us On Facebook<br><img src="cocnfb.png" alt="" title="Church of Christ/North on Facebook"></a></div><br>
 
		<a href="http://www.cocn.org/Current_PDF_Church_of_Christ_Singing_Schedule.pdf" download="Areawide Church of Christ Singing Schedule.pdf">
		  <img src="Save-txt.jpg" alt="" border="0" onMouseOver="stm(Text[0],Style[0])" onMouseOut="htm()"></a>
        <img src="AreaSingingSchedule.jpg" alt="" border="0"  width="100" height="125">
		<a href="http://www.cocn.org/Current_PDF_Church_of_Christ_Singing_Schedule.pdf">
		  <img src="View-txt.jpg" alt="" border="0" onMouseOver="stm(Text[1],Style[0])" onMouseOut="htm()"></a>
    </td>
	<td align="left" valign="top" style="font-family:Tahoma; color:blue; font-size:0.83em">
       <center>                                          
         <a href="http://www.cocn.org/seed4sower.html"><img src="Sower1.gif" alt="" border="0" height="290" width="340"></a>
       </center>
	</td>
  </tr>
</table>
 
<DIV id="TipLayer" 
      style="visibility:hidden;
      position:absolute;
      border-style: groove;
      border-width: thin;
      background-color: #FFDEAD;
      z-index:1000;
      top:-100px;">
</DIV>
</body>
</html>
.
Here is the javascript:
/***********************************************
* Pop-it menu- © Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for full source code
* Modified 25-May-2014
***********************************************/
 
var defaultMenuWidth="" //set default menu width.
 
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
 
linkset[0]='<div class="menuitems" align="center"><a href="http://www.cocn.org/whoweare.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Who We Are&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[0]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/Elders_Staff.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Elders & Staff&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[0]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/members_only/directory.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Members Area&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
 
linkset[1]='<div class="menuitems" align="center"><a href="http://www.cocn.org/cocn_calendar_curr.html">Birthdays/Anniv./Events&nbsp;</a></div>'
linkset[1]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/SunSched.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sunday Schedule&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[1]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/WedSched.html">&nbsp;&nbsp;&nbsp;Wednesday Schedule&nbsp;&nbsp;&nbsp;</a></div>'
linkset[1]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/maps.html">&nbsp;&nbsp;&nbsp;&nbsp;Maps & Directions&nbsp;&nbsp;&nbsp;</a></div>'
linkset[1]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/cocn_site_map.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site Map&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
 
linkset[2]='<div class="menuitems" align="center"><a href="http://www.cocn.org/prayerlist.html">&nbsp;&nbsp;&nbsp;CoC/N Prayer List&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[2]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/military.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Military&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[2]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/praiseGod.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Praising God&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[2]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/submitprayer.html">&nbsp;&nbsp;Submit Prayer/Praise&nbsp;&nbsp;</a></div>'
 
linkset[3]='<div class="menuitems" align="center"><a href="http://www.cocn.org/archives.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Audio Lessons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/articles.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Articles&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/BaptismLessons.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Baptism Lessons&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/add.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;List With Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.heartofgod.org/gospel/">&nbsp;&nbsp;&nbsp;Gospel Presentation&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/churches-looking.html">&nbsp;&nbsp;&nbsp;Preacher Positions&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.heartofgod.org/outlines/">&nbsp;&nbsp;Sermon/Study Outlines&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/sLSearch.html">&nbsp;&nbsp;&nbsp;&nbsp;Search Our Site&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/congreg.html">&nbsp;&nbsp;Congregations online&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/translate.html">&nbsp;&nbsp;&nbsp;&nbsp;Translate CoC/N&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/links.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other Links&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
linkset[3]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/recommend.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Recommend Us&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
 
var linksetx=new Array();
 
linksetx[0]='<div class="menuitems" align="center"><a href="http://www.heartofgod.org/gospel/">&nbsp;&nbsp;&nbsp;Gospel Presentation&nbsp;&nbsp;</a></div>'
linksetx[0]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/ladies.html">&nbsp;&nbsp;Ladies Class Ministry&nbsp;</a></div>'
linksetx[0]+='<div class="menuitems" align="center"><a href="http://www.cocn.org/towel.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Towel Mission&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>'
 
//  No need to edit beyond here
 
function showmenu(e, which, optWidth){
  var o=showmenu.pop,s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop],xy=window.event?[e.clientX+s[0],e.clientY+s[1]]:[e.pageX,e.pageY];
 if (!o){
  o=showmenu.pop={};
  o.p=document.createElement('DIV');
  o.p.id='popitmenu';
  document.body.appendChild(o.p);
  o.p.onmouseover=clearhidemenu;
  o.p.onmouseout=delayhidemenu;
  o.m=document.createElement('DIV');
  o.m.style.position='fixed';
  o.m.style.right=o.m.style.bottom=o.m.style.width=o.m.style.height='0px';
  document.body.appendChild(o.m);
 }
 if (o){
  clearhidemenu();
  o.p.innerHTML=which;
  o.p.style.width=(typeof optWidth!='undefined')?optWidth:defaultMenuWidth;
  o.p.style.left=Math.min(xy[0],o.m.offsetLeft-o.p.offsetWidth+s[0])+'px';
  o.p.style.top=Math.min(xy[1],o.m.offsetTop-o.p.offsetHeight+s[1])+'px';
  o.p.style.visibility='visible';
 }
 return false
}
 
function hidemenu(){
 var o=showmenu.pop;
 o?o.p.style.visibility='hidden':null;
}
 
function delayhidemenu(){
 var o=showmenu.pop;
 o?o.to=setTimeout(function(){ hidemenu(); },000):null;
}
 
function clearhidemenu(){
 var o=showmenu.pop;
 o?clearTimeout(o.to):null;
}
.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Big Bat Strange it looks

Hi Big Bat
Strange it looks fine.
What happens if you put

#popitmenu a:visited{
   border-style:outset;
}

before #popitmenu a:hover

Big Bat
Big Bat's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT-5
Joined: 2014-05-27
Posts: 4
Points: 5

Tried exactly what you have

Tried exactly what you have suggested but the results were the same. I'm at a loss as to how to fix it.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Big Bat, Can you link to

Hi Big Bat,
Can you link to an example page?

Big Bat
Big Bat's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT-5
Joined: 2014-05-27
Posts: 4
Points: 5

Test link...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

The problem is that the

The problem is that the border-color hasn't been specified, so browsers are using the default values for :visited outset.

Just specify the border-color especially for the visited state.

Big Bat
Big Bat's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT-5
Joined: 2014-05-27
Posts: 4
Points: 5

You're a genius...

You're a genius, thanks. Works as I thought it should.