Background of the Spry menu bar problem

Hello
I tried to search for this problem, and although I found others with the same problem, there has been no response (probably so obvious I missed it and they understood.) And I update the Spry menu bar to the latest version.

The Horizontal Spry menu bar works fine on Firefox and IE 7, the background is white and the submenus, not the intention. Alignment and size is fine, just designed background colors do not work (on the menu itself, I want a transparent background on submenus, #777079.)
Website: September Entertainment Site
Style sheet Spry: Spry CSS

Thank you in advance for any help you can give me.
See you soon,.
Janell

Hello
Just found the problem for someone who is having the same thing happen. This is the cut down "Sections":

/*******************************************************************************

BROWSER HACKS: hacks below should not be changed, unless you are an expert

*******************************************************************************/

/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
UL. MenuBarHorizontal iframe
{
position: absolute;
z index: 1010;
Filter:alpha(opacity:0.1);
}
/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
@media screen, projection
{
UL. MenuBarHorizontal li. MenuBarItemIE
{
display: inline;
f\loat: left;
background: fff;
}
}

Where it says: "background: fff;" change to everything that you need, in my case, "background: transparent;"

Voila!
See you soon,.
Janell

Tags: Dreamweaver

Similar Questions

Spry menu bar: problems in IE and Firefox

Hello! This is my first time writing the forum. I tried to fix this site and I'm about to break! I found a lot of help just brwosing here in the past and I hope that somone can point me in the right direction.

I have validated successfully the site using the W3C CSS Validator thinking which might help, but no go. (In fact, everything what was spoil the vertical alignment of elements of menu in Safari, Chrome and other browsers in which the menu used to work properly). I tested on the latest version of Firefox for Mac and testing for IE using the Adobe browser lab.

Here's what happens:

The menu is completely useless in all versions of Internet Explorer.

In Firefox the menu seems to work fine except the menu under flash items then disappear a site navigation very frustrating.

Here is the site: http://oregapet.com/

And here's my sections

@charset "UTF-8";
ul.MenuBarHorizontal {
          margin: 0;
          list-style-type: none;
          font-size: 80%;
          cursor: default;
          width:auto;
          font-family: Verdana, Geneva, sans-serif;
           [disabled]font: 11px;


          padding-top: 4px;
          font-weight: bold;
          padding-bottom: 2em;
}
ul.MenuBarActive {
          z-index: 1000;
}
ul.MenuBarHorizontal li {
          margin: 0;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: auto;
          width: auto;
          float: left;
          background-color: #AAA;
          color: #FFF;
          padding-top: 0.3em;
          padding-right: 3.5em;
          padding-bottom: 0.3em;
          padding-left: 1em;
          min-height: 22px;
}
ul.MenuBarHorizontal ul {
          margin: 0;
          list-style-type: none;
          font-size: 90%;
          z-index: 1020;
          cursor: default;
          width: 0px;
          position: absolute;
          left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
          left: auto;
}
ul.MenuBarHorizontal ul li {
          width: 15em;
          margin-left: -12px;
           [disabled]color: #FFF;


}
ul.MenuBarHorizontal ul ul {
          position: absolute;
          margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
          left: auto;
          top: 0px;
}
ul.MenuBarHorizontal ul {
          border: 0;
}
ul.MenuBarHorizontal a {
          display: block;
          cursor: pointer;
          background-color: #AAA;
          padding: 0.3em 0 0 0;
          color: #FFF;
          text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          padding-top: 10px;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          text-decoration: none;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe {
          position: absolute;
          z-index: 1010;
           [disabled]opacity:0.1;


           [disabled]filter:alpha(opacity=1);
  For IE8 and earlier 
}
 @media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
          display: inline;
          f\loat: left;
          background: #FFF;
}
}

Thank you very much!

GRAMPS! Thank you very much. I really, really appreciate your help. In addition to your suggestion I changed all other instances of z-index that relate to the menu bar. I put them all to 10000 (more than the z-index of 1002 on the fadeslideshow.js). Now it works like a charm and is no longer hides behind the fadeslideshow. Yay!

