CSS flyout menu working?

[Murray R. Van Luyn]

Hi,

When I was adapting the CSS flyout menu that I got off the net for my own
site, someone from this group was kind enough to point out that it wasn't
quite working right. I'm wondering if I yet have the issues with IE7 worked
out, and the menu now works?

http://www.review-a-gadget.com/

I'm sorry, I've tried to get IE7 myself, but Microsoft don't seem to want to
let me have a copy!

Regards,
Murray R. Van Luyn.

--
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

Hi,

When I was adapting the CSS flyout menu that I got off the net for my own
site, someone from this group was kind enough to point out that it wasn't
quite working right. I'm wondering if I yet have the issues with IE7
worked out, and the menu now works?

http://www.review-a-gadget.com/

Menu broken. The flyouts appear but they cannot be moused into.

I'm sorry, I've tried to get IE7 myself, but Microsoft don't seem to want
to let me have a copy!

Seems odd. Worked for me. Did you not bribe Bill enough?

--
Richard.

[Rik]

On Tue, 24 Jul 2007 16:37:53 +0200, rf <[e-mail]:

>I'm sorry, I've tried to get IE7 myself, but Microsoft don't seem to
want
to let me have a copy!

Seems odd. Worked for me. Did you not bribe Bill enough?

Or Windows 2000.... At least in the beginning it was only for XP or newer.

--
Rik Wasmus

[Rik]

On Tue, 24 Jul 2007 17:01:25 +0200, Rik <lu************@hotmail.comwrote:

On Tue, 24 Jul 2007 16:37:53 +0200, rf <[e-mail]:

>>I'm sorry, I've tried to get IE7 myself, but Microsoft don't seem to
want
to let me have a copy!

Seems odd. Worked for me. Did you not bribe Bill enough?

Or Windows 2000.... At least in the beginning it was only for XP or
newer.

Oooh, for people with the same problem:
<http://blogs.msdn.com/ie/archive/2007/04/17/ie7-virtual-pc-image-and-ie6-virtual-pc-image-refresh.aspx>

--
Rik Wasmus

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:59******************@news-server.bigpond.net.au...

>
Menu broken. The flyouts appear but they cannot be moused into.

Hi Richard,

Thanks very much for going to the trouble for me. Well that's a shock. I
guess I'm looking for another single level CSS flyout menu that works with
IEx, FireFox etc., to adapt for my site. I haven't a clue what's wrong with
this one.

Thanks again.

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:59******************@news-server.bigpond.net.au...

>>
Menu broken. The flyouts appear but they cannot be moused into.

Hi Richard,

Thanks very much for going to the trouble for me. Well that's a shock. I
guess I'm looking for another single level CSS flyout menu that works with
IEx, FireFox etc., to adapt for my site. I haven't a clue what's wrong
with this one.

You might wish to change all those conditional comments to only select IE6
or less. IE7 supports CSS flyout menus just like a real browser. It's one of
the things they did fix.

--
Richard.

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:_I******************@news-server.bigpond.net.au...

>
You might wish to change all those conditional comments to only select IE6
or less. IE7 supports CSS flyout menus just like a real browser. It's one
of the things they did fix.

--
Richard.

Hi Richard,

Hmm, that sounds familiar. If I remember correctly I think I changed the
conditions to IE7 myself for some reason at one point. I've changed them all
back to IE6.5. I wonder if that's enough to get the whole thing working in
IE7?

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:_I******************@news-server.bigpond.net.au...

>>
You might wish to change all those conditional comments to only select
IE6 or less. IE7 supports CSS flyout menus just like a real browser. It's
one of the things they did fix.

--
Richard.

Hi Richard,

Hmm, that sounds familiar. If I remember correctly I think I changed the
conditions to IE7 myself for some reason at one point. I've changed them
all back to IE6.5. I wonder if that's enough to get the whole thing
working in IE7?

Ah, no. No menu at all now.

You missed the conditional comment where you link to flyout_ie.css, so the
"non-ie6" menu is being hidden by that CSS. Fixing thatl makes the top level
visible but the flyouts still don't work.

You need to use a doctype that does not trigger quirks mode in IE7.
Specifically you are missing the url that is supposed to be at the end. Put
that in and it works fine.

--
Richard.

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:_I******************@news-server.bigpond.net.au...

