Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ popout menu

Posted by: minidiapolis Apr 14 2008, 08:34 PM

I'm creating a popout menu for the very first time. Using this line as an example

sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]

is the first step to replace sitems with one of my menu options?

Posted by: pandy Apr 14 2008, 08:49 PM

That line means nothing out of context, but I'd guess the answer to your question is "no".

Posted by: minidiapolis Apr 14 2008, 09:05 PM

I'm sorry, I'm trying to follow the sample on http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm and I'm on the configuring the menu part,

Posted by: pandy Apr 14 2008, 10:23 PM

OK, now I understand. Yes, you replace their link texts and URLs with your own. But the one you posted seems to be used for some kind of fake heading and doesn't have a URL.

Don't forget to provide navigation for those that can't use that menu.

Posted by: minidiapolis Apr 14 2008, 10:40 PM

Can you explain "don't forgot to provide navigation for those that can't use that menu"?

Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?

Posted by: pandy Apr 14 2008, 10:47 PM

QUOTE(minidiapolis @ Apr 15 2008, 05:40 AM) *

Can you explain "don't forgot to provide navigation for those that can't use that menu"?


The menu doesn't provide any real links, so how will people without JavaScript get around your site if you don't provide an alternate way of navigating it? This isn't correct since the menu actually supports more browsers, but it does say the following in the description of the script: "Browsers other than NS 4+ and IE 4+ will simply see nothing". It's hard to click nothing.

QUOTE

Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?

Now I'm confused. What's the purpose of a menu, or any links, if they don't lead to other pages?

Posted by: Darin McGrew Apr 15 2008, 12:40 AM

QUOTE
Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?
This may be a mis-communication. You don't need a separate page for the navigation links that pop up with a pop-up menu. Those links should be on the page the whole time. And they should be completely visible unless JavaScript is enabled.

The general idea is to have a list of links, or nested lists of links. Then use JavaScript to hide some/all of the list items. Then use JavaScript to display certain list items, depending upon what the user is doing with the mouse.

Or you can do everything in CSS, as in http://meyerweb.com/eric/css/edge/menus/demo.html.

But you'll need multiple content pages, and the navigation links will need to go to those other content pages.

Posted by: minidiapolis Apr 15 2008, 09:48 AM

I'm really confused. . . Darin, I could have sworn one time you said I did not need multiple content pages and that I would just need to change the display name. So, for the About Us page, say I have a popout menu with the doctrine, beliefs, mission statement, I need separate content pages for each, right?

Posted by: Darin McGrew Apr 15 2008, 10:33 AM

I think you're putting the cart before the horse.

Start with the pages you want. Do you want a single "About Us" page? Or do you want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages?

Once you figure out what pages you want, you can organize them and create navigation links to them. Then, if you want, you can hide some of the navigation links until the visitor hovers over something.

Posted by: minidiapolis Apr 15 2008, 11:14 AM

I want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages.

Posted by: Darin McGrew Apr 15 2008, 02:46 PM

QUOTE
I want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages.
Okay, then create multiple documents, with navigation links between them.

There are CSS/JavaScript tricks to make a single page act like somewhat like multiple pages, except that it works only somewhat, and it breaks users' expectations about how pages are supposed to behave. I don't recommend them.

Posted by: minidiapolis Apr 15 2008, 02:56 PM

Ok, thanks so much for your help. I really appreciate your help with this

Posted by: minidiapolis Apr 15 2008, 09:26 PM

For some reason the popout menu isn't displaying on www.fountainchurch.org/aboutUs.html, what am I doing wrong?

Posted by: pandy Apr 15 2008, 09:59 PM

The same reason as almost all your problems, the other, positioned menu. It's on top of the new menu. It (the new menu) half works though. Are you really going to have both?

Posted by: minidiapolis Apr 15 2008, 10:02 PM

It's what the client wants

Posted by: minidiapolis Apr 15 2008, 10:07 PM

I deleted the absolute positioning but the menu goes under the content and it still doesn't display the popout menu

Posted by: Darin McGrew Apr 16 2008, 01:11 AM

QUOTE(minidiapolis @ Apr 15 2008, 07:26 PM) *
For some reason the popout menu isn't displaying on www.fountainchurch.org/aboutUs.html, what am I doing wrong?
Well, among other things, you've created a menu that completely depends upon JavaScript.

