Spry menu Background color IE

The background color of one of my menu items (the only one which includes a submenu) appears as white instead of blue in Internet Explorer 8.0
Any tips on how to correc this? I'm using Spry 1.6 - maybe I should download the Spry 2.0 Widget? If I do that, do I have to recreate the entire menu?
http://www.studio2adv.com/dev/gibson
Thanks in advance for any advice.

Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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;

Similar Messages

Spry Menu Background Color

I've created a spry vertical menu with a black background.
When I mouse over one of the menu items and the sub menu appears, I
would like it to have a different color background than the main
menu. Anyone know how to accomplish this?
Thank you>

Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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;

Menu background color has changed after applying Forms Patch3 (10.1.2.3.0)

Hi,
we have applied Patch3 on our Forms Environment.
Now the menu background color has changed from green to gray (colorScheme is "teal" in formsweb.cfg).
This behavior isn't documented and our customer want's to get the green menubar back...
Any hints?
Greetings, Florian.

removed because of obsoleteness...
Edited by: W1zard on Feb 2, 2009 4:57 PM

Change spry vertical menu background color

After updating from 4.1 to 6.1, the background color of my
vertical menu changed to the default grey. How do I change the
background to my original blue.
James

I'm going to give you a couple links to help you out.
http://labs.adobe.com/technologies/spry/home.html
- this is the official Spry Homepage. Here you will find an updater
to the Spry. Most of the documentation on the website is built
around the latest version and this is where you will find the
updater. Inside the package are some samples and an extension.
Install the Extension and then restart DW and under the Sites menu
you will see a new option to Update Spry. There is also a link to
the official Spry forums from there.
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
- This is a quick sample of different things you can do to change
the menu bar. This does not include the basic color change. But it
does give you an idea of how to change things in the CSS file (view
the source of the page).
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
- This is directly from the Adobe Spry documentation. If you scroll
down a ways it will show you how to do the color customizations for
the Spry Menu Bar.
Lastly, if you do not have a basic understanding of CSS this
will all be foreign to you. If that is the case I would highly
recommend reading over the below CSS tutorial first to get a basic
understand of the CSS code:
http://www.w3schools.com/css/

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 background is white in IE

I've created a vertical Spry menu with submenus. The menu should not have a background color, so it should take the color of the image it's on top of. This looks fine on Safari (Mac) and Firefox (Mac/Windows), but on IE 8 (Windows), the menu background is WHITE. This makes it difficult to see the menu items. What can I do so that the menu background is transparent and does not show up white in IE?
The site: http://chrysacupuncture.com
I'm attaching index.html, my own css file, and the Spry css file.
Thanks for your help.