Thanks to Nancy O. for his suggestion as well. For anyone having problems woth Spry Menu bar in IE and Firefox especialy: The Spry Menu Bar 2.0 version works much better than the previous version.

Melody

Spry menu bar problem (Firefox 2/IE 7)
Hello
I have some problems of browser with the Spry Menu bar Widget in DW CS3.
IE 7 firstly:
I'm getting an extra empty space in my page above the menu bar;
Menu bar expands to fit the entire width of its container.

next Firefox 2; (same code)
I get no empty space in my page above the menu bar;
Menu bar does not expand to fit the entire width of its container (an empty space (5-10px) at the end of the menu bar)

The two instances use the same html and css files. I don't now the code attached here can send by e-mail if necessary. (Reach the button Code doesn't seem to work for me here)

Thank you
nitefisher
Thanks for the reply... I had previously watched/tried this action. I think I solved my problem... it turns out that what I thought, it was the space above, the menu in IE7 has been associated with the Spry, turns out it was the bottom of the container above the menuwrap container. Solved IE7.
The problem of Firefox 2 was just a matter of getting all the widths in the CSS Spry file to the required value. It ends up being, I went from em pixels and it works fine now.

Thanks to everyone for their support.

nitefisher

Dreamweaver CC: Layouts start CSS & missing of the Spry menu bar
- I preset web training and our client updated for Dreamweaver CS4 Dreamweaver CC 2015. That are the CSS Starter layouts in Dreamweaver, for example the column 2 fixed, header and footer layout? I don't find it in Dreamweaver CC 2015. It was a good starting point to teach students to create a web page using one of these start CSS page layouts and then customize.
- I also can't find the Spry menu bar to create a menu (up to three levels) bar.
- What is the best options for me to use instead the CSS starter layouts & the Spry menu bar? Students know nothing about web design when they start with the course.
It is more a spry menu bar, which was crap anyway. You can learn how to make a simple CSS - only menu or a menu jQuery.

The new version of DW includes a starter starter site, which is how many sites asre built these days. Bootstrap also contains a navigation pane.

change the spry menu bar

Just opened my page in the new Dreamweaver 20141. What happened to the easy edit function for the Spry menu bar? I'm sure he's here somewhere, I just can't find it. It was so easy in the previous version. It just appeared at the bottom of the screen when I clicked on the bar. Where is he now?

Never mind. I found it. Window > properties

The Spry menu bar navigation

I am using the Spry menu bar and have several menu on my home page items that have incorporated under them. For example, I have an element of menu 'navigate' on the home page, and the slot 'Browse' 'saw inventory"and"wish list ". I want users to be able to access the sub through the menu item "Browse" items but does not allow users to open "Browse."
I would like suggestions.
Thank you
Iain

Just put a # where otherwise the URL would go as a
```
Browse
```
GRAMPS

Text in bold Safari causing problem with the Spry menu bar

I made a web site using a Spry menu bar. It worked fine in all browsers, as far as I knew. I was just alerted by owner esite th that the menu bar was the last link off position seen in Safari. I don't know when this started happening. I noticed that the text in Safari is more bold than firefox or IE. My guess is that this is the problem. I searched on google for help and found this
Add-text-shadow: 0 0 0 #000; to the css.
I tried but it don't seem to have any effect.
the site is here:
http://www.telluridegravityworks.com/
Can anyone offer advice on how I might solve this problem? Thank you!

I don't see the problem under Win 7/Safari (guess it's a question of Mac) but I see it in Win 7/IE9.

In the CSS file, http://www.telluridegravityworks.com/css/gravity-works-winter.css

set the width of the container navbar fix here

{#nav - menu
Width: 455px; / * adjusted to 445px * /.
padding: 0px;
overflow: hidden;
float: left;
margin left: 515px;
}

