Help with the spry horizontal menu bar

I am pretty new at this. I want to change the back ground
color of the bar. I did get one of the menu to change background
color. The other would not change color when I change them using
the CSS panel. Am I missing some SW or is there something special
that I need to do.
my test
page
Thank you for your help.
Thi

*Bump

Similar Messages

How do I change height of the Spry Horizontal Menu Bar?

Hi,
I've been playing around with the Spry menu bar for 3 days now and I can't seem to increase the height of the spry menu bar the way I want. It increases when you enlarge the text, but I don't want it to get too big, but I still need to increase the height of the box. I also tried it in the properties. The box's height will increase but the text stays at the top of the box which looks really weird because I want it to be centered. Also, when do this, the submenus increase along and I want them to stay the same size.
I truly hope you can help me.
Thanks in advance.
EC

David Powers has this tutorial
http://foundationphp.com/tutorials/sprymenu/customize1.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

*Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content

Hey,
I am a newbie to Dreamweaver and was wondering if someone can
help me with the Spry Horizontal Menu Bar....
http://www.djdanmatthews.net
1) After moving mouse over diffrent areas of Spry menu bar
the text seems to disapear or not show up?
2) I can't seem to center content of Spry menu bar with rest
of website?
3) How do I ad a image (where also can I get it) to the Spry
menu bar so it looks more professional &3d?
Thanks so much,
Dan

*Bump

Spry Horizontal Menu bar - submenu position

I'm new to spry so apologies in advance if this has been
posted before.......
I'm putting together a new site using the spry horizontal
menu bar - I've managed to put together a CSS format which works
well in both FireFox and IE7 EXCEPT for the position of the
sub-menus below the main menu bar. IE7 seems to position the sub
menu relative to the top right corner of the parent menu item.
Firefox seems to position it relative to the bottom left corner -
and I can't find a solution which works for both browsers. Any
ideas?

