Wrong Font in Spry Menu DW CS3

Hi, I just got CS3 Design Premium and am playing with the
Spry Menu widget in DW. So far it's been pretty cool and fairly
easy to customize. But I'm having an issue. In DW, my menu fonts
display as a Verdana sans-serif but when uploaded to the server,
it's showing as a Times New Roman type serif font. Any clues? The
test site is here:
http://trekkin.com/test
Here is the SpryMenuBarHorizontal.css CSS file for your
viewing pleasure.

jhurlbut wrote:
> Hi, I just got CS3 Design Premium and am playing with
the Spry Menu widget in
> DW. So far it's been pretty cool and fairly easy to
customize. But I'm having
> an issue. In DW, my menu fonts display as a Verdana
sans-serif but when
> uploaded to the server, it's showing as a Times New
Roman type serif font. Any
> clues? The test site is here:
http://trekkin.com/test
>
> Here is the SpryMenuBarHorizontal.css CSS file for your
viewing pleasure.
>
> /* Menu items are a light gray block with padding and no
text decoration */
> ul.MenuBarHorizontal a
> {
> display: block;
> cursor: pointer;
> background-color: #a05030;
> padding: 0.5em 0.75em;
> color: #FFFFFF;
> font: Verdana, Arial, Helvetica, sans-serif;
> text-decoration: none;
> text-align: left;
> }
>
Change the one above for this......
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #a05030;
padding: 0.5em 0.75em;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
HTH
chin chin
Sinclair

Similar Messages

Using Web font in Spry Menu?

I can get the web fonts I want to use to "work" anywhere on a page except for in a spry menu.
I'd like to utilize one for a menu. How do I accomplish this seemingly herculean task?
Thank you.

Kindly put your page and dependent files online and post a link here

Spry Tooltip is missing on Spry menu in CS3?

I cannot find the Spry Tooltip on my Spry Menu in DW CS3? I have run the Site/Spry Updater but Tooltip is not listed?
How do I add/update my DW Spry menu to include all available Spry Widgets, tools, etc?
Thanks,
jlig

Arnout, Thanks for the reply..
However, I have read thru that document and still not sure how to:
- Apply the Spry Tooltip widget to a small Image on my page
I have already copied the two SpryTooltip.css & SpryTooltip.js files into my Spry folder & uploaded to the site
Just not sure how to apply them to the Image?

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!
>

Question about Spry menu for CS3

When I created a menu using Spry it inserted this code in my
template
<script type="text/javascript">

</script>
does the path ../SpryAssets/SpryMenuBarRightHover.gif
reference where the gif file is located in relationship to the
SpryMenuBar.js or is it suppose to be in relationship to the web
page?
I assume this is a value passed into the constructor of the
Javascript file.

This is a little ambitious, but it is doable with CSS floats. You'll need 2 menus. One floated left, one floated right and your logo image in the middle.
Floats & Margins tutorial:
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
More on floats:
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Spry Menu bar wrongly displayed in IE

Hi,
on my website i integrated a Spry Menu bar with one Submenu, which really works fine in Firefox. The boxes have a defined width of 124 px.
My problem is, if you view this site with IE, the drop down menus don´t work and you are asked to activate activeX or scripts. If you do so the whole menu is displayed white unless you roll over the buttons, you can see what actually should be there. Another bug is that the submenus, are oriented horizontally instead of vertically.
Can anyone help me with this nice IE problem?
Thanks a lot !
Here my CSS-Code:                      and my website:http://www.grassnet.info/transfer.html
@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: auto;
    font-weight: normal;