Posted by: minidiapolis Apr 16 2008, 07:49 AM

Can you help me a little more? I know nothing about javascript and was following the steps on http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm

Posted by: Darin McGrew Apr 16 2008, 12:13 PM

The http://meyerweb.com/eric/css/edge/menus/demo.html example on Eric Meyer's css/edge site shows the right basic approach. Start with a list of links. Unfortunately, MSIE doesn't support the CSS required for Eric's pure CSS technique, but there are similar CSS-JavaScript hybrid techniques that work around MSIE's limitations.

When evaluating pop-up menu systems, make sure they start with a list of links. Don't use any like that dynamic drive menu that start with an array of data in JavaScript.

Then make sure the list of links remains accessible when JavaScript is disabled/unavailable. Some of them use CSS to hide the nested options, but use JavaScript to unhide them. That fails when JavaScript is disabled/unavailable, but CSS is supported.

Posted by: pandy Apr 16 2008, 01:04 PM

QUOTE(Darin McGrew @ Apr 16 2008, 07:13 PM) *

MSIE doesn't support the CSS required for Eric's pure CSS technique, but there are similar CSS-JavaScript hybrid techniques that work around MSIE's limitations.

I linked to one the first time minidiapolis asked about menus.
http://www.htmldog.com/articles/suckerfish/dropdowns/

Posted by: minidiapolis Apr 16 2008, 01:55 PM

Where in the html code would I put this
<ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul>

Posted by: pandy Apr 16 2008, 02:18 PM

I don't know. What is it?

Posted by: minidiapolis Apr 16 2008, 02:23 PM

it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/

Posted by: Darin McGrew Apr 16 2008, 02:24 PM

Where do you want the menu?

Posted by: minidiapolis Apr 16 2008, 02:24 PM

it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/

Posted by: Darin McGrew Apr 16 2008, 02:45 PM

Okay, let's try this again. Where on your page do you want the menu? There's where you put the list of links.

If you want it to appear in a drastically different place when CSS/JavaScript are disabled/unavailable than when they are enabled, then you'll need to do more CSS positioning. For example, many like putting such navigation links at the end of the HTML document, but using CSS to position them at the top of the page, or along the left margin.

Maybe it would help to understand what is going on if you viewed the Suckerfish example with CSS and JavaScript disabled. Start with HTML like that. Then use CSS/JavaScript to dress it up.

Posted by: pandy Apr 16 2008, 02:53 PM

In addition to that I think you should start with to try to get a menu working on a page of its own before you add it to your existing page.

Posted by: minidiapolis Apr 16 2008, 03:03 PM

I'm embarrassed to ask this but how do you disable CSS and Javascript?

I need the menu where it is now

Posted by: pandy Apr 16 2008, 03:25 PM

Depends on the browser. Somewhere in options.

For quick checks I personally like to use this very small browser that doesn't support anything. biggrin.gif
http://www.OffByOne.com

Your page works very well in it, except that the new menu doesn't show.

Attached Image

Posted by: Darin McGrew Apr 16 2008, 03:55 PM

There is a web developer toolbar plugin for Firefox that gives you buttons to disable CSS, JavaScript, images, etc. It's very nice.

Posted by: pandy Apr 16 2008, 04:48 PM

With IE you can use the Web Accessibility Toolbar
http://www.wat-c.org/tools/
Opera already provides easy ways to do this.

Still think OB1 rocks though. wub.gif

Posted by: pandy Apr 16 2008, 04:50 PM

Oh, we forgot that for IE there's also the handy dandy WiDGets. Don't do JS though.
http://htmlhelp.com/tools/widgets/

Posted by: minidiapolis Apr 16 2008, 07:24 PM

Ok, I have been looking at the webpage with and without javascript and I think I see where the javascript code is but I'm having trouble understanding where to put a popout menu. Sorry guys, I'm really trying

Posted by: minidiapolis Apr 18 2008, 02:25 PM

I *might* be getting it. . . sorry about all the frustration. . .

On http://www.htmldog.com/articles/suckerfish/dropdowns/ the following code would go in the external stylesheet, right?

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

Posted by: Darin McGrew Apr 18 2008, 02:46 PM

That's JavaScript, not CSS. It could go in an external JavaScript file, but not in an external style sheet.

Posted by: minidiapolis Apr 18 2008, 02:52 PM