You must have fixed it in the meantime as I see no problem.
Gramps

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* 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;
/* 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
    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: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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;
        float: left;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

Spry Horizontal Menu Bar in IE

Hello,
I had looked at the forums for a possible solution to this, and none of the answers I have found work for me. I have a spry horizontal menu bar with a background image. It works in Safari, Chrome, and Firefox but on IE the background image does not show. There is only a white background. I have changed ul.MenuBarHorizontal li.MenuBarItemIE to have a background image but it still doesn't show in IE.
This is the website: fwmedpeds.net
I am very new to this and any help is appreciated.

If you go to your online SpryMenuBarHorizontal.css which can be found here http://fwmedpeds.net/SpryAssets/SpryMenuBarHorizontal.css, you will see the last few lines as I have previously quoted.
You will also see what Ken Binney has said
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
/* 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
color: #000;
background-image: url(../../../../../../../../My%20Documents/Fort%20Worth%20Med-Peds%20Website/MySite/Image s/button.jpg);
font-weight: bold;
Gramps

Problem endering Spry Horizontal Menu Bar in IE7...help.

I have created a horizontal menu bar in DW CS4 using Spry. When I view using live view, everything is working. When I test in Firefox and Nomad, everything renders as expected. I have tested the page www.ridedesigns/newsite/index.htm using IE7 on both a Windows XP and Vista platform. The problem is that the dropdown menu items fall on a layer behind the company logo (or so it appears) and are only partially visible behind that jpg.
What have I done incorrectly, or is this a known bug?

Here's how I changed the top of your page. Add these two divs:
#menudiv {
    width: 868px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: center;
#maintable {
    width: 868px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
And use them this way:
<BODY>
<PRE> </PRE>
<div id="menudiv">all of your menu markup here, as you have it now</div>
<div id="maintable">
<TABLE width="868" border="0" align="center" cellpadding="5" cellspacing="0" id="template">
    <TBODY>
      <TR valign="bottom">
        <TD height="68" colspan="5" align="left"><IMG src="./index_files/web_banner.gif" width="648" height="73" alt="Ride Designs"></TD>
      </TR>
...rest of table as it is now, followed by
</div>
In my analysis, by placing the menubar in the table, it was sinking into the universe of the table and could not rise above it with z-index. In fact, in IE, the list items in the submenus were taking on the height of the <tr> as well as falling down behind lower table rows.
By putting both the menubar and the table into identically-positioned divs...centered by using the margin: auto; on both sides...they will sit adjacent to each other and not interfere. It did not function correctly with both menubar and table in the same div.
Thanks for letting me dig this through you.
Beth

Spry Horizontal Menu Bar background image IE8 not visible.

I have a slight problem with a horizontal menu bar that I have placed on my site and am hoping someone can help me. It views fine in Firefox, however in IE8 the top menu background image is white instead of the image I specified. Firefox image is below.
Below is IE8 image lacking top menu background:
I am a novice and this is driving me nuts. How can something view fine in Firefox and loose the image in IE explorer? I must have a code incorrect, I know it. Any help is greatly appreciated.
Thank you,

At the bottom of SpryMenuBarHorizontal.css, you will find
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background-color: #FFF;
Change the background colour to transparent and all is well.

Spry Horizontal Menu Bar Renders Poorly in IE 8.0

Hi,
I am having a problem with the spry menu bar in Internet Explorer. The submenus render at an offset to the right/lower :
Can I get both browsers to render equally like this?
Thanks in advance,
Russell Smith

Hi glensbo,
Thanks a bunch for your suggestion...I was attempting to fix the problem using the css panel in dreamweaver. What I did is open the css file in the spry assets folder and read through the very heavily commented style sheet. I changed one of the ul.Horizontal ul position from relative and that did not work. So I changed it back to absolute and it worked...Go figure. But your suggestion lead me to the answer and I thank you from the bottom of my heart. Here is the web site: http://www.fenwickconsulting.net
Russell Smith

CS3 Fix for Spry Horizontal Menu bar/drop boxes positioning bug in IE?

I have searched threads to see if there is an "easy" solution for the incorrect positioning of horizontal menu bar drop boxes in IE browser older versions(mine showed up at the top of the screen and mysteriously included the word "false" in older IE ONLY). Is there a downloadable patch or quick fix for this problem at this point in time? I saw an available download for a newer version of Spry but seems like overkill for this small issue. I am not an experienced web designer or computer geek, but can follow specific directions I am given. The horz bar with drop boxes showed correctly in Firefox and other browsers but not in older(?) IE. For now, I've simply removed the drop boxes to make the page look respectable, but boy did it look good with those boxes. I am hoping somebody can talk to me without lots of teckkie terms. Though I appreciate and love all of you tecs out there.

You really should install the Spry update as it fixes some IE issues that the earlier versions of Spry had. Then use the Dreamweaver Command menu to update your Spry files within your site and you should have the latest and be ready to go. If you're still having issues you may want to also check out the Spry forum: http://forums.adobe.com/community/labs/spry
Let us know if the update doesn't solve your particular problem.

2 spry horizontal menu bars on same site.

Is it possible to have 2 horizontal menu bars on the same site with different number if items? When I change one to fit the amount of space and words it effects the first one. I named one menu bar 1 and menu bar 2.
Thanks for any help you can give.
Pat

yes it is possible copy your menubarhor.css and make its name menubar 1.css after that enter your copied css and find all menubarhorizantal and add 1 end of them.
on your html page make your second menus class menubarhorz1 also add the other head /head codes for new menu
but its not working on ie
look at ahoweb.uuuq.com i made vertical

Spry horizontal menu bar and accordion panels not working when published

Hi,
I'm a newbie to Dreamweaver and have been asked to design an intranet site. On the site, I added both Spry widgets for a horizontal menu bar and an accordion panel. Both of these widgets work in preview, however, neither work when I publish. I uploaded the Spry asset folder (with all the CSS and JS files) to the remote server, but still no luck. What am I missing?
Thanks.

Despite of what you have staed, my bet is on the fact that the SpryAssets folder and/or the included files are not being found by your page..
Open the site in FF, click on view Source and in the source code click the link to the JS file. If it can be found, it will show the content of the file and you will have the satisfaction of knowing that the page can find the file.
If it does not show the content, you need to correct that.
Good luck.
Ben

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Multiple Spry horizontal menu bars

Hey-
Is it possible to have multiple and slightly different Spry
menu bars within the same site?
I'd like to be able to have the same basic menu bar (colors,
text sizes, etc.) I have on my home page, but with more (or less)
buttons on a other pages.
For example, I have a 9 button bar (no sub-menus) that works
fine (even in IE! WOW!), but if I try to have a 10- or 11-button
menu bar on a different page, it won't center correctly. Of course,
any changes I make to that one to make it center affects the
original menu, throwing it off-center.
There must be a way to have more than one set of Spry menu
rules for each menu bar, but I can't find the answer.
Thanks a lot and more.
Greg in New Orleans

One quick and dirty way would be to copy the SpryMenubar.css
to another name and refernce it in the new page. That way you can
different CSS rules for each of your menubar widgets.

Why does Spry horizontal menu bar displays as a list?

I createda spry hoizontal menu bar which looks great on my workspace but when I preview it in a browser, it displays as an unordered list.Does anyone have an explanation for what has happened and how to correct it?

It sounds like the path to the support files - SpryMenuBar.js and/or SpryMenuBarHorizontal.css - is not correct.
Gramps

Help with the spry horizontal menu bar

Similar Messages

Maybe you are looking for