problem with the spry menu bar
Hello. I'm having a problem with the submenu appears at the top of the page instead of the sub menu. I have added settings and changed % to the "ems", but still does not work. I think it has something to do with being right under the menu spry flash movie. Can anyone help? Thanks in advance.
Here is the link to the site:
link to the site
Hello

The problem is due to the
Tags that you added all through
the spry menu.
In IE, which not only align text Center but it also aligns the
- who owns.
  This changes things.
  
  First of all, change this:
  - Homepage
  - On
    We
  - href = "link_pages/services.html" > services
    
    Reservations
  - <>
    href = "link_pages/staff.html" > staff
  - Class = "MenuBarItemSubmenu" > news
    
    Events
  - Fido
    Friends
  - <>
    href = "link_pages/Resources.html" > Resources
  - Contact
    We
    
    Career opps
  To do this:
  - Homepage
  - About us
  - href = "link_pages/services.html" > services
    - Reservations
  - Staff
  - Class = "MenuBarItemSubmenu" > news
    - Events
  - Friends of Fido
  - Resources
  - Contact us
    - Career opps
  So, if you want your text aligned to Center:
  
  Change this in the sections file:
  
  UL. MenuBarHorizontal a {}
  display: block;
  cursor: pointer;
  background-color: #000000;
  Padding: 0.5em 0.75em;
  color: #FFFFFF;
  text-decoration: none;
  }
  
  To do this:
  
  UL. MenuBarHorizontal a {}
  display: block;
  cursor: pointer;
  background-color: #000000;
  Padding: 0.5em 0.75em;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  }
  
  I hope this helps.
  
  Take care
  Tim
  
  "rio333" wrote in message
  News:ft6src$RHS$1@forums. Macromedia.com...
  > Hi. I'm having a problem with the submenu appears at the top of the page
  > instead of the under the menu. I've added parameters and modified % to
  > "ems".
  > but still does not work. I think it has something to do with flash
  > film
  > under the spry menu. Can anyone help? Thanks in advance.
  > Here is the link to the site:
  > http:www.fidoandcompany.com
  >

Cannot change the color of hover in the Spry menu bar

I try to customize my horiztonal Spry menu bar and managed to almost I want, except the point State. It should be easy enough since I want all (top of page menus and submenu items) to go to the image background even when red flew over (as well as having the top red menu item when its submenu is open).
Currently I have while hovering to the correct color, with the exception of the top Menu of the page that contains submenus (even if their submenus are fine, but also high Menu with no submenus items).
I thought that I had put my finger where to change this in the CSS Spry, but something can be in conflict, since change it doesn't seem to work as it has in other menus, I tested it on that...
Here is the project of the site- http://beta.deltsig.com/
(Notice that the elements of the first menu 4 goes to red when hovered on)
Here's the section of the CSS where I think it should be - I can post more of it if necessary:
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: pointer;
Padding: 0.5em 0.75em;
color: #363837;
text-decoration: none;
background-image: url (.. / css/images/menu-graygradient.gif);
}
/ Components menu that have mouse over or focus have a red gradient background text.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}

Try to remove this CSS rule on line 124

UL. MenuBarHorizontal a.MenuBarItemSubmenu {}

background-image: url("..) ("/ css/images/menu-graygradient.gif");

}

Spry menu bar problem: changes on the page by default not inherited on other pages

