CSS/JavaScript question (IE4 explicit)
This is more of a JS Script thing then a CSS one, but hey, you've got CSS in
there so I guess I'm obligated to help. Sorry to say, you're going to be
hitting yourself over the head for this one. Try adding this line right
before the table:
<DIV ID="thecafe" style="visibility:hidden; position:absolute; top:23px;
left:434px;" onMouseOver="cafeMenu('open','thecafe');"
onMouseOut="cafeMenu('close','thecafe');">
Now it tells it to open the menu when you go within the div tag, and it
tells it to close it when you exit out of the div tag. Simple mistakes
bring even the best of us down on our knees. Granted, there is another way
to do this, through specifying points and junk and veryfying them, but I
think you'll find this the easiest. Hope this helps.
-Mike Gerschefske
Quote:
> I'm going to paste some code at the end of this message after I ask my
> question. If you have a few minutes to help me out, cut and paste it
> into a textfile and run it through IE4.
> I am making a CSS menu for a corporate Intranet, and it uses IE4
> exlusively, so I don't have any cross-platform issues, really.
> The way it works: there's a link, "The Cafe." It's in a DIV. When you
> roll over it, its visibility becomes hidden and instead another DIV
> (with 5 dropdown menu items) becomes visible. But it's almost like the
> focus for the document is on the original one-item link, because even
> though the onMouseOut event is invoked in the second DIV, whenever you
> roll off where the original DIV used to be visible, the second div goes
> away and you never get the chance to click on any of the links.
> Anyone have any clue how I could get around this? Here is the code (you
> can also view it at http://24/6/163.155/test.htm):
> <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
> <HTML>
> <HEAD>
> <TITLE>A CSS menu</TITLE>
> <STYLE>
> BODY {
> margin : "0px";
> font-family: "Arial, sans-serif";
> background-image: "amexbg.jpg";
> font-size: "12px";
> }
> TD {
> font-family: "Arial, sans-serif";
> font-size: "12px";
> }
> A.nav {
> color: "#FFFFFF";
> text-decoration: none;
> }
> A:visited.nav {
> color: "#FFFFFF";
> text-decoration: none;
> }
> A:hover.nav {
> color: "#CDB9F2";
> text-decoration: none;
> }
> A.navblue {
> color: "#006699";
> text-decoration: none;
> }
> A:visited.navblue {
> color: "#006699";
> text-decoration: none;
> }
> A:hover.navblue {
> color: "#CDB9F2";
> text-decoration: none;
> }
> .navigation {
> font-family: "Arial, sans-serif";
> font-size: "12px";
> color: "#FFFFFF";
> font-weight: "bold";
> }
> </STYLE>
> <SCRIPT LANGUAGE="JavaScript">
> <!--
> function cafeMenu(doWhat,toWhat){
> if (doWhat == "open"){
> document.all[toWhat].style.visibility = "visible"
> switchEm = toWhat + "Link"
> document.all[switchEm].style.visibility = "hidden"
> }
> if (doWhat == "close"){
> document.all[toWhat].style.visibility = "hidden"
> switchEm = toWhat + "Link"
> document.all[switchEm].style.visibility = "visible"
> }
> }
> // -->
> </SCRIPT>
> </HEAD>
> <BODY>
> <TABLE WIDTH=100% HEIGHT=40 CELLPADDING=0 CELLSPACING=0 BORDER=0
> BGCOLOR=#006699>
> <TR>
> <TD ALIGN=RIGHT VALIGN=BOTTOM>
> <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
> <TR>
> <TD class="navigation">
> <DIV ID="thecafeLink"
> style="visibility:visible;">
> <A class="nav"
> HREF="" onMouseOver="cafeMenu('open','thecafe');">The Cafe</A>
> </DIV>
> </TD>
> <TD class="navigation" WIDTH=20>
>  
> </TD>
> <TD class="navigation">
> <A class="nav"
> HREF="">Business Sites</A>
> </TD>
> <TD class="navigation" WIDTH=20>
>  
> </TD>
> <TD class="navigation">
> <A class="nav"
> HREF="">Related Sites</A>
> </TD>
> <TD class="navigation" WIDTH=20>
>  
> </TD>
> <TD class="navigation">
> <A class="nav"
> HREF="">Other Links</A>
> </TD>
> </TR>
> </TABLE>
> </TD>
> </TR>
> </TABLE>
> <DIV ID="thecafe" style="visibility:hidden; position:absolute;
> top:23px; left:434px;" onMouseOut="cafeMenu('close','thecafe');">
> <TABLE WIDTH=70 HEIGHT=80 CELLPADDING=2 CELLSPACING=0>
> <TR>
> <TD class="navigation" VALIGN=TOP>
>  <A class="nav" HREF="">The
> Cafe</A><BR>
>  <A class="navblue"
> HREF="">Register</A><BR>
>  <A class="navblue"
> HREF="">Help</A><BR>
>  <A class="navblue"
> HREF="">Contacts</A><BR>
>  <A class="navblue"
> HREF="">About</A><BR>
> </TD>
> </TR>
> </TABLE>
> </DIV>
> </BODY>
> </HTML>
> Sent via Deja.com http://www.deja.com/
> Before you buy.
