Jumpin' Behaviors Table in IE

[Don Dean]

Hi All,
I finally published my first "real" Website and hope to make a little money
with it.
I used FP 2003 and so far everything has gone pretty well. Although I've
got a quirky little problem, I don't know if it is fix-able.

I created a main navigation table using text links in the cells and then
using Behaviors, bring up sub-menu navigation tables with a mouseover.

I've tested the nav tables in multiple browsers and they look good, except
for IE. When you IE and run the mouse over one of the text links or cells in
a sub-menu table, the thing jumps or shakes like crazy. When you move the
mouse to another submenu cell or over another text link, it jumps again.

Anyone had this happen to them before.
Is there a way to fix it.
The site is webbuilderscafe.com

Would also appreciate anyone who would be willing to give me an evaluation
(honest opinions desired) on my work

Thanks a bunch.

 

[Rob Giordano \(Crash\)]

maybe an illusion, try it without the embolden font on mouseover...maybe the
yellow color too(?)


| Hi All,
| I finally published my first "real" Website and hope to make a little
money
| with it.
| I used FP 2003 and so far everything has gone pretty well. Although I've
| got a quirky little problem, I don't know if it is fix-able.
|
| I created a main navigation table using text links in the cells and then
| using Behaviors, bring up sub-menu navigation tables with a mouseover.
|
| I've tested the nav tables in multiple browsers and they look good, except
| for IE. When you IE and run the mouse over one of the text links or cells
in
| a sub-menu table, the thing jumps or shakes like crazy. When you move the
| mouse to another submenu cell or over another text link, it jumps again.
|
| Anyone had this happen to them before.
| Is there a way to fix it.
| The site is webbuilderscafe.com
|
| Would also appreciate anyone who would be willing to give me an evaluation
| (honest opinions desired) on my work
|
| Thanks a bunch.
|
| --
| Don
| *********

 

[Don Dean]

I took out both the bold font and the color change of one of the submenu
tables and then tried it. Still jumped on mouseover.

 

[Bob Lehmann]

I agree with Rob. I think it's just an illusion.

I've never cared for mouseover font weight/size effects. They either alter
the format, or worse, provide nothing but a distraction.

Also, You should consider not relying on JavaScript for your navigation. For
example; A visitor should be able to click on "Digital Photograpy" to go
somewhere, instead of having to click on the flyout menu.

Bob Lehmann

 

[Rusty]

Your grammar and punctuation is very proper, so I know this is probably just
a typo. But I know you don't want any misspells right up front so here is the
only one I see: "...Tell you the Ingredience..." I figured you might mean,
"ingredients."
Rusty

 

[Ronx]

<div id="Sites_1" class="divsubmenu" style="z-index: 1; top: 210px;"
onmouseover="FP_changeProp(/*id*/'Sites_1',0,'style.visibility','visible')"
onmouseout="FP_changeProp(/*id*/'Sites_1',0,'style.visibility','hidden')">

In the above snippet, your mouse events are dependant on entering and
leaving the <div>.
When you mouse over a table cell border in the div, you temporarily
leave the <div> and fire the onmouseout event, then re-enter the <div>
and fire the onmouseover event, and so on. Result is ghastly
flickering.
Change the mouse events so they work on links, not the <divs>
See
JavaScript/Behaviours (for FrontPage 2003)
http://www.interlacken.com/winnt/tips/tipshow.aspx?tip=28

for more details.
Also take a look at
http://myweb.tiscali.co.uk/jonspivey/menus/index.html
(mainly) CSS (all versions of FrontPage):
http://www.seoconsultants.com/css/menus/tutorial/

 

[Don Dean]

Thanks Rusty, I appreciate it.
--
Don
*********

Your grammar and punctuation is very proper, so I know this is probably just
a typo. But I know you don't want any misspells right up front so here is the
only one I see: "...Tell you the Ingredience..." I figured you might mean,
"ingredients."
Rusty

 

[Don Dean]

I think you hit the nail on the head Ronx.
I didn't think it was just an Illusion.
Thanks a bunch.
--
Don
*********

<div id="Sites_1" class="divsubmenu" style="z-index: 1; top: 210px;"
onmouseover="FP_changeProp(/*id*/'Sites_1',0,'style.visibility','visible')"
onmouseout="FP_changeProp(/*id*/'Sites_1',0,'style.visibility','hidden')">

In the above snippet, your mouse events are dependant on entering and
leaving the <div>.
When you mouse over a table cell border in the div, you temporarily
leave the <div> and fire the onmouseout event, then re-enter the <div>
and fire the onmouseover event, and so on. Result is ghastly
flickering.
Change the mouse events so they work on links, not the <divs>
See
JavaScript/Behaviours (for FrontPage 2003)
http://www.interlacken.com/winnt/tips/tipshow.aspx?tip=28

