Fireworks nav bar problem, arrow graphic not appearing in IE8

[SandieL]

The graphic arrow that points to an additional layer/rollout does not appear in IE. The menu bar looks fine when on it's own, but when it is brought into another document via a JAVA script, the formatting changes & the arrow does not show up. The menu bar works fine in Safari & firefox. It's only in IE8 that the problem occurs. Does anyone have a solution that may solve this problem:

The menu is in its own HTML file here: http://artscouncil.ky.gov/menuAll.htm
This works fine when viewed in all 3 browsers mentioned above,

but

if I insert some JAVA code into another document which places the menu bar into that document, everything works except the formatting & “arrows.gif” image in IE8. The 2nd document is here: http://artscouncil.ky.gov/indexmenuArrows.htm

Any ideas that you may have as to why this is happening would be most appreciated.

Let me know if you would like the additional css & js files.

Thanks,

[_Rade]

That sure is a lot of JavaScript to do something that would be simple with pure CSS:

http://www.alistapart.com/articles/horizdropdowns/

For your existing code, I'd suggest it's something to do with the float value on your table (which is unnecessary on your demo page, but may be needed for what you're working on). Try adding:

table * {clear:both}

to your CSS.

BTW trying to use the search box @ http://artscouncil.ky.gov/ results in a database connection error.

Keep us posted :)

[SandieL]

That sure is a lot of JavaScript to do something that would be simple with pure CSS:

http://www.alistapart.com/articles/horizdropdowns/

For your existing code, I'd suggest it's something to do with the float value on your table (which is unnecessary on your demo page, but may be needed for what you're working on). Try adding:

table * {clear:both}

to your CSS.

BTW trying to use the search box @ http://artscouncil.ky.gov/ results in a database connection error.

Keep us posted :)

------------------------------------------------------------------------

YOU ROCK! :cool:
Thanks so much for solving this problem.

Per your suggestion, I removed the float:left tags from the css arrow code and added the

table * {clear:both}

That did the trick.
I am now adjusting the css menu box widths so that all of the menu items are the same size.

Thanks, again for your help.

You are right, there is a lot of code to wade through. I thought I would take a short-cut and let Fireworks generate the code for me. Alas, see what happens when you try to cut corners.