Smart Folding Menu Tree Script, Mozilla

**ted_thompson61** · 08-02-2005, 04:46 PM

Smart Folding Menu Tree Script
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
---------------------------------------------------------------

I have been using this script for some time in IE 6 and it works great.

I used relative positioning to make the list bullets and image I selected line up underneath the text above as follows:

#foldinglist{list-style-image:url(list.gif);position:relative; left: -15 px}

And to get the folding menu to line up with other text in the table of contents, I used the <DIV> command:

<div style = "position:relative; right: 25px"
<ul>
...
SMART FOLDING TREE SCRIPT ...
...
</ul>
</div>

This all works fine under IE6, but I have problems on another computer using Mozilla. Mozilla seems to interpret the <DIV> differently than IE. Is updated logic needed in the script to work properly for Mozilla?

If I have the folding menu aligned properly to work for IE6, on Mozilla it shows up far to the left of the screen. If I configure it using the <DIV> for Mozilla, then the menu shows up too far to the right in IE6.

This has already gone out on several web pages and I need a fix badly.

--Ted

**Twey** · 08-02-2005, 06:03 PM

The <div> tag is missing a >. Was that a typo?

**jscheuer1** · 08-02-2005, 06:25 PM

Your code in your post is odd, probably because you were not using the exact code as it appears on your page, at least not complete, ex:

<div style = "position:relative; right: 25px"
<ul>

is wrong, no closing '>' on the div. Another thing, <div> or <DIV> is not a command, it is a tag and when used in HTML code, creates a division element. All probably more than you needed to know, maybe not. OK, there are ways to deal with the fact that Mozilla and IE often see things differently. The easiest is the !important hack:

Code:

<div style = "position:relative;right:15px!important;right:25px;">

will position Mozilla 10px more to the right than it would be without the hack, IE uses the second value. You can use this for your other situation too:

Code:

#foldinglist{list-style-image:url(list.gif);position:relative;left:-25px!important;left:-15px;}

A better method in a style sheet or section is:

Code:

#foldinglist {
list-style-image:url(list.gif);
position:relative;
left:-25px;
}

* html #foldinglist {
left:-15px;
}

Again, it is the second value that will be followed by IE. There is a third method but, before we get into that. If you set a strict enough doctype for your page, often IE6 (but not earlier IE versions) will follow the the styling in the same way as Mozilla, thus making all these shenanigans unnecessary.

The third method involves a conditional and is the hardest to use because its use varies depending upon what you are trying to do. Basically you use a comment and if/endif pair:

Code:

<!--[if IE]>
<style>
#foldinglist {
left:-15px;
}
</style>
<![endif]-->

and in this case, could follow the original style section in the head of the page to create IE only styling.

There are other ways but, this should give you an idea of how to proceed.

NOTE: All values used are either arbitrary, or they are values you supplied. You will probably need to adjust them to suit.

**ted_thompson61** · 08-02-2005, 06:49 PM

Thanks for the reply. Yes the > was a typo.

I'll try these and see how it goes.

**ted_thompson61** · 08-02-2005, 06:55 PM

How do you set a strict doctype? I've never used that before.

I see it in the first line of the Folding Menu Script demo page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Does this require a connection to the internet?

Because my application is in an environement where we cannot have internet access.

Thanks much, in advance.

--Ted

**Twey** · 08-02-2005, 07:02 PM

Browsers tend to have the DTDs cached.
The doctype for XHTML1.0 Strict is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**jscheuer1** · 08-02-2005, 09:15 PM

Even without the url, often doctypes will still take effect. However, having a strict doctype is no guarantee that IE and Mozilla will interpret styling identically. It is more likely though.

**ted_thompson61** · 08-02-2005, 09:29 PM

The !important thing sure helped out on the spacing between IE and Mozilla.

In Mozilla, sometimes the folder disappears. Not everytime. On one machine it seemed to disappear the first click and none after that.

On another machine it seemed to happen over and over, but not everytime.

What's up with that?

Thread: Smart Folding Menu Tree Script, Mozilla

Thread Tools

Search Thread

Smart Folding Menu Tree Script, Mozilla

Bookmarks

Bookmarks

Posting Permissions