CSS2 positioning and visibility

the enclosed document is indicating some problems with css2

in amaya the visibility:hidden   property is not working !!

in msie  the effect is as i would like it  however  netscape
seems to be doing  position:absolute   correctly......
with left and top undefined Netscape uses 0,0
but msie uses position of enclosing box which seems like 
relative to me !!!    who is correct  and is there a way to make
this work for both....   and is amaya not respecting css2 yet
that standard was set in '98  so perhaps it is time! --
 

John Russell, VE3LL@RAC.CA
http://home.cogeco.ca/~ve3ll (2 L's as in LLAMA)
check HTML at http://www.htmlhelp.com/tools/validator/
check CSS at http://jigsaw.w3.org/css-validator/
check JavaScript at http://www.crockford.com/javascript/jslint.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title> sample dropdown menu</title>
<style type="text/css">

body{ font-family: arial,sans-serif,helvetica}
table{ font-size:8pt ; background:black ; font-weight:bold }
a{ color:#fffdd4 ; text-decoration:none }
a:hover{ color:skyblue }
td.menu{ background:#AE2C60 ; text-align:center}
table.menu{ font-size:8pt ; position:absolute ; visibility:hidden }
span.blue{ color:yellow  }
</style>

<script type="text/javascript">

function showmenu(elmnt)

{

document.all(elmnt).style.visibility="visible"

}



function hidemenu(elmnt)

{

document.all(elmnt).style.visibility="hidden"

}

</script>
</head>
<body>
<table width="100%">

    <tr bgcolor="#AE2C60">

    <td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">

    <a href="index.htm">&nbsp;&nbsp;&nbsp;&nbsp;Home &nbsp;</a><br />

    <table class="menu" id="home" width="100%">

</table>


  </td>

  <td onmouseover="showmenu('upcoming events')" onmouseout="hidemenu('upcoming events')">

   <a href="upcoming.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Upcoming Events</a><br />

   <table class="menu" id="upcoming events" width="100%">



 </table>

  </td>

  <td onmouseover="showmenu('planning tips')" onmouseout="hidemenu('planning tips')">

   <a href="planningtips.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Planning Tips &nbsp;</a><br />

   <table class="menu" id="planning tips" width="100%">

   <tr><td class="menu"><a href="planningtips.htm">Planning Calendar</a></td></tr>

   <tr><td class="menu"><a href="marriagelicence.htm">Marriage Licence</a></td></tr>

   <tr><td class="menu"><a href="showerspg.htm">Bridal Shower</a></td></tr>

   <tr><td class="menu"><a href="vidinfo.htm">Selecting a Videographer</a></td></tr>

   <tr><td class="menu"><a href="invite_etiq.htm">Invitation Etiquette</a></td></tr>


 </table>

  </td>

  <td onmouseover="showmenu('bridal registry')" onmouseout="hidemenu('bridal registry')">

   <a href="bridalregistry.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bridal Registries &nbsp;</a><br />

   <table class="menu" id="bridal registry" width="100%">

   </table>

     </td>

     <td onmouseover="showmenu('crafts')" onmouseout="hidemenu('crafts')">

      <a href="planningtips.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Crafts &nbsp;&nbsp;&nbsp;&nbsp;</a><br />

      <table class="menu" id="crafts" width="100%">

      <tr><td class="menu"><a href="planningtips.htm">Favors</a></td></tr>

      <tr><td class="menu"><a href="marriagelicence.htm">Bows</a></td></tr>

      <tr><td class="menu"><a href="showerspg.htm">Flowers</a></td></tr>

      <tr><td class="menu"><a href="vidinfo.htm">Tiaras</a></td></tr>

      <tr><td class="menu"><a href="invite_etiq.htm">Invitations</a></td></tr>


 </table>

     </td>

     <td onmouseover="showmenu('engagement announcements')" onmouseout="hidemenu('engagement announcements')">

      <a href="engagementinfo.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Submit Engagement Announcements</a><br />

      <table class="menu" id="engagement announcements" width="100%">

      <tr><td class="menu"><a href="lucashall.htm">Lucas / Hall</a></td></tr>

      <tr><td class="menu"><a href="nieuwesteegfranyo.htm">Nieuwesteeg / Franyo</a></td></tr>

 </table>


  </td>

 </tr>

</table>



</body>

</html>

Received on Sunday, 25 May 2003 17:46:52 UTC