Ann Vogel

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromAnn Vogel
ToMe
Subjectnested list collapse menu - IE spacing problem
Date28 January 2006 22:08
Thanks for your wonderful scripts, I am having a problem with IE only (of
course).

   1. Which script

http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html

   2. URL

[URL]

(will be for a different website though)

   3. What you want to do with it

use as intended (I believe)

   4. What you are having problems with

± on its own line when the li is a link in IE only (I have version 6)
works perfectly in Firefox (I have 1.0.1, I guess I need to update) and
Opera (I just downloaded the latest version)

   5. Any script error messages

none

I read this email:
http://www.howtocreate.co.uk/emails/RichardHarris.html
and took out display: block
(which fixed the problem in Firefox but not IE)

Thanks so much I really appreciate any help,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date28 January 2006 22:35
Ann,

> Thanks for your wonderful scripts, I am having a problem with IE only (of
> course).

Thankyou for such a beautiful bug report. Took no time at all to work out
the cause as a result :)

The problem;
li a { ... width: 100%; height: 100%; ... }

One of IE's quirks is where if you give an element height or width, it will
assume you meant to make it display:(inline-)block;

The doctype you are using does not trigger IE's strict mode, so by having
those styles there, it is equivalent to having display:block; there as well.
Remove those two declarations (or use a doctype that triggers IE's strict
mode), and it should work as you want :)

For doctype information, see:
http://hsivonen.iki.fi/doctype/


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date29 January 2006 00:27
Tarquin,

Thanks so much for the quick reply.  I took the doctype from your page with
the nested list. (I don't know much about doctypes and tried several from
the resource you sent me to with similar results.)

With that doctype, that problem is fixed with or without the width and
height, but now there is a problem with the li { display: inline; }.

I take out that line, and it seems fine, I know you say you are not a
browser tester, but do you know which version of IE that line was fixing? Or
maybe a better question is do I need it, and if I do, how do I fix it
putting too much "inline"?

I don't see any place on your website to send you a donation. How can I send
you a few dollars?

Thanks so much,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date29 January 2006 19:13
Ann,

> do you know which version of IE that line was fixing? Or
> maybe a better question is do I need it, and if I do, how do I fix it
> putting too much "inline"?

The line is there to fix Internet Explorer 4-6 (and probably IE 7 as well).
Basically, if you have a link with display:block; inside an LI, IE will add
a blank line after the LI. Setting the LI to display:inline fixes this
problem (although it actually has no effect when applied in this way, so it
does not have any adverse effects on any other browser). In your case, you
are not using display:block; on the links, so you should be able to safely
remove that style.

> I don't see any place on your website to send you a donation. How can I
> send you a few dollars?

That is not needed - the site and my advice is a free resource, for as much
of it as I can offer :)
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date29 January 2006 19:45
Tarquin,

Thank you so much for the detailed explanation.

I will definitely "pay it forward".

Good luck in everything you do,
Ann Vogel
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date30 January 2006 21:45
Tarquin,

Ok, I got that one working, so now I want to use this one:
http://www.howtocreate.co.uk/emails/NisadSivcevic/

But it only seems to work if there are not any links except in the lowest
level of each branch.  I am glad I at least figured out what the problem is,
I have spent too many hours on this, oh well, hopefully it is an easy fix,
or you will allow me to pay you for custom programming.

[URL]

IE error
Line 164
Error: previousSibling.innerHTML is null or not an object

In Firefox and Opera, the menu will not close the branch with a link when I
open another branch, but they are not giving an error.

I found the JavaScript console in Opera, but for once I think the IE error
below is pretty clear - even though I have no idea how to fix it.

I hope this one is an easier question:

Can we hide the menu for the split second that it is expanding before it
collapses?

[URL]

I put a link to that same page on "ACS 4600" under "Products" and then
"Scanners" to test it and it expands the entire "Scanners" branch and then
collapses it - can we hide this?

Firefox does it really fast, but what surprised me is that IE and Opera are
about the same.

I appreciate any help you can offer,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date06 February 2006 16:04
Ann,

apologies for the delay. I am working on a major rework of my site, so I
have been hiding from email for a while.

> Can we hide the menu for the split second that it is expanding before it
> collapses?