Actually, now that I look at it, I think one of your IE hacks might be malfunctioning:
/* 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.MenuBarVertical li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This is the bottom-most item in your CSS file. Notice the typo in the float:left and that it does indeed state a white background background:#FFF. I don't usually put IE hacks external CSS, you might try moving it to the main HTML file and using IECC. Place it in the header as you would if you had internal CSS:

I removed the background color altogether, but you may have to define one (I don't usually support IE5 so I'm not sure).
If you insist on having this hack externally, you can try placing the background: transparent in the first item of your CSS:
ul.MenuBarVertical
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: 9em;
     padding-top: 80px;
     background: transparent;

Change spry submenu background color only?

Is there a way to change the background or background color
on the spry horizontal or vertical menus without changing the main
menus?

Also, whether you are using a vertical or horizontal menu you
can find the necessary tag within CSS. Adobe as done a fairly good
job on commenting exactly what is going on.
I worked on a project for Alabama Marriage & Family using
horizontal menus. You can take a look at my navigation and see how
I structured my CSS. Each sub-menu actually has different CSS
properties so it made it a little more difficult.
http://www.alabamamarriage.org/new/Templates/achmiTemplateA.dwt.php

Spry Menubar background color help?

How does one go about making the background color of your submenus different from the main menu bar?
Here's a site I have found with basically the submenu I want, notice the submenus have a background color and the menubar has a background image.
http://thecreatureconservancy.org/
(I am running CS5.5)
Thank you!

Have a look at the following where I have used an untouched SpryMenuBarHorizontal.css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
</head>
<style>
body {
    width: 980px;
    margin: auto;
#header {
    height: 200px;
#nav { /* USE YOUR OWN BACKGROUND IMAGE */
    background-image: url(http://www.copperleafcrossing.com/thecreatureconservancy/images/topnav_bkgd.jpg);
    height: 35px;
ul.MenuBarHorizontal a {
    color: #FFF;
    background-color: transparent;
ul.MenuBarHorizontal ul a {
    background-color: #436D9C;
ul.MenuBarHorizontal li.MenuBarItemIE {
    background: transparent;
</style>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
          <ul>
            <li><a href="#">Item 3.1.1</a></li>
            <li><a href="#">Item 3.1.2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
</ul>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

Spry Menu Background Stops After Text

I made a Spry Vertical Menu in DCS4. When I look at it in the browser, the background only extends the length of text...I want it to extend across the box equally for all the menu choices. I have looked at all the CSS properties and changed the values, but nothing seems to affect the length of the backgrounds. Can you offer any suggestions? You can see the page at http://www.stepbystepcare.org/index4.html

1. Resurrect the original SpryMenuBarHorizontal.css, too many irregularities in the modified one.
2. remove line 18-20 from the main document
3. add a closing UL-tag to line 83 main document
4. Then add the following to the bottom of the original SpryMenuBarHorizontal.css
ul.MenuBarHorizontal {
    width: 940px;
    margin: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
ul.MenuBarHorizontal li {
    width: auto;
ul.MenuBarHorizontal ul {
    width: auto;
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
ul.MenuBarHorizontal a {
    color: #B5B5B5;
    text-transform: uppercase;
    padding: 1.1em 3em 1.1em 1.5em;
    background: url(../images/img03.gif) repeat-x -100px;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    background-color: transparent;
    color: #FFF;
ul.MenuBarHorizontal li.MenuBarItemIE {
    background: url(../images/img03.gif) repeat-x -100px;

SPRY menu background transparency

Is it possible for the spry menu object to use a transparent
background? I'm assuming the white background that shows up when
you remove all of the menu's background colors is an iFrame meant
to keep the menu from slipping behind form elements...is there any
way to disable this behavior? Thanks in advance.

Hi,
please try to add on this rule:
ul.MenuBarHorizontal li the following property: opacity:0.3;
(this will work only for FF, for IE you should have:
filter:alpha(opacity:30))
We have a fix for the next spry release version, about
iframes: on this rule ul.MenuBarHorizontal iframe add:
filter:alpha(opacity:0.1);
Hope this helps,
Diana

Changing Spry Menu Background

So I decided to spice up my page a little by adding a
background image to my spry menu buttons.
After creating an image I went to "ul.MenuBarVertical a" and
set my new image as the background, worked fine.
Same image with a triangle on right for a submenu button in
"ul.MenuBarVertical a.MenuBarItemSubmenu" worked fine.
Hover image in "ul.MenuBarVertical a:hover,
ul.MenuBarVertical a:focus" works fine.
But I can't seem to change the background image for hovering
over a submenu button. I assumed it would go in "ul.MenuBarVertical
a.MenuBarItemSubmenuHover" but when I hover over it the image just
isn't right. I've looked at all the rules for my spry menu and have
no idea what is wrong, help please, thanks in advance.

It is always best to read the comments within the CSS.
For instance, the first lot of style rules come under the heading
LAYOUT INFORMATION: describes box model, positioning, z-order
Then there are style rules that come under the heading of
DESIGN INFORMATION: describes color scheme, borders, fonts
Other headings are
SUBMENU INDICATION: styles if there is a submenu under a given menu item
and
BROWSER HACKS: the hacks below should not be changed unless you are an expert
As for highlighting there are the following
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
/* 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;
Gramps

Making spry menu background transparent

Hello
I have made a spry menu and made the background transparent.
Works in Safari and Firefox on my mac but on a pc (IE) it is white.
How can I change this? (I'm fairly new at this) Thanks

Hello DrJeff08
I'm happy to report that I did manage to solve my problem,
perhaps if we're lucky we'll solve yours too. (This is my first
website with Dreamweaver and first time using CSS). I went to my
CSS panel in order to view all the rules I'd created, opened up the
Spry CSS rules and methodically checked all of the properties for
each of the rules. The very last entry on that style sheet was one
that I didn't create, called ul.menuBarVertical li.MenuBarItemIE
(the "IE" that I see at the end of that name gave me a clue that it
relates to Internet Explorer) I noticed that the background was
white so I simply removed the white background. It must have been
automatically inserted as a default background color.
Hope it helps!

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

Spry menu font color

I've replaced a traditional navigation menu with Spry menu. I thought the ul.MenuBarVertical a was where I should change the font color but it is not having an effect. Can you direct me to the right CSS to change. You can see the site at http://www.kinggraphics.net/premier%20site/index.html
I would like the font to be cream but it is coming out blue.

Not a Spry expert, but the code on your page has no CSS class applied to your Nav links.
Hope this helps
<ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="" href="index.html">Home</a>      </li>
      <li><a class="" tabindex="-1" href="history.html">Our History</a></li>
      <li><a class="" tabindex="-1" href="Products.html">Products</a>      </li>
      <li><a tabindex="-1" href="service.html" class="MenuBarItemSubmenu">Service</a>
        <ul>
          <li><a tabindex="-1" href="driverDownloads.html">Sharp Drivers</a></li>
          <li><a tabindex="-1" href="ManualDownloads.html">Sharp Manuals</a></li>
          <li><a tabindex="-1" href="SafetyDownloads.html">Sharp MSDS</a></li>
          <li><a tabindex="-1" href="mailto:[email protected]">E-mail Meters</a></li>
        </ul>

Menu: Background color covers all! Urgent

Made a DVD with a nice menu.
Next day, when I wanted to change some detail, it had "disappeared", i.e. it was covered by backgropund color matte (Color could be changed in Preferences, but matte could not be removed).
Templates dragged-dropped into Menu are also immediately covered by background color.
Can’t work on the menu, - but can see it in Connections pane.
Any suggestions, please? I have to deliver a DVD this weekend.
aabenhus

cool! many thanks, got it. ;-)

Spry menu Background color IE

Similar Messages

Maybe you are looking for