Here's a stupid question but how do you create a javascript file and is that the only thing that goes in that file?

Posted by: Darin McGrew Apr 18 2008, 03:19 PM

JavaScript files are just text files, like HTML and CSS files. I create all of them with the same text editor (although the syntax highlighting it uses is different in each language).

And yes, the JavaScript is all that goes into a JavaScript file.

Posted by: minidiapolis Apr 18 2008, 03:37 PM

So, sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

is all that goes in the file? What file extension? does it need?

Posted by: Darin McGrew Apr 18 2008, 04:00 PM

By convention, JavaScript files are usually named something.js. Just make sure that your server sends it with "text/javascript" as the content type.

Posted by: minidiapolis Apr 18 2008, 08:15 PM

do I need to link it to the html page

Posted by: pandy Apr 18 2008, 08:19 PM

Yes. Otherwise the browser won't know it's there.

Posted by: minidiapolis Apr 18 2008, 08:43 PM

What am I doing wrong now on http://www.fountainchurch.org/menu.html

Posted by: Darin McGrew Apr 18 2008, 08:51 PM

It looks like you aren't setting a background for the sub-menu.

Oh, and you've got http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.fountainchurch.org%2Fmenu.html&warnings=yes.

Posted by: minidiapolis Apr 18 2008, 08:58 PM

background for the sub-menu?

Posted by: minidiapolis Apr 18 2008, 09:00 PM

Am I on the right track though?

Posted by: minidiapolis Apr 18 2008, 09:28 PM

What's wrong with lines 28, 56, 66, and 91?

Posted by: Darin McGrew Apr 19 2008, 01:26 AM

It looks to me like there is an extra <ul> on line 56 that you should just remove. Also, you're using attributes in an <li> tag that don't apply.

Posted by: Frederiek Apr 19 2008, 03:51 AM

Yes, see http://htmlhelp.com/reference/html40/special/script.html .

[edit]
Sorry, I didn't notice there was another page for this thread. Anyway, now you have a link on how to point a .js file in your HTML.

Posted by: minidiapolis Apr 19 2008, 10:56 AM

What do I need to do to get the javascript to work?

Posted by: Frederiek Apr 19 2008, 04:12 PM

Go see http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html, which probably is more convenient, since your links are vertical.
View the source. The script is self-contained, it should work as is, without having to add anything elsewhere to activate the script.

But if you are more comfortable with CSS only menu's, go see http://css.maxdesign.com.au/listamatic/index.htm.

Posted by: minidiapolis Apr 19 2008, 09:02 PM

I copied the code from http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html but it didn't work. see www.fountainchurch.org/menu.html

Posted by: pandy Apr 19 2008, 09:51 PM

QUOTE(minidiapolis @ Apr 20 2008, 04:02 AM) *

I copied the code from [url=http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html]


Yeah, but look where you put it.

Posted by: Darin McGrew Apr 19 2008, 10:21 PM

You've just pasted CSS into the HTML document.

See http://www.htmlhelp.com/reference/css/style-html.html in our CSS reference.

Posted by: pandy Apr 19 2008, 10:25 PM

QUOTE(Darin McGrew @ Apr 20 2008, 05:21 AM) *

You've just pasted CSS into the HTML document.


And a closing STYLE tag.

Posted by: Darin McGrew Apr 19 2008, 10:29 PM

QUOTE
And a closing STYLE tag.
Good catch. I missed that. blink.gif

Posted by: Frederiek Apr 20 2008, 03:56 AM

Or even an opening STYLE tag.

The entire <style></style> declaration needs to go between the <head></head> pair. Put it just below the <link...> to your external CSS file.

The same goes for the script. And it should be written as:

<script type="text/javascript"><!--
//all the script functions here
//--></script>

Posted by: pandy Apr 20 2008, 04:02 AM

Yeah, had there been a start tag. tongue.gif

Posted by: minidiapolis Apr 20 2008, 03:44 PM

Well, I might be getting closer. . . . maybe. . . although the popout menu still doesn't appear on the sidebar

Posted by: pandy Apr 20 2008, 10:52 PM

Did you ever do what I suggested and tried it out first on a page of its own?

Posted by: minidiapolis Apr 21 2008, 07:22 AM

I thought you said to try it on the menu on a separate page first.

Posted by: pandy Apr 21 2008, 08:06 AM