Hi people,
I have no experience in web design, but my job requires me to do sometimes. I'm an engineer it specialist tech\Network and been using common sense to change our main Web site with dreamweaver. So far all I've done very well worked until the editing of the menu bar on the home page. Research and tutorials Watch did not help so I hope someone here can. Thanks in advance.
So I did was change a few things on the menu by removing some sub menus and the addition of a link. Everything was made from the default.aspx file, which is the home page. Everythign works fine but when I go to another page it seems that my changes were never made. All other pages have the menu spry code incorporated in gray and cannot be changed. After having taken a good look I realized that it was the old code showing. My question is how can I ask my changes to all pages at once?
Here is the code after I made the changes. The previous version was just a few lines further href.
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
"< style li =" width: 90px; "> < a default.aspx" style = "width: 90px;" text-align: center; padding-left: 0px; "> Home < /a > < /li >
< style li = "width: 90px;" > < a class = "MenuBarItemSubmenu" href = "#" style = "text-align: center;" Width: 90px; padding-left: 0px; "> < /a > directory
< ul >
< li > < a href = "judges - dir.aspx" > < /a > < /li > judiciary
< li > < a href = "case - support.aspx" > < /a > < /li > administrative staff
< /ul >
< /li >
< style li = "width: 136px;" > < a href = "#" class = "MenuBarItemSubmenu" style = "text-align: center;" Width: 136px; padding-left: 0px; "> < /a > rules of procedure
< ul >
< li > < a href="documents/procedures/organization-osah.pdf" > organization of the SOAD < /a > < /li > ".
< li > < a href="documents/procedures/administrative-rules-osah.pdf" > rules of procedure Administrative < /a > < /li > ".
< /ul >
< /li >
< style li = "width: 130px;" > < a href = "/ agency-Ref - word.html ' class = 'MenuBarItemSubmenu" style = "text-align: center;" Width: 130px; padding-left: 0px; "> case reference < /a > < /li >
< style li = "width: 142px;" > < a href = "#" class = "MenuBarItemSubmenu" style = "text-align: center;" Width: 142px; padding-left: 0px; "> < /a > court information
< ul >
< li > < a href = "calendar - options.aspx" > short Calendar < /a > < /li >
< li > < a href = "get - decision.php" > decisions < /a > < /li >
< li > < a href = "judges - circuit.html" > < /a > < /li > judicial Circuits
< li > < a href = "directions.html" > Directions to court < /a > < /li > ""
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > frequently asked Questions
< ul >
< li > < a href = "questions.html" > English < /a > < /li > ""
< li > < a href = "questions - espanol.html" > Espa & ntilde; OL < /a > < /li >
< /ul >
< /li >
< li > < a href = "comments.aspx" > Questions < /a > < /li >
< /ul >
< /li >
< style li = "width: 98px;" > < a href = "" / Court - forms.html "style =" text-align: center; Width: 98px; padding-left: 0px; "> Forms < /a > < /li >
< style li = "width: 104px;" > < a href = "#" class = "MenuBarItemSubmenu" style = "text-align: center;" Width: 104px; padding-left: 0px; "> about us < /a >
< ul >
< li > < a href = "documents/OSAH_FY_2011.pdf' target = '_blank' class ="MenuBarItemSubmenu"> annual report < /a >"
< /li >
< li > < a href = "contact - us.html" > contact us < /a > < /li >
< /ul >
< /li >
< /ul >
UPDATE: here's the code embedded in all other pages. I guess I need to know where to go or how to change.
<! - InstanceEndEditable - >
"" < link rel = "... / shortcut icon" href = "' / favicon.ico ' >"
< link href = "CSS/theme4.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
< script type = "text/javascript" src = "SpryAssets/SpryMenuBar.js" language = "javascript" > < / script > "
<!-InstanceBeginEditable name = "head"--> < style type = "text/css" >


I assume that you have created .dwt (DreamWeaver template) files and make changes to other pages based on the page template. That's why DW doesn't allow you to edit non editable areas.

In this cage, open the page where the code is not editable, change > model > detach the model

This will make the autonomous and fully editable page.

The Spry menu bar personalized with background Images

Hello
Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item? In other words, the format individually each menu item. I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu. Thank you.

Each menu item will require that this is the style and the name of the class of its own.

Each class will have to be applied to each following anchor tag:
- Point 1
- Point 2
- Point 3
http://ALT-Web.com/demos/multi-colored-list-menu.shtml

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

Change Active (?) Link in the Spry menu bar