for more details.
Also take a look at
http://myweb.tiscali.co.uk/jonspivey/menus/index.html
(mainly) CSS (all versions of FrontPage):
http://www.seoconsultants.com/css/menus/tutorial/

 

[Don Dean]

Thanks Bob.
Maybe I will get rid of the bold text.

How then do you handle multiple sub-topics dealing with Digital Photography?
Do you send the visitor to another page where they then select a sub-topic,
which would send them on another trip? They'd end up having to make two
selections to get to their destination, which would be more effort for the
visitor.

Do you not like drop down menus either? It seems like everybody and their
brother are using either drop down menus across the top or flyouts on the
left side.

Do you have some examples of site navigation systems you like. I'd like to
look at them.
Thanks.

 

[Ronx]

Have a look at www.rxs-enterprises.org
where the main menu uses drop downs. Click on any main item that has
a drop down list ...

Users with no JavaScript, or no mouse, can use this menu without
problems, whereas yours would provide no navigation at all.

 

[Craig Schiller]

Have a look at www.rxs-enterprises.org
where the main menu uses drop downs. Click on any main item that has
a drop down list ...

Users with no JavaScript, or no mouse, can use this menu without
problems,

Unless they're using Netscape, in which case they see nothing but the
main menu heading on the first three links!

 

[Don Dean]

Does that mean that Netscape can not properly view a collaspsible list?
If so, then what kind of menu system would you suggest that everyone can
access?
Thanks Craig.

 

[Don Dean]

I like those menus. They look real nice.
Do you have to do anything special to make them, or are they simply a drop
down list. (I'm assume "drop down" is the same as "collapsible", right?)

You have any thought's Craig's statement that Netscape browser's can't view
a drop down list? If that's correct, then sounds like a drop down list would
not be a good idea. Is there a nav system that works for everybody's browser?

What's your general thought on using Javascript. It seems like almost every
website useses it for something. Is it to be avoided?

 

[Ronx]

Which version of Netscape? The menu is fine in NN4, Netscape 8,
Firefox 1.5, Opera 7, Opera 8, IE6 and IE7, though oversized in IE5.
In any case, click the "heading" will open a page with the other links
in full view - navigation through the site is still there.
The third and fourth items in the menu do not have dropdowns.

 

[Ronx]

Is there a nav system that works for everybody's browser

Plain text links

Do you have to do anything special to make them, or are they simply a
drop
down list. (I'm assume "drop down" is the same as "collapsible",
right?)

"Drop down" is not the same as "collapsible" - or then again, perhaps
it is.

In this menu, the leafs open out using CSS and the :hover pseudo
class.
Each menu leaf is a simple list
<ul>
<li>link here</li>
....
</ul>

The only JavaScript involved is used to enable hover on the <li>
elements in IE.
All this is explained at
http://www.seoconsultants.com/css/menus/tutorial/

I have found the horizontal menus work perfectly in almost every
browser, exceptions being NN4 (@import the CSS and problem solved)
Opera 4 and 5 (no hope for these - but who uses them?), and is a
little quirky in Mozilla 1.3 - but fully functional. I have not
tested in Safari, Netscape 6 or 7, but FireFox and Mozilla should be
equivalent to these.
I do have a problem with the vertical menu in IE5.0 - but am working
on it.

I use JavaScript, but never make it an essential part of the webpage
functionality - my pages will function with and without JavaScript.

You have any thought's Craig's statement that Netscape browser's
can't view
a drop down list?

I would like to know which version of Netscape Craig is using. I
don't know of one with the problem he described, unless Netscape 6/7
are radically different from Mozilla 1.3 and FireFox., and I recall
that Mozilla 1.3 and Netscape 6 were almost identical.

 

[Craig Schiller]

Don -

I don't know. It certainly can't properly view /that/ particular one.

Craig

 

[Craig Schiller]

Netscape 7.1.

Craig

 

[Don Dean]

Thanks for sticking with this thread Ronx.
Your input has been extremely helpful.
I'm going to change my nav system over to drop down lists starting today.

If I could ask you one final question on this subject.
Are drop down lists a W3C standard? (i.e. would they be considered XHTML?)
Is it something that might be depreciated.

 

[Ronx]

A drop down list is a combination of HTML, CSS and JavaScript, the
first 2 are covered by WSS recommendations.
If you use valid HTML (or XHTML), valid CSS, use a relevant !DOCTYPE
and cross browser JavaScript
there will be no problems with W3C recommendations. There may,
however, be problems with accessibility - but that can be designed
for. The menu I am using should cater for all these.

 

[Ronx]

I have now tested in Netscape 6.2 and Netscape 7.1
Netscape 7.1 - there are no problems that I can find.
Netscape 6.2 - the menu drop downs do not drop down, but the headings
still function to provide navigation.
However, CSS support in N6.1 is so poor (even worse than IE5) the site
does not display correctly anyway.