blink.gif Yes. Did you?

Posted by: minidiapolis Apr 21 2008, 01:12 PM

yes at www.fountainchurch.org/aboutUs.html. The popout menu isn't displaying on the sidebar

Posted by: minidiapolis Apr 21 2008, 09:19 PM

I'm trying to convert the sample code to the code that will be on the church's website but it's not working. Look on www.fountainchurch.org/menu1.html

Posted by: pandy Apr 22 2008, 03:31 AM

QUOTE(minidiapolis @ Apr 21 2008, 08:12 PM) *

yes at www.fountainchurch.org/aboutUs.html. The popout menu isn't displaying on the sidebar


I meant without all the content of your original page, the AP menu and all that.

Posted by: minidiapolis Apr 22 2008, 11:33 AM

the AP menu? Also, I'm confused, what do you mean by without the content of the original page?

Posted by: Frederiek Apr 22 2008, 02:32 PM

Clearly, Pandy means just the plain menu, nothing else.
Just a test page for only the menu, quoi.

Posted by: minidiapolis Apr 22 2008, 07:20 PM

look on www.fountainchurch.org/menu.html. it still isn't working

Posted by: minidiapolis Apr 23 2008, 06:17 PM

Why would the website work correctly in opera but not in IE?

Posted by: Darin McGrew Apr 23 2008, 06:31 PM

QUOTE(minidiapolis @ Apr 23 2008, 04:17 PM) *
Why would the website work correctly in opera but not in IE?
It could be any of http://www.positioniseverything.net/explorer.html...

Posted by: minidiapolis Apr 23 2008, 08:33 PM

Would it be the disappearing background list bug?

How many people use IE?

Posted by: minidiapolis Apr 23 2008, 10:35 PM

On www.fountainchurch. org/test.html how can the menu options be visible without the mouse hovering on it?

Posted by: Frederiek Apr 24 2008, 02:54 AM

Your fountain.css interferes with the inline CSS. See what happens if you comment out the external CSS. smile.gif
Get rid of all menu related CSS from fountain.css. Then either leave the menu CSS inline or move it to fountain.css.

Posted by: minidiapolis Apr 24 2008, 06:17 PM

Comment out external CSS?

QUOTE(Frederiek @ Apr 24 2008, 03:54 AM) *

Your fountain.css interferes with the inline CSS. See what happens if you comment out the external CSS. smile.gif
Get rid of all menu related CSS from fountain.css. Then either leave the menu CSS inline or move it to fountain.css.


Posted by: minidiapolis Apr 24 2008, 09:25 PM

On http://www.fountainchurch.org/test.html if you click on about us, our beliefs, it wants to do another popout menu but I don't need one. I think I have an extra end tag but I don't know which tag.

Posted by: Frederiek Apr 25 2008, 02:49 AM

Yes, put comments around the <link> tag to your CSS, so it won't load with the page. It looks like this:
<!--
<link type="text/css" rel="stylesheet" href="fountain.css">
-->

The structure of your lists is broken. You have used <ul id="nav"> more than once, but a ID must be unique.
Such and some other errors would be reported by the http://htmlhelp.com/tools/validator/.

View the source of the http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html to see how the HTML is marked up and structured. Markup your own menu accordingly, but use the CSS of the vertical dropdown menu.

Posted by: minidiapolis Apr 25 2008, 07:15 PM

How would I make the menu vertical? Thanks so much for the other dropdown example. It looks so much easier.

Posted by: Frederiek Apr 26 2008, 02:52 AM

By using the CSS from the vertical exemple on the one level menu exemple, mainly. Leave out all CSS for "third and above level" lists.
I hope you didn't only copy the source from the exemple, but took a close look too. See when new <ul> and <li> pairs are used and when not. And read the http://www.htmldog.com/articles/suckerfish/dropdowns/ too.

BTW, more list menu's are explained at http://css.maxdesign.com.au/listamatic/index.htm.

Posted by: minidiapolis Apr 26 2008, 10:12 PM

I don't get it, I followed the example on http://css.maxdesign.com.au/listamatic/vertical01.htm# but I'm still getting horizontal lists, not vertical. See http://www.fountainchurch.org/menu1.html#

Posted by: pandy Apr 26 2008, 10:29 PM

But your CSS is nothing like that at maxdesign. Among other things you float the LIs left. What do you think that does?

