Images in Spry menu blank in IE

I have a website with a spry drop down menu. It appears perfect in Safari and Firefox, but the image areas are blank in IE. Any help?

Hi,
Down at the bottom of the sprymenubarhorizontal.css (or if vertical, look for the same type ofthing at the bottom of the css document) do you still have this text?:
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    list-style-type: none;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
    list-style-type: none;
Hope this helps.
Cheers,
Janell

Similar Messages

Adding background image to Spry Menu Bar?

Hi Everyone,
I have a question concerning adding a background image to a horizontal spry menu.
1) I am using Dreamweaver CS4.
2) I am inserting this menu bar on a HTML document.
3) I have created and am using an external style sheet (CSS)
I am not sure on which style(s) ("ul.*) to edit in order to acheive this.
I have a total of four(4) different images I would like to use, they are...
1) Horizontal Menu Bar (main menu bar)
2) Horizontal Menu Bar - Rollover
3) Submenu
4) Submenu - Rollover
Also I would like the text to be centered on the button.
I have somewhat acheived this using the instructions for "customize this widget", yet the image "repeats" because the button is larger than the image.
I have not tried to center the text, this may be a very simple thing, if so just let me know.
What I dont know, and was hoping someone could tell me, is which style(s) ("ul.*) to edit in order to acheive this.
If anyone needs anymore information, just let me know and I will give it to you as soon as possible.
Also I have attached three(3) of the four(4) pictures I would like to use. (this is the maximum)
Any help will be greatly appreciated,
Musicman1994

I'd like to thank everyone with their help so far, but I am still having trouble.
I have tried both suggestions and the results are...
The one suggested by dhvani2511 gave me this...
(The cursur is over "Item 1" it is not blue when a cursur is not over it.)
I would like the image to "be" the button, not just "in" it,if that makes sense.
I have slightly tried the one suggested by .V1 but being that I am new to dreamweaver, code, etc. I am not sure where to copy/paste the code that you gave me.
Does anyone have anymore information?
Thanks,
Musicman1994

Different images for spry menu button jpg or gif?

Hi I have just been reading James Branstons "questions and answers", just what I was looking for many thanks to gramps.
I am new to dreamweaver and spry and what I am wanting to achieve is a spry menu bar horizontal, I would like to have my own font "Cheri" for the about etc. To do this would I need to save text as a gif or a jpg? The jpg looks crisp where as the gif is not so sharp, the jpg has a black background white text, gif white text transparent background, the gif works well with hover, the jpg has the boxed background, if using a jpg do I need to create another file for hover? If so where do I place this in code?
I did what gramps descibed in James Branstons question works well, but the sub menu boxes have disappeared.
Hope this all makes sense, hard to explain what you want when you don't know exactly what you're doing. Many many thanks in advance.

Hi back on the website today just tried out the mouseover and mouseout, I must be doing something wrong as it looks like goulash at the moment, sorry to be a pain and thankyou in advance, as coding is something quite new and frightening for me help is really appreciated.
Currently code is:
    </script>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">about</a></li>
      <li><a href="#">recipes</a></li>
      <li><a href="#">shopping</a></li>
      <li><a href="#">contact</a></li>
    </ul>
</div>
<div id="mainNavspace"></div>
When I added the code below to the about region thats when I made goulash.........
<li><a class="MenuBarItemSubmenu" href="#"><img name="about" src="jpgs/about.jpg" onMouseOver="about.src='jpgs/about_over.jpg'" onMouseOut="about.src='jpgs/about.jpg'" /></a>
Thank you for patience in advance, if you could show me how the code should look I would be very grateful, kind regards.

Getting rid of gap between title banner image and Spry Menu bar?

Hi,
Here's what I have so far :
http://www.artbywaqas.com/TEST/index.html
How can I get rid of the gap between the banner image and the menu below it?

Please explain, what is the center element as in line 43 with the closing tag on line 94?
Also, wrapping the banner image in a paragraph element ensures that you will have a margin and/or padding above and below the element unless you specifically change the style rules to eleminate the marging and/or padding.
The quickest solution is to remove the center element (which does not exist) and change the paragraph elemnt to a div element.
Gramps

Background Image in Spry Menu

Hi everyone,
I'm really struggling with this Spry Horizontal Menu thing. I tried to read thru some other people's duscussions but I got lost.
I just want to add a gradient image instead of a plain color background. Now, I did achieved that on the main level items but as soon as I add submenus, the background image dissapear from the main items and shows on the submenus. That's it. I hope this is easy enough to fix.
I'm not that familiar with CSS and by looking at some samples, the CSS code is embedded in the same HTML page where the menu bar is. Isn't supposed to be on it's own CSS page? And one more thing, can the horizontal menu be inside a table? And if not, how can I center it on the page?
I'm a beginner so please be gentle... : )
Thanks

This is good but my problem is that my background image dissapear from the main menu item as soon as I add a submenu item... everything else seems to work just fine. About the question if the menu could go inside a table or if has to be out side of it, how can I centered it on the page?
thx

Spry menu blank in IE 5.2

I tested all the DW CS3 menu bar, accordions, collapsible
panels on IE 5.2 - none work.
I even uploaded one test page on my server to make sure the
problem was not on my side.
http://www.cinelines.com/sprydropdown.html
The site I am building will be used by clients with older
browsers.
Is there a fix that can address the issue?
Thank you
JC

>I tested all the DW CS3 menu bar, accordions, collapsible
panels on IE
>5.2 -
> none work.
> I even uploaded one test page on my server to make sure
the problem was
> not on
> my side.
http://www.cinelines.com/sprydropdown.html
> The site I am building will be used by clients with
older browsers.
> Is there a fix that can address the issue?
I don't think you'll be able to "fix" the Spry solutions to
make them work
in IE 5.2
You can check the link below; these are not simple solutions
to implement,
but they have pretty good browser support.
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- Add "you are here" highlighting to virtually any menu
- FAQ pages made easy

Spry menu / lightbox conflict

I apologize in advance if this is bad forum etiquitte as I have also asked this question on the general Dreamweaver forum.
If you open the following page in IE8:
http://02cada7.netsolhost.com/Stasik_Family_Website/janzofiastasik.htm l
and you go immediately to the pictures and activate lightbox everything looks great. But if you move your mouse over the spry menu first and then try the lightbox images, the spry menu does not fade into the background.
Anyone have any ideas how to fix this?

I had another look at the Spry menu (HTML, JS and CCS) and there is nothing wrong with that side.
You could try to swap the two CSS file around as follows
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<link href="SpryAssets/SpryMenuBarVertical-2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
But otherwise, you need to seek out the culprit within the lightbox plug-in.

Lightbox / spry menu conflict

Hoping there is a quick fix for this issue....
If you open the following page:
http://02cada7.netsolhost.com/Stasik_Family_Website/janzofiastasik.html
and you go immediately to the pictures and activate lightbox everything looks great. But if you move your mouse over the spry menu first and then try the lightbox images, the spry menu does not fade into the background.
Anyone have any insights about how to fix this?

rstasik wrote:
Thanks for the suggestion...but I am not quite sure I understand what I should do.
"pls change your style code as below
<div id="overlay" class="sample" style="height: 602px;opacity:0.4;filter:alpha(opacity=40)"></div>"
The div that the spry menu is located in is div id="left".   I don't have a div id called overlay. Or are you suggestiong that I create one?
I am very sorry...but this is all so new to me, that I sometimes make things harder than they have to be.
hi,
pls do one thing, i guess you got lightbox.css
change your css code in your css file as
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
   opacity: 0.5;                    /* Firefox, Safari(WebKit), Opera */
   -ms-filter: "alpha(opacity=50)"; /* IE 8 */
   filter: alpha(opacity=50);       /* IE 4-7 */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
try this

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Spry Menu Background image not working in IE

I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
SpryMenuBarHorizontal.CSS is below:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 800px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
ul.MenuBarHorizontal li a{
color:#FFF;
ul.MenuBarHorizontal li li{
background-image: url(../images/menu_background1.jpg);
ul.MenuBarHorizontal li li a{
color:#000;
ul.MenuBarHorizontal li li li{
background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
ul.MenuBarHorizontal li li li a{
color:#FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
color:#33CCFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
text-decoration: underline;
/* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
Remove the text-align:center; from the above style.
Instead of centering your list element (li), center the link text (a) itself:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-align: center;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
If you don't want the submenu text to be centered, do this immediately after the previous style:
ul.MenuBarHorizontal ul a {text-align: left;}
The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
that causes sub-submenus to fly out to the right of the submenus to which they attach.
Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
Beth

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Added Spry menu in CS3, site is entirely blank in IE 6 or 7, fine in FF, mac

I've about had it. Built a site, posted here with some issues
with a P7 menu adding blue bar. I deleted all the P7 code...page
was back to normal, but without a navigation bar. So, I added one
of the new Spry bars in DW, set it all up, tested it on my Mac,
works fine.
I upload all pages to server, open it in Explorer 6 and 7 on
PC, and I get one blank white page! I downloaded Firefox for PC,
and the site is fine there. It's fine everywhere else. At first, I
had just the background tile in IE. Didn't panic yet. Did some
stuff, and then even that is gone.
I can not comprehend where to begin troubleshooting this. I
did not backup the site before I started screwing with this, so I'm
in trouble here.
the url is
http://www.auroratownship.org/proto
Do you guys see a plain white page too? If you have Firefox
or another browser, can you try it there as well to see what it is
supposed to look like? I even tried deleting all the Spry menu
stuff, didn't matter.
HELP!

So far I've not spotted the problem for usre, but there is
one
validation error that you should fix, just in case.
<noscript>
<map>
Menu provided by f-source.com, All Rights Reserved. <a
href="
http://f-source.com">Web
menu</a>
</map>
</noscript>
remove that errant <map></map> tag and see what
happens.
E. Michael Brandt
www.divaHTML.com
divaGPS | divaFAQ
www.valleywebdesigns.com
JustSo PictureWindow
synterx wrote:
> I've about had it. Built a site, posted here with some
issues with a P7 menu
> adding blue bar. I deleted all the P7 code...page was
back to normal, but
> without a navigation bar. So, I added one of the new
Spry bars in DW, set it
> all up, tested it on my Mac, works fine.
>
> I upload all pages to server, open it in Explorer 6 and
7 on PC, and I get one
> blank white page! I downloaded Firefox for PC, and the
site is fine there. It's
> fine everywhere else. At first, I had just the
background tile in IE. Didn't
> panic yet. Did some stuff, and then even that is gone.
>
> I can not comprehend where to begin troubleshooting
this. I did not backup the
> site before I started screwing with this, so I'm in
trouble here.
>
> the url is
http://www.auroratownship.org/proto
>
> Do you guys see a plain white page too? If you have
Firefox or another
> browser, can you try it there as well to see what it is
supposed to look like?
> I even tried deleting all the Spry menu stuff, didn't
matter.
>
> HELP!
>

Spry Menu problem with using a transparent background image

Hi- I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view, but doesn't work in browser view (safari), in fact the menu reverts to it's original grey and blue boredom. Does anyone have a solution for me? Does this mean it will be grey and blue when it goes live? Thanks, Ruth333333

Please supply a link to your site.
Gramps

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

Images in Spry menu blank in IE

Similar Messages

Maybe you are looking for