>>
You might wish to change all those conditional comments to only select
IE6 or less. IE7 supports CSS flyout menus just like a real browser. It's
one of the things they did fix.

--
Richard.

Hi Richard,

Hmm, that sounds familiar. If I remember correctly I think I changed the
conditions to IE7 myself for some reason at one point. I've changed them
all back to IE6.5. I wonder if that's enough to get the whole thing
working in IE7?

Forgot to mention:

By putting that block level table inside the <aelements for IE6 you are
effectively breaking the rules. <acannot contain a block level element.
However because it is inside conditional comments the validator will never
see it anyway. Nice trick :-)

--
Richard.

[Neredbojias]

Well bust mah britches and call me cheeky, on Wed, 25 Jul 2007 04:51:37
GMT rf scribed:

>
"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

>"rf" <[e-mail] in message
news:_I******************@news-server.bigpond.net.au...

>>>
You might wish to change all those conditional comments to only
select IE6 or less. IE7 supports CSS flyout menus just like a real
browser. It's one of the things they did fix.

--
Richard.

Hi Richard,

Hmm, that sounds familiar. If I remember correctly I think I changed
the conditions to IE7 myself for some reason at one point. I've
changed them all back to IE6.5. I wonder if that's enough to get the
whole thing working in IE7?

Forgot to mention:

By putting that block level table inside the <aelements for IE6 you
are effectively breaking the rules. <acannot contain a block level
element. However because it is inside conditional comments the
validator will never see it anyway. Nice trick :-)

Sure... Murray does it and it's a nice trick. I do it and I get a
lecture. How uncoolly discriminatory!

--
Neredbojias
Half lies are worth twice as much as whole lies.

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:oC******************@news-server.bigpond.net.au...

>
Ah, no. No menu at all now.

You missed the conditional comment where you link to flyout_ie.css, so the
"non-ie6" menu is being hidden by that CSS. Fixing thatl makes the top
level visible but the flyouts still don't work.

You need to use a doctype that does not trigger quirks mode in IE7.
Specifically you are missing the url that is supposed to be at the end.
Put that in and it works fine.

--
Richard.

Hi Richard,

Thanks so much for getting involved and helping me on this one.
Unfortunately I'm not at all conversant when it comes to HTML and CSS. How
do I add the 'missing url that is supposed to be at the end' and make
everything work fine? I think the doctype is the line below, from the
heading of the .php file, but I'm not sure what to add to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Will the following fix the problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:oC******************@news-server.bigpond.net.au...

>>
Ah, no. No menu at all now.

You missed the conditional comment where you link to flyout_ie.css, so
the "non-ie6" menu is being hidden by that CSS. Fixing thatl makes the
top level visible but the flyouts still don't work.

You need to use a doctype that does not trigger quirks mode in IE7.
Specifically you are missing the url that is supposed to be at the end.
Put that in and it works fine.

--
Richard.

Hi Richard,

Thanks so much for getting involved and helping me on this one.
Unfortunately I'm not at all conversant when it comes to HTML and CSS. How
do I add the 'missing url that is supposed to be at the end' and make
everything work fine? I think the doctype is the line below, from the
heading of the .php file, but I'm not sure what to add to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Will the following fix the problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

That's the one.

or even

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN"
"http://www.w3.org/TR/html4/strict.dtd">

to be sure to be sure.

There is a good (well good for microsoft) descripton if you google for
"standards compliant mode". First hit.

--
Richard.

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:l_******************@news-server.bigpond.net.au...

>
That's the one.

or even

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN"
"http://www.w3.org/TR/html4/strict.dtd">

to be sure to be sure.

There is a good (well good for microsoft) descripton if you google for
"standards compliant mode". First hit.

--
Richard.

Hi Richard,

So, I've changed the doctype and uploaded the updated files. I now have a
CSS flyout menu that works with IE7 as well as the others?

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:l_******************@news-server.bigpond.net.au...

>>
That's the one.

or even

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN"
"http://www.w3.org/TR/html4/strict.dtd">

to be sure to be sure.

There is a good (well good for microsoft) descripton if you google for
"standards compliant mode". First hit.

--
Richard.

Hi Richard,

So, I've changed the doctype and uploaded the updated files. I now have a
CSS flyout menu that works with IE7 as well as the others?

Nope, not there in IE7.

You still have this bit in there:

<!--[if lte IE 7]>
<LINK media=all href="flyout_ie.css" type=text/css rel=stylesheet>
<![endif]-->

Should be 6.5, not 7.

Otherwise:
Works fine in IE6, IE5.5, Opera and windows Safari.

Works OK in lynx (a text only browser).

Doesn't flyout in IE5.01.

Slightly broken in Netscape 8.1. The menus are double spaced, that is the
cyan boxes have about 1em of white space between them. For the top level
menu this white space contains the that is usually at the end of the <li>

--
Richard

[John Hosking]

rf wrote:

>
You still have this bit in there:

<!--[if lte IE 7]>
<LINK media=all href="flyout_ie.css" type=text/css rel=stylesheet>
<![endif]-->

Should be 6.5, not 7.

I would have changed the condition, since 6.5 is made up, giving
<!--[if lt IE 7]>
etc.

--
Richard

Your sig separator has an extraneous space before the dashes. :-o
--
John

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:0z******************@news-server.bigpond.net.au...

>
Nope, not there in IE7.

You still have this bit in there:

<!--[if lte IE 7]>
<LINK media=all href="flyout_ie.css" type=text/css rel=stylesheet>
<![endif]-->

Should be 6.5, not 7.

Otherwise:
Works fine in IE6, IE5.5, Opera and windows Safari.

Works OK in lynx (a text only browser).

Doesn't flyout in IE5.01.

Slightly broken in Netscape 8.1. The menus are double spaced, that is the
cyan boxes have about 1em of white space between them. For the top level
menu this white space contains the that is usually at the end of the
<li>

--
Richard

Hi Richard,

I think this is about the best I'm going to be able to manage. How is it now
with the multi-level flyouts?

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Neredbojias" <mo*************@yahoo.comwrote in message
news:Xn**********************************@198.186. 190.161...

Well bust mah britches and call me cheeky, on Wed, 25 Jul 2007 06:12:34
GMT rf scribed:

>If the browser manufacturers see people openly admitting that they
have to break the rules to get something to work then perhaps version
8 or something might be a little bit better than it may otherwise have
been, or iframe may become un-deprecated. Crikey, was that a pig that
just flew by? <grin/>

:)

Yeah, when it comes right down to it, I agree with you 100%.

Cheers.

<snipilly>

and don't take my comments about the other Australians too
seriously.

There are other Aussies here? <checks under carpetBut brucie left the
building ages ago :-)

Just to reiterate, I also believe in making it very clear
when you do something unusual like that.

FWIW I am just about to change my main CMS to spit out code for flyout menus
just like Murrays, instead of the javascript I currently use. I wrote that
bit in a big hurry ages ago, with the offending javascript to hand, and
never remembered that I'd reminded myself to change it to cater for the
javascript challenged out there.

In this particular case I feel even more strongly urged to break the rules.
It affects only one specific version (or maybe two) of one browser, an aged
and broken one at that, and it *works* in that version of that browser. It
is terribly unlikely that the broken rule will be visible to any other
browser, past or future.

--
Richard.

[rf]

"John Hosking" <Jo**@DELETE.Hosking.name.INVALIDwrote in message
news:46**********@news.bluewin.ch...

rf wrote:

>>
You still have this bit in there:

<!--[if lte IE 7]>
<LINK media=all href="flyout_ie.css" type=text/css rel=stylesheet>
<![endif]-->

Should be 6.5, not 7.

I would have changed the condition, since 6.5 is made up, giving
<!--[if lt IE 7]>
etc.

Which ever way you want to do it but at the moment you are linking to the
IE6 rules which rub out the non-IE6 menu items.

Your sig separator has an extraneous space before the dashes. :-o

Typo :-(

--
Richard.

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:0z******************@news-server.bigpond.net.au...

>>
Nope, not there in IE7.

I think this is about the best I'm going to be able to manage. How is it
now with the multi-level flyouts?

Now works perfectly in IE7, even those multi level ones I hadn't noticed
before. Well done :-)

Something to consider, if you really want to:

I put put a real page underneath those menu items that lead to the submenus,
rather than href='#'. That way they actually do act as links, which they do
look like. Your viewer may, for example, be interested in airsoft as a
whole, rather then each individual one of them. You can use this page as an
overview page.