/* 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: 90%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 125px;
    float: left;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    background-color: #078601;
    border: thin solid #333;
    color: #FFF;
/* 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;
    position: absolute;
    left: -1000em;
    font-weight: normal;
    visibility: visible;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #FFF;
/* 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: 124px;
    text-align: left;
    font-weight: normal;
    background-color: #80c35d;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dashed;
    border-right-style: solid;
    border-bottom-style: dashed;
    border-left-style: solid;
    border-top-color: #078601;
    border-right-color: #078601;
    border-bottom-color: #078601;
    border-left-color: #078601;
    font-family: Calibri, Arial, Helvetica, sans-serif,;
    list-style-type: none;
    list-style-position: inside;
/* 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;
    text-decoration: none;
    text-transform: none;
    color: #FFF;
/* 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: #A5FC76;
    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: #A5FC76;
    color: #000;
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;

Hi Ben,
thanks a lot for your great help. I integrated your recommendations in my sprymenubarhorizontal.css file and uploaded it.
When i preview the site in the browser (Dreamweaver -> Preview in Iexplorer) it all looks like it should.
However when i uploaded the new css file, the change is not visible. It´s still the old mistake.
What am i doing wrong? What i also wonder about is, that the css file has a size of 6.554 Bytes. When i upload it, it only has 6.353 bytes.
Can this be correct? Also the SpryMenuBar.js files are different in size.
Do you have any idae what the problem here is?
Thanks again !
Add: I just recognized that also my html. files are different in size. So i guess this is normal. But where is the mistake hiding? I´courious
Or could you pleas check again from your pc in iexplore? Thanks

Spry Menu going wrong in Internet Explorer

Hi all,
I'm new to these forums, and new to web design. I added a horizontal spry menu in for my dads art website, it worked fine in Firefox 3.6 and Google Chrome, but Internet Explorer 7 or 8, I'm not sure which version, a recent one anyway. The menu goes completely wrong, they stay the color they are supposed to be, but the buttons all shift around and I'm not too sure what to do about this.
www.studiovalentine.co.uk
If people could take a look and leave me some suggestions, that would be great cheers.

Add the following style rules, making sure that they are loaded after SpryMenuBarHorizontal.css as shown
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
ul.MenuBarHorizontal li
    width: 16.6%;
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    f\loat: left;
</style>
I hope this helps.
Ben
Sorry did not realise that it had already been answered
Message was edited by: Ben Pleysier

CS3 - Spry Menu - Spans, CSS Differences in Browsers

Hello,
I'd greatly appreciate any help at all on these three issues from our website: www.r3mg.com
-When I make this spry menu, I want the 4 different categories to be different colors. Thus, I’ve included a “span” inside the li and then another span inside the ul, which I know isn’t “proper” css. But I’m not sure how else to do it. Is there a correct way to do this?
-When in Internet Explorer (8, in this case), the photography mouse-over has weird borders and a scroll thingy on it. But none of the others do. The rest of the menu is correct except for that one. You can see what I mean here… (iE8 - mess up view – FF - should look like)
-In IE7, it takes the "about us" link and puts is on a line below "photography" and I'm not sure how to fix that for only IE7
Thank you!!

Hi Beth, thank you for your help! I'm just going to cut and paste your reply to show what I've done...
Rather than using spans inside the li, style it in CSS by applying IDs to the sections you want to affect:
<li id="home">Home</li>
<li id="contactus">Contact Us</li>
(I've left out the actual links, for clarity).
I did this, except used:
Branding
and so on for my other two headings: web & paper
Then, in the CSS stylesheet, do this:
ul.MenuBarHorizontal li#home {background-color: red; color: white;}     /*use your own color choices, of course!*/
ul.MenuBarHorizontal li#contactus {background-color: orange; color: black;}     /*ditto!*/
for the dropdowns, you can further style this way:
ul.MenuBarHorizontal li#home li {background-color: pink; color: black;}
ul.MenuBarHorizontal li#contactus li {background-color: gold; color: black;}
Obviously, use your own color combos!
Here is where the issues lies, I think. When I did this exactly, but with my colors and # headings, it did nothing. I think this is because each of these words in the menu are all links. So the question is, do I have to change the ** ul.MenuBarHorizontal a ** CSS? If so, I tried to do this using your example and it still didn't work. I added new CSS codes of:
ul.MenuBarHorizontal li#Branding a ul.MenuBarHorizontal li#Branding li a
Then, I put these in the appropriate places in the SpryMenu on the html page. All it did was make everything one color for the links. So I must have done it wrong.   I have put the spans back in. The only thing I've changed on the CSS now is to take the font color out of the original ** ul.MenuBarHorizontal a   ** and that now leaves it to the ugly default purple Dreamweaver uses on links. This shows me that it's probably something to do with the "a" code in the CSS.
Actually, your menus have some difficulties in both Firefox and IE8, but I see by your illustrations that it is really just that About Us is dropping to the next line. If you reduce slightly the width of each menu item, you will see this problem go away.
In IE8, you are getting a scrollbar because the browser senses that you do not have enough height to your containing div, so the browser is very kindly adding the scrollbar. Even though it looks as if there should be enough height...! You can try doing border: 0px; for the submenus. If you want the border on the submenus, add height to the containing div to allow for the borders.
.ulMenuBarHorizontal ul li {border: 0px;}
I've tried doing this also and it still doesn't seem to be helping. I've changed the height on the #header & #header-toolbar but it still left the scroll thing. What I don't understand is why it does it only on the photography drop-down but not on the other ones.
I hope this makes sense. My head is spinning from trying to figure it out. And again, thank you!

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

Spry Menu Bar renders wrong in IE

My horizontal spry menu bar looks great in all browsers but IE. Even though I have fixed widths on the submenus, it creates a huge container box that takes up the width of the screen in IE. PLEASE -- I'm desperate!!
www.ohemaalxi.com
Here is the spry css.
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;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          padding-left: 55px;
          padding-top: 50px;
          width: 850px;