Posted by: minidiapolis Apr 27 2008, 05:50 PM

I fixed that problem but now if the mouse is hovering over about us, the popout menu covers the other menu options and even if the mouse is moved off that menu, the popout menu doesn't disappear at least in IE it doesn't. http://www.fountainchurch.org/menu1.html# shows this.

Posted by: Darin McGrew Apr 27 2008, 07:04 PM

AFAICS, the CSS is doing just what you told it to do. The sublists start out positioned off-screen to the left. When you hover over a menu item, its sublist is repositioned in its normal location (left: auto).

What is it that you want to happen differently?

Posted by: Frederiek Apr 28 2008, 03:04 PM

I think you got confused by the diffrent examples and mixed things up. That's partly my fault (sorry), but also caused by the fact that you don't seem to know what you are doing (no offence).

This is what your HTML for the menu should look like:

CODE
<ul id="nav">
    <li><a href="#">About Us </a>
        <ul>
            <li><a href="#">Our Beliefs</a></li>
            <li><a href="#">Our Doctrine</a></li>
            <li><a href="#">Mission Statement</a></li>
        </ul>
    </li>
    <li><a href="#">Programs</a>
        <ul>
            <li><a href="#">Z-street</a></li>
            <li><a href="#">FYI (Fountain Youth Inc)</a></li>
            <li><a href="#">Small Groups</a></li>
        </ul>
    </li>
    <li><a href="#">Staff </a>
        <ul>
            <li><a href="#">Ministry Team</a></li>
            <li><a href="#">Leadership Team<a></li>
        </ul>
    </li>
</ul>

and this your CSS:
CODE
body {
    font-family: Arial, Helvetica, sans-serif;
}
    
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 11em;
}
    
#nav li { /* all list items */
    position : relative;
    float : left;
    line-height : 1.25em;
    margin-bottom : -1px;
    width: 11em;
}
    
#nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 11.05em;
    margin-top : -1.35em;
}
    
#nav li a {
    width: 11em;
    w\idth : 10em;
    display : block;
    color : black;
    font-weight : bold;
    text-decoration : none;
    background-color : white;
    border : 1px solid black;
    padding : 0 0.5em;
}
    
    #nav li a:hover {
    color : white;
    background-color : black;
}
    
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}
    
#content {
    margin-left : 12em;
}

Put that in a test page and try it. I'm sure that's what you're after.

Posted by: Frederiek Apr 28 2008, 04:08 PM

I forgot to say that I based that on your menu1.html code.

Posted by: minidiapolis Apr 28 2008, 10:02 PM

It's getting there. I'm still having problems though. . . if the mouse is over About Us that popout menu flips out, but if the mouse goes down to programs, that popout menu flips out as well.

Also, do I need separate html pages for our beliefs, doctrine, etc..?

Posted by: Darin McGrew Apr 28 2008, 10:26 PM

Do you mean that you see both the "About Us" submenu and the "Programs" submenu at the same time? I see only one at a time, depending upon which top menu entry I'm hovering over.

If you're going to have separate links for beliefs, doctrine, and mission statement, then you need either separate pages for each one, or you need multiple anchors on a single page (so you can link to the anchors).

Posted by: Frederiek Apr 29 2008, 07:33 AM

I found that the markup didn't validate. So I corrected both your and mine errors.

Then I thought it to be odd to have a link on the main menu items, though depending on where you want to go from there. So I changed those with a sub-menu to <p> tags, for which I gave CSS rules (to get rid of default margins on P tags, and a cursor to indicate some kind of link attachment (the hover)). See the result of all this in the attached file below (open it in a simple text-editor (not Word!)).

All this doesn't explain the double dropdown. Like Darin, I don't see that.

Attached File  menu.html ( 2.33k ) Number of downloads: 698



Posted by: minidiapolis Apr 29 2008, 02:22 PM

Why isn't the border color changing to white?

Posted by: Darin McGrew Apr 29 2008, 02:47 PM

It looks like a result of your http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.fountainchurch.org%2Fmenu1.html&profile=css21&usermedium=all&warning=1&lang=en.

Posted by: minidiapolis Apr 29 2008, 07:06 PM

Why isn't the picture showing up as the bullet? I followed the example on http://css.maxdesign.com.au/listamatic/vertical04.htm. Also, how can I put a vertical line between the bullet/picture and the menu option like on www.fountainchurch.org

Posted by: Darin McGrew Apr 29 2008, 07:57 PM

QUOTE
Why isn't the picture showing up as the bullet?
Where will the image be displayed? You've set the margins/padding to 0.

Posted by: minidiapolis Apr 29 2008, 08:51 PM

I have played around with the margin/padding, still no picture

Posted by: pandy Apr 29 2008, 09:14 PM

The images are there in FF. They'll be there in Opera too, if given some space to live in. But I don't think this will work in IE. I don't remember the details, but I think IE doesn't consider floated LIs to be list items anymore (display-wise), so no bullet.

Posted by: minidiapolis Apr 29 2008, 09:31 PM

So what do I do for IE?

Posted by: pandy Apr 29 2008, 10:35 PM

Dunno if there is a way. Use a background image instead.

Posted by: Frederiek Apr 30 2008, 03:48 AM

AFAICS, it's already a background image.

Problem is, the puddle image is too big to be some kind of "bullet", which makes the menu exaggeratedly big too. Normally, one would use a smaller image. An idea would be to use just a waterdrop or something.

See how Simplebits codes this kind of list (see the comments in the CSS for the width and height of the icon) at http://www.simplebits.com/notebook/2004/07/18/clickable.html.

And the image of the sub-menu shows behind the main menu items (except the last one of course). The sub-menu has to fold out sufficiently to the right to prevent this.

Posted by: pandy Apr 30 2008, 09:01 AM

Am I looking at the wrong page? I looked at the last referred to (by Darin above) and there it's used with list-style-image.
http://www.fountainchurch.org/menu1.html

Posted by: Frederiek Apr 30 2008, 10:33 AM

Ah, yes, it's the correct page and you're right, it is used as a list-style-image.

BTW, positioniseverything wrote about an IE bug which is caused by placing a list with a background set within a floated <div> that has been relatively positioned. See the article: http://www.positioniseverything.net/explorer/ie-listbug.html. Is that what you mean, Pandy? But I don't think this is the issue here, as there is no <div> around the list at all.

Posted by: pandy Apr 30 2008, 11:20 AM

No. The image isn't used as a background, remember? biggrin.gif

In IE it's enough to float the LIs for their bullets to disappear. No other styling needed. I'm not sure about IE7, but I think it's the same. unsure.gif

Posted by: pandy Apr 30 2008, 11:36 AM

For you. IPB Image

Attached Image

I'd better add that it doesn't help to add margin/padding.

Posted by: Frederiek Apr 30 2008, 12:17 PM

Do you mean to say that most of maxdesign's Listamatic menu's don't work in IE, at least proir to IE7? What about the Simplebits sample? And what not…

Once I start up my VM, and when I remember, I'll give it a try.

Posted by: pandy Apr 30 2008, 01:01 PM

No, I don't think there are many lists there, if any, that use floated LIs and bullets or list-style-image. But I haven't looked at them for ages. If you can point me to such a list there I'll check it out with my trusty IE6. cool.gif

Posted by: Frederiek Apr 30 2008, 02:03 PM

Maybe you're right again. In a quick search I found eg. this page with a "float: right;" : http://css.maxdesign.com.au/listamatic/horizontal20.htm.

Or take the sample from which this thread almost started: http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html, which also uses a float.

But effectively, there's no need for a float anyway in a list.


Posted by: pandy Apr 30 2008, 02:14 PM

QUOTE(Frederiek @ Apr 30 2008, 09:03 PM) *

Maybe you're right again. In a quick search I found eg. this page with a "float: right;" : http://css.maxdesign.com.au/listamatic/horizontal20.htm.


But that list doen't have bullets in any browser. The LIs are made display inline, so thay can't have bullets. On top of that there's no margin/padding. To finish it off and make extra sure there won't be bullets they use 'list-style: none'.

CODE
#navlist li
{
display: inline;
list-style: none;
padding: 0;
margin: 0;
}



QUOTE
But effectively, there's no need for a float anyway in a list.

There isn't? I get the feeling we maybe talk about different things. mellow.gif

Posted by: minidiapolis Apr 30 2008, 08:26 PM

Thank you so much for all the help on this one. . . I really really really appreciate it!

Posted by: Frederiek May 1 2008, 03:48 AM

You're welcome.
I hope you achieve what you're looking for and learn something in the long run.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)