Also this gives you a place to describe, in one sentence, what each airsoft
thing is, without your viewer having to drill down to a whole page about
each thing. Sort of gives you a place to briefly introduce the entire
airsoft product line, which you can't at the moment.

On that overview page I reproduce the flyout menu as a second always visible
menu. You can sort of see this at
http://mulubinba.com.au - the information tab which, of course, is currently
"under construction" :-)

<bugHmmm. Perhaps the flyout should still dropdown from the main menu even
if the summary page is being displayed.</bug>

--
Richard.

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:wE******************@news-server.bigpond.net.au...

>
"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

>"rf" <[e-mail] in message
news:0z******************@news-server.bigpond.net.au...

>>>
Nope, not there in IE7.

>I think this is about the best I'm going to be able to manage. How is it
now with the multi-level flyouts?

Now works perfectly in IE7, even those multi level ones I hadn't noticed
before. Well done :-)

Something to consider, if you really want to:

I put put a real page underneath those menu items that lead to the
submenus, rather than href='#'. That way they actually do act as links,
which they do look like. Your viewer may, for example, be interested in
airsoft as a whole, rather then each individual one of them. You can use
this page as an overview page.

Also this gives you a place to describe, in one sentence, what each
airsoft thing is, without your viewer having to drill down to a whole page
about each thing. Sort of gives you a place to briefly introduce the
entire airsoft product line, which you can't at the moment.

On that overview page I reproduce the flyout menu as a second always
visible menu. You can sort of see this at
http://mulubinba.com.au - the information tab which, of course, is
currently "under construction" :-)

<bugHmmm. Perhaps the flyout should still dropdown from the main menu
even if the summary page is being displayed.</bug>

--
Richard.

Hi Richard,

Gosh! I don't know what to say. I would never in a million years have been
able to sort that lot out on my own. Thank you so much. I really appreciate
your having lent me your expertise to solve the problems I was having.
Heaven's there's a lot more to CSS and the various browser issues than I had
ever though. Wow, I'm really happy with that. Thank you so much. Yipee!!!

Regards,
Murray R. Van Luyn.
--
32°02'14.23"S 115°53'21.30"E
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/

[rf]

"Murray R. Van Luyn" <NOSPAM@NOSPAMwrote in message
news:46***********************@per-qv1-newsreader-01.iinet.net.au...

"rf" <[e-mail] in message
news:wE******************@news-server.bigpond.net.au...

>Now works perfectly in IE7, even those multi level ones I hadn't noticed
before. Well done :-)

<sniplage>

Gosh! I don't know what to say. I would never in a million years have been
able to sort that lot out on my own. Thank you so much. I really
appreciate your having lent me your expertise to solve the problems I was
having.

Not a big deal, you only have to have been there before. Next time it'll be
easier for you :-)

BTW There is IIRC a way to install IE7 on 2000. Google for it. Unfortunately
the IE7 user base is growing :-(

Heaven's there's a lot more to CSS and the various browser issues than I
had ever though. Wow, I'm really happy with that. Thank you so much.
Yipee!!!

Cheers. And yes, I learned a couple of things just now too.

http://members.iinet.net.au/~vanluynm/

Hmmm. Another Aussie. I wondered why you were awake now :-)

That site is very, er, black. And you carry ads. Make much out of them?

Did you really build all that stuff? I tinker but it is usually bits and
peices of computer/video/audio.

--
Richard.

[Murray R. Van Luyn]

"rf" <[e-mail] in message
news:_n******************@news-server.bigpond.net.au...

>
Cheers. And yes, I learned a couple of things just now too.

>http://members.iinet.net.au/~vanluynm/

Hmmm. Another Aussie. I wondered why you were awake now :-)

Yep, I'm in WA. I'm usually asleep during the day, but we've been
re-installing Honda Civic motors whilst talking to you today.

>
That site is very, er, black. And you carry ads. Make much out of them?

Peanuts! No one would tell me how much they were earning from Adsense, so I
had to give it a go myself. I have found that each click can be worth
between 3c and $1.60, though they only occur about every fortnight for me.
I'm expecting my first $100 comission cheque around 2012!

Thanks again so much for sorting out my menu, Richard. I really appreciate
the help you were able to offer me, and no doubt to others also.

Regards,
Murray R. Van Luyn.
--
http://www.review-a-gadget.com/
http://review-a-gadget.blogspot.com/
http://members.iinet.net.au/~vanluynm/