CSS/JavaScript question (IE4 explicit) 
Author Message
 CSS/JavaScript question (IE4 explicit)

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";

Quote:
}

TD {
font-family: "Arial, sans-serif";
font-size: "12px";

Quote:
}

A.nav {
color: "#FFFFFF";
text-decoration: none;

Quote:
}

A:visited.nav {
color: "#FFFFFF";
text-decoration: none;

Quote:
}

A:hover.nav {
color: "#CDB9F2";
text-decoration: none;

Quote:
}

A.navblue {
color: "#006699";
text-decoration: none;

Quote:
}

A:visited.navblue {
color: "#006699";
text-decoration: none;

Quote:
}

A:hover.navblue {
color: "#CDB9F2";
text-decoration: none;

Quote:
}

.navigation {
font-family: "Arial, sans-serif";
font-size: "12px";
color: "#FFFFFF";
font-weight: "bold";

Quote:
}

</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"
        }

Quote:
}

// -->
</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>
                                                &#160;
                                        </TD>
                                        <TD class="navigation">
                                                <A class="nav"
HREF="">Business Sites</A>
                                        </TD>
                                        <TD class="navigation" WIDTH=20>
                                                &#160;
                                        </TD>
                                        <TD class="navigation">
                                                <A class="nav"
HREF="">Related Sites</A>
                                        </TD>
                                        <TD class="navigation" WIDTH=20>
                                                &#160;
                                        </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>
                                &#160;<A class="nav" HREF="">The
Cafe</A><BR>
                                &#160;<A class="navblue"
HREF="">Register</A><BR>
                                &#160;<A class="navblue"
HREF="">Help</A><BR>
                                &#160;<A class="navblue"
HREF="">Contacts</A><BR>
                                &#160;<A class="navblue"
HREF="">About</A><BR>
                        </TD>
                </TR>
        </TABLE>
</DIV>

</BODY>
</HTML>

Sent via Deja.com http://www.*-*-*.com/
Before you buy.



Fri, 20 Dec 2002 03:00:00 GMT  
 CSS/JavaScript question (IE4 explicit)
Hi

I've never used this kind of stuff so I'm just guessing. I think you should
also change the zindex property of these DIVs.

Klaus

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>
>                                                 &#160;
>                                         </TD>
>                                         <TD class="navigation">
>                                                 <A class="nav"
> HREF="">Business Sites</A>
>                                         </TD>
>                                         <TD class="navigation" WIDTH=20>
>                                                 &#160;
>                                         </TD>
>                                         <TD class="navigation">
>                                                 <A class="nav"
> HREF="">Related Sites</A>
>                                         </TD>
>                                         <TD class="navigation" WIDTH=20>
>                                                 &#160;
>                                         </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>
>                                 &#160;<A class="nav" HREF="">The
> Cafe</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Register</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Help</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Contacts</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">About</A><BR>
>                         </TD>
>                 </TR>
>         </TABLE>
> </DIV>

> </BODY>
> </HTML>

> Sent via Deja.com http://www.deja.com/
> Before you buy.



Fri, 20 Dec 2002 03:00:00 GMT  
 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>
>                                                 &#160;
>                                         </TD>
>                                         <TD class="navigation">
>                                                 <A class="nav"
> HREF="">Business Sites</A>
>                                         </TD>
>                                         <TD class="navigation" WIDTH=20>
>                                                 &#160;
>                                         </TD>
>                                         <TD class="navigation">
>                                                 <A class="nav"
> HREF="">Related Sites</A>
>                                         </TD>
>                                         <TD class="navigation" WIDTH=20>
>                                                 &#160;
>                                         </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>
>                                 &#160;<A class="nav" HREF="">The
> Cafe</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Register</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Help</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">Contacts</A><BR>
>                                 &#160;<A class="navblue"
> HREF="">About</A><BR>
>                         </TD>
>                 </TR>
>         </TABLE>
> </DIV>

> </BODY>
> </HTML>

> Sent via Deja.com http://www.deja.com/
> Before you buy.



Fri, 20 Dec 2002 03:00:00 GMT  
 CSS/JavaScript question (IE4 explicit)
On Mon, 03 Jul 2000 07:16:15 -0700, Mike Gerschefske

Mike,

Thank you for the help! Your fix worked, but it was still choppy
looking CSS because I had every link I was rolling over with an
associated even, so I spent all day yesterday reworking it into
something MUCH simpler and more elegant (if I do say so myself). At
the end of the day, I was WHOLLY stumped as to what the HELL this new
one is doing.

If you look at it, you'll see what I mean, roll over the first two
links a few times. They work PERFECTLY the way I want all four of them
to. The second two{*filter*}up unimaginably, and I can find *no reason*
that it should be happening. I seriously think it's a glitch in IE4's
CSS interpreter... (for all I know it might work in IE5 but in 4,
which is what I'm coding for, it screws up unimaginably) Check it out:

http://www.*-*-*.com/

ARRGH!

A7



Sat, 21 Dec 2002 03:00:00 GMT  
 CSS/JavaScript question (IE4 explicit)
Good news, it works perfect in IE 5.5 and has no hope what so ever in
Netscape.  But, you only want it to work for IE 4.  Wow, well, I see what
you're saying (Dusting off and pulling out IE 4), I'm not 100% sure why
those other two menus aren't working correctly.  First off, make sure you
close all of your HTML tags, I noticed that the HEAD & HTML tags weren't
closed, after closing them you'll notice the placement of your menus
different.  I was trying to follow through your JS and then started
running into for loops and arrays <shrug>.  Those two are definately not
my strong spots!  Personally, I'd stick with your other JS for the menus,
it's a bit more simplistic, and it works (I belive).  Unfortunately we
both know it's the JS that doesn't work, and it's 11:00 at night, and I
don't make a good script de{*filter*} right now  :o)  Sorry I can't help,
-Mike Gerschefske
Quote:

> On Mon, 03 Jul 2000 07:16:15 -0700, Mike Gerschefske

> Mike,

> Thank you for the help! Your fix worked, but it was still choppy
> looking CSS because I had every link I was rolling over with an
> associated even, so I spent all day yesterday reworking it into
> something MUCH simpler and more elegant (if I do say so myself). At
> the end of the day, I was WHOLLY stumped as to what the HELL this new
> one is doing.

> If you look at it, you'll see what I mean, roll over the first two
> links a few times. They work PERFECTLY the way I want all four of them
> to. The second two{*filter*}up unimaginably, and I can find *no reason*
> that it should be happening. I seriously think it's a glitch in IE4's
> CSS interpreter... (for all I know it might work in IE5 but in 4,
> which is what I'm coding for, it screws up unimaginably) Check it out:

> http://www.*-*-*.com/

> ARRGH!

> A7



Sat, 21 Dec 2002 03:00:00 GMT  
 
 [ 5 post ] 

 Relevant Pages 

1. I need to ask a Javascript question: NS Specific - CSS Sheets

2. problems with JavaScript, CSS, and IE5

3. Javascript-CSS

4. Benja: CSS/JavaScript Problem

5. help on CSS and javascript

6. JavaScript in CSS?

7. Javascript/CSS in ASP

8. Include JavaScript code within external CSS files

9. CSS question

10. Quick question about CSS

11. Setting HTML Attributes like contentEditable by CSS with HTC - question

12. Javascript problem IE4.01

 

 
Powered by phpBB® Forum Software