Yes, but only if you want to compromise the accessibility of the script. You
see, the script is designed to be naturally accessible, so if JavaScript is
disabled, or the browser is not good enough, it will remain expanded. It
performs the collapse only when the browser is ready. It is possible to
include a style that hides it all before it lays it out, but then it will
not work if JavaScript is disabled.

You can make it run much faster by calling the script immediately after
creating the list, instead of from an onload handler (this will leave the
page accessible as well):

...
</ul>
<script type="text/javascript">
collapseList....
</script>

> Firefox does it really fast, but what surprised me is that IE and Opera
> are about the same.

Firefox does not use progressive rendering, the other two do. That means
that Opera and IE start displaying the page as soon as they have the first
bit of data (meaning you can start using the page faster). Firefox uses
offscreen buffering, meaning that when it displays it faster, but first you
have to wait for it to retrieve _all_ of the data, making it slower overall
before you can start using the page.

> http://www.howtocreate.co.uk/emails/NisadSivcevic/

This is because you have a link in the branch heading. This is a limitation
of Nisad's version - I never worked out a clean solution to this problem,
unfortunately (which is why my own script does not have the images
capability).
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date6 February 2006 18:01
Hi Tarquin,

No worries about the delay, I appreciate all your help.

I definitely do not want to make it inaccessible. I obviously do not know
JavaScript at all, are there any other ways to make it faster? I will put
the styles in an external stylesheet, other than that I have no clue.

Thanks for the detailed explanation again on the browsers, is there a way to
force "offscreen buffering" of the menu only for all browsers?

I know the people that I am working on a website for will not like seeing
the menu open and then close, and if I show them Firefox, they will ask why
I can't get it to work the same way in IE.

Anything you can advise is greatly appreciated,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date6 February 2006 18:17
Ann,

> Thanks for the detailed explanation again on the browsers, is there a way to
> force "offscreen buffering" of the menu only for all browsers?

Sadly not. Only one browser ever allowed you to specify what behaviour you
wanted. That was Netscape4, and it was quite ironic, because it always used
offscreen buffering no matter what you tried.

OK, so let's see what we can do. I am just guessing - I have not tested;

<script type="text/javascript">
if( document.body && document.body.removeChild && document.childNodes) {
 document.write(
  '<style id="mystyle" type="text/css">ul{display:none;}</style>'
 );
}
</script>

<ul id="menu1">
...
</ul>

<script type="text/javascript">
compactMenu('menu1',true,'... etc...');
stateToFromStr('menu1',retrieveCookie('menuState'));
selfLink('menu1','samePage',true);
if( document.body && document.body.removeChild ) {
 var foo = document.getElementById('mystyle');
 foo.parentNode.removeChild(foo);
}
</script>
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date6 February 2006 18:30
You are awesome!

That seems to do exactly what I want and there is nothing in the JavaScript
Consoles in Opera or Firefox, so that is good.  What else needs to be
tested?

Does this affect the accessibility? I can't figure out how to turn off
JavaScript in IE.

Thanks again,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date6 February 2006 20:52
Ann,

> That seems to do exactly what I want and there is nothing in the JavaScript
> Consoles in Opera or Firefox, so that is good.  What else needs to be
> tested?

That sounds like it is all working properly :)

> Does this affect the accessibility?

With any luck, no. There is a very small chance that some rare browser will
choke on it (they would have to implement the removeChild method, but not
know how to use it). Any browser that fails it would have to be in the
development stage to make such a basic error, so I doubt you will ever get
any visitor who is adversely affected by it. And even if they do, they will
be developers for that rare browser, so they can fix it :)

> I can't figure out how to turn off
> JavaScript in IE.

tools - internet options - security - select the "zone" the site is using -
custom level - disable "active scripting".

certainly not obvious ;)
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date7 February 2006 07:37
I guess all I can say is thanks!

I'm glad turning off JavaScript was not obvious, I even tried searching the
Help files, but with no luck. The website layout/design that I am "copying"
has a menu that looks similar to yours, but it does not show up AT ALL if
javascript is turned off.  The only thing I see that menu does that yours
does not is have images like Nisad's, but with links on all of the li's. Now
all I have to do is show my friend what happens to the other website's menu
when JavaScript is turned off and I can convince him to live without the
changing images. The other website is using
[URL] in case you are curious.  I am so glad
that I found your website.

I was looking at your website some more and found some more goodies, but it
has been a long Monday, how do I download your Chord PHP Utility? I don't
know what I will do with it, but I like it.