I have inserted a bar menus horizontal spry in my page and have adjusted behaviors for link properties (l, v, h, & a). However, I would like the text of the button menu spry to a specific and constant color for the active page linked (destination). For example, the background color of the menu bar is grey dark (#282828) and the text is light gray (#D9D9D9). If I point and click on the 'About' button the text is orange (#D96E11). How could I go to keep the text of this orange color once the page 'About' is reached?

I am a newbie to DW, so I am not able to follow and understand your answer here. You said, ' give the tag which represents the current page ID. Where and how can I achieve this? From there, ' and then create a new style for the ID rule ". Do you mean create a new CSS rule-> type of selector: class?

New DW isn't a problem, but to use it successfully, you must understand the HTML and CSS. Judging from your questions, you're new to them, too. Again, this is not a problem, but your progress will be slow and painful until you master the basics of these two technologies.

There are several ways to add an ID to a tag of , but the best way is to first create the style rule. The example I gave is an ID selector, not a class. Class selectors begin with a dot (period). ID selectors begin with the pound sign.

Once you have created the style rule and saved your stylesheet, you can position your cursor within the binding to which you want to apply the code. Then right click in the tag in the selector tag at the bottom of the Document window, and then choose Set ID > here on the shortcut menu.

The Spry menu bar help

Well, I have been struggling with this for always and still am having problems with my menu bar. I need the main menus to have background pictures and the submenus have a color. I use ul style. MenuBarHorizontal a for styling the menu without ul and drop-down menus items. MenuBarHorizontal a.MenuBarItemSubmenu for styling the menu with drop-down lists items. Here's what I have:
http://littlechisel.com/Ideal_Window/
I can change the color of items 1 and 3, but I can't add a background image. When I try to add the image to the style, it comes out blank. What I am doing wrong? I had this work last night, but for some reason, now it is not. Help, please... Thank you.

Not solved my problem so no need to answer...

Spry AutoSuggest below the Spry menu bar in IE

Hello
Below is a description of my situation.
When/where: Internet Explorer, version 7 and 8 or 9-compatibility mode, specific instances of IE version
Description of the problem: the autosuggest widget Oupout is appearing below are links of the menu bar widget.
Example: http://www.shopcopco.com/template2011.test.asp
Try to type "copy" in the search bar. A list of correspondents associated copy terms should appear below. On most of the browsers no problem. Older versions of IE and IE9 in compatibility mode is the content of the above content autosuggest menu bar.
I have tried the following to address the question:
-Set the z-index .iframeSuggest, .hideSuggestClass and div suggestion than the menu styles.
-Moved calls JavaScript from top to bottom, relative to each other to see if who touched anything.
-Research on similar problems via Google.
You can see the HTML source code to the link above. The style sheet can be found here.
http://shopcopco.com/TW_assets/2011/styles/published.CSS
Thanks for any advice or help, you can provide.
Best regards
James

And it is to have the answer.

http://www.onlinecasinodemar.com/webdesign/SUPERFISH-jQuery-menu-IE-z-index-bug/

It is not content styles and spry that require an adjustment, it's the containers of these elements.

James

Pulling my hair out on questions of IE8 with the spry menu bar

Its a story classic, but for the life of me, I can't understand this. I saw him in a hundred different forums (all slightly different versions of the same problem). I've implemented a menu spry horizontal bar (version 1.6.1). It works fine in Chrome, Safari, Firefox, etc..., but goes nuts in IE.
layout and positioning submenus stunts go horizontally, far right, etc..
Is a sample of the menu at http://www.alaskanrafting.com/mockup/NewIndex.html
I'm sure it's just a line or two in my CSS, but of course I can't find.
the CSS would be to http://www.alaskanrafting.com/mockup/SpryAssets/SpryMenuBarHorizontal.CSS
If anyone has information, I would be very happy.
Thank you

Try to add/edit the following

UL. MenuBarHorizontal ul li {}
display: block;
float: none! important;
Width: auto;
white-space: nowrap;
border-bottom: 1px solid #EEE;
}

Must make a ! important to float so that it overrides the JS.

GRAMPS

Background of the Spry menu bar problem

Similar Questions

Maybe you are looking for