/* 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: 1030;
/* 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: 75%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 160px;
          float: left;
          color: #333;
/* 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: 120%;
          z-index: 1020;
          cursor: default;
          width: 160px;
          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%;
ul.MenuBarHorizontal ul ul li {
          font-size: 85%;
/* 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;
          background-color: #FFF;
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #fff;
          padding: 0.5em 0.75em;
          color: #333;
          text-decoration: none;
          font-size: 100%;
/* 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: #fff;
          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: #DADADA;
          color: #FFF;
          width: 140px;
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-repeat: no-repeat;
          background-position: 95% 50%;
          text-align: left;
/* 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;

Although, I did download IE-Tester which allows you to test in different IE versions and it does not seen to work there?
IE-tester shows that you have got a problem 0n line #102. Unfortunately, the tester cannot be relied upon reflecting the correct line number. There is a problem on line #27 where there is no space in front of "type="
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
and line #86 where there is no space before "rel="
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
Now for my next problem, and if I can get this working I should be in fairly good shape. I had made some formatting changes (centered the menu bar, and made some color changes) See below, however those are now not working..Normally, when a question has been answered, it is marked as correct and any new questions are asked in a new post.
However, you caught me in a good mood, just signed contracts for three new projects one as far away as Switserland.
Lines #27 and #28 look like
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
Lines #84 and #86 look like
<script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet" type="text/css" />
This may not confuse the browser, but it is not very conducive. Remove either set of links.
When I look at SpryMenuBarVertical.css
change the value of line 16 to auto, has not been done
starting at line 81, change the highlighted values, has not been done
So it is no wonder there are no changes.
Gramps

Spry Menu and IE Issue (Hover Font Size)

I'm not able to figure out why the hover focus setting works fine with Firefox or Chrome, but I can't find a setting in the CSS to ensure the value for the font on a hover within IE remains fixed. on a hover, the font size increases slighly in IE and pushes menu out of alignment very slightly. I was able to keep the hover size fixed in Firefox and Chrome via the CSS values for the spry, but not sure why IE is doing this and if there is a setting specific to IE that would allow me to keep the hover font size fixed, but not change the values in Firefox/Chrome. Is there any way to lock in the hover value using CSS for the font so in IE it remains constant?
http://oregonstate.edu/~labellec/CDfiles/index.html
Page is under development, but if you open it up in IE, the menu hover causes too much movement. I'm new to CS4, so, any help appreciated.
Thanks,
Chris

Perhaps you could adapt the techniques used here for your
Spry menu:
http://www.projectseven.com/products/menusystems/pmm2/see-through.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"Webkil" <[email protected]> wrote in
message
news:gnmh2l$dvo$[email protected]..
>I have tried this. I want a transparent background no
colour. As soon as I
>add transparent IE comes up with the word false in the
sub menus.

Submenu Font Size in Spry Menu

I've created a drop down menu using the Horizontal Spry Menu Bar widget and have it looking exactly the way i need it to, except for one thing. I have rthe font size set for 14px, both in the ul.MenuBarHorizontal properties and the ul.MenuBarHorizontal a properties, but I want the font-size in the submenus to be smaller than in the top menu. How can i do that?!
(I've been fooling and fooling with it, and I've googled it and sarched the adobe forums but can't find any posts addressing this issue, other than here: http://foundationphp.com/tutorials/sprymenu/customize2.php - where David Powers says to be careful about changing font size and does not discuss this particular problem ! )
Attached is my stylesheet.
Thank you in advance

This is one way of doing it
<li><a href="#" style="font-size: 9px;">Item 1.1</a></li>
You could also give the tag a class name and include the rule in your style sheet
<li><a href="#" class="myFont">Item 1.1</a></li>

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>

CS3 Spry Menu Bar

I have added a second horizontal spry menu bar to my index
page but i did not get a second set of styles entitled
SpryMenuBarHorizontal.css in the CSS Styles panel. Therefore, when
I went to edit the buttons, it changed the styling of the first
horizontal spry menu bar -- not good. So, how do I add a second
horizontal Spry Menu Bar?
Thanks in advance--

There is no point-and-click way to do this. You would need to
copy the CSS file to make a new one and then link that new CSS file
in the document so that the second menu is styled
differently.

Problem with spry menu bar

i'm using dreamweaver CS3 to create a website using php
scripting. for some reason, my spry menu bar has become messed up.
it is now in bulleted form and the font and font color are all
wrong. i checked but the styles are turned on.. so how can i solve
this?

Find that some reason that the spry menu bar became messed up
and revert to how it was before that some reason occurred.
Hope that helps!

Wrong Font in Spry Menu DW CS3

Similar Messages

Maybe you are looking for