Have a great Day!
Ann
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date7 February 2006 15:35
Attachmentsrequested files
Ann,

> I guess all I can say is thanks!

Happy to help.

> I was looking at your website some more and found some more goodies, but it
> has been a long Monday, how do I download your Chord PHP Utility? I don't
> know what I will do with it, but I like it.

heh, the idea of the utility scripts is that you use them on my site, but
sure, if you want a copy, I have attached them (same license as ever). your
server will need PHP support.
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date7 February 2006 19:56
Tarquin,

Thanks so much, but there wasn't the notes.inc.php file, and since I play
piano and not guitar . . . if you ever make a piano keyboard similar to your
guitar strings interface . . .

I have been wanting to learn PHP, it makes more sense to me than JavaScript,
and real world examples help me better than books.

I think I was going to say something else, but I have a migraine today, and
can't remember.

Ann
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date7 February 2006 21:24
Attachmentrequested file
Ann,

> Thanks so much, but there wasn't the notes.inc.php file

oops. attached :)
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date12 February 2006 21:16
Hi Tarquin,

I am still working on using two different images - one for the current page
and one for all others - with having links on all of the li's.

I tried adding a background image to the class that I am using for selfLink
and that works except that it puts the image underneath the one that is used
in the extraHTML of compactMenu. (Underneath meaning that one image covers
the other one.)

I tried putting the style info for the selfLink class after the menu instead
of before it, and that didn't help.  I tried using z-index in the style and
that didn't help.

Do you have any more ideas?

Thanks in advance,
Ann Vogel

PS I haven't had a chance to do anything with the Chord utility.  I showed
my son and he wants to change it a little bit, but he is not very motivated.
(He doesn't know PHP at all.) I started teaching him piano when he was 6, so
I taught him to play F B D for G7 since his hands were so small.  He thinks
instead of just saying 75%, it should also say the note that is missing.  I
am not asking for help - yet at least - I am just keeping you updated in
case you are interested. Maybe when my son is bored this summer he will work
on this.
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date13 February 2006 21:24
Hi Tarquin,

I hope you had a good weekend and I hope I am not bothering you too much.

I have another problem, and what is driving me crazy is that it is not
consistent. Nothing is showing up in JavaScript consoles, and I don't know
what to do.

I tried taking out the last bit of code you added for me, and that is not
the problem.

Here is a new link:
[URL]

If you click on a link and the file doesn't exist yet, it will take you to
my "regular" website because of the way I have mod rewrite set-up.  There
are files for all of the "overview" and "features & benefits" under all of
the "scanners". (I wish they would decide on a domain name, it would make it
easier, and then I will add a link to your website too.)

What is happening is sometimes - and it is the same in IE, Firefox and
Opera - the node doesn't stay open when you click on the text link, but only
sometimes. When the node doesn't stay open, the "selfLink" is green, and
that is working, so it makes it easy to see that the node did not stay open.

For testing, I usually click on "Products" and then "Scanners" and then
several of those and then "Software" and "Software" almost never stays open.

I hope you are not tired of all my problems, I really like your menu.

Thanks in advance,
Ann Vogel
FromMe
ToAnn Vogel
SubjectRe: nested list collapse menu - IE spacing problem
Date20 February 2006 09:37
> What is happening is sometimes - and it is the same in IE, Firefox and
> Opera - the node doesn't stay open when you click on the text link, but only
> sometimes. When the node doesn't stay open, the "selfLink" is green, and
> that is working, so it makes it easy to see that the node did not stay open.

It is because it loads another page, and the state of the menu is not being
preserved. The menu script offers a memory feature to remember the state
between pages:
http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html
See the part where I give an example of stateToFromStr
FromAnn Vogel
ToMe
SubjectRe: nested list collapse menu - IE spacing problem
Date20 February 2006 20:10
Tarquin,

I looked at your example again, and I don't see what I am doing wrong. I
have this in the "head" section:

<script language="javascript1.2" type="text/javascript"><!--
window.onunload = function () {
	setCookie('menuState',stateToFromStr('menu1'));
}
//--></script>

And this after my list:

<script type="text/javascript">
	prepareLinksIn('menu1');
	compactMenu('menu1',true,'<img src="url">');
	stateToFromStr('menu1',retrieveCookie('menuState'));
	selfLink('menu1','samePage',true);

</script>

Is it something that I am just not seeing?

Thanks so much,
Ann
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.