Drop Menu Bar Fine Tuning

http://www.sdaa.sk.ca/draftsite/index.html
Cannot seem to change the size of the tabs, widen according
to the content for each box. I would like the menu bar in the above
noted site to function as does the one on this Adobe page.... that
is with the sub menu falling directly under the main horizontal
tab, with a roll over effect, with the boxes widened, and with a
consistent font. I have the font set up in both CSS, template page
properties, and also within the submenu Spry rules, but likely not
the right one..... is there a way to easily understand what rule
applies to what feature, and have the menu bar respond
consistently. Code Attached. Thank you.

The page you directed me to does not help. I have been to
this page before and always get stuck at this point of the
instructions sheet (Copied below.... marked ****
*****Locate the SpryMenuBar.js file and add it to your web
site. You can find the SpryMenuBar.js file in the widgets/menubar
directory, located in the Spry directory that you downloaded from
Adobe Labs.
For example, create a folder called SpryAssets in the root
folder of your web site, and move the SpryMenuBar.js file to it.
The SpryMenuBar.js file contains all of the information necessary
for making the Menu Bar widget interactive.
Locate the SpryMenuBarHorizontal.css or
SpryMenuBarVertical.css file (depending on which kind of menu bar
you want to create), and add it to your web site. You might choose
to add it to the main directory, a SpryAssets directory, or to a
CSS directory if you have one.
Open the web page to add the Menu Bar widget to and link the
SpryMenuBar.js file to the page by inserting the following script
tag in the page's head tag:
end******
Because I am using the Spry Asset panel to insert the
horizontal menu bar, the css styles (right panel) shows all the
SpryMenuBar.css assets. I do not therefore need to 'locate' the
SpryMenuBarHorizontal.css and 'load it into my site'. I have yet to
locate any initial .js file, although this file did appear all by
itself after a certain point of working on the site mentioned
above. I do not want to practice on this site, so have started a
new site and have inserted the horizontal menu bar. Is there code
that I can copy and paste (over) the SpryMenuBarHorizontal.css

Similar Messages

Double horizontal spry drop down menu bar problems

Hello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                    css spry drop down menu 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;
                   css spry drop down menu 2
/* 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.adminbarh li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.com

Hello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                    css spry drop down menu 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;
                   css spry drop down menu 2
/* 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.adminbarh li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.com

Can anyone tell me how to increase the text size in my menu bar and drop down menus?

Just bought a new 27" screen iMac. The menu bar and drop down menu text is much to small for me to see without leaning close to the screen. Does anyone know how to customize the text to a larger size. This is an issue for any program I open.

Once upon a time Apple displays packed in 72 dots to an inch (making their resolution 72 DPI). That meant that what we saw on screen at 100% scale was exactly what was printed on a printer - not to mention quite comfortable to read. However that advantage was eclipsed by the fact that photopgraphs and video were pixelated and the only solution to that was to increase the resolution - to pack in more dots per inch - which has the side effect of shrinking the size of text. Where I once used Word at 100% scale I now find it most comfortable at 150% scale.
There are several solutions. One, as Lex gave you, was to reduce the resolution of the LCD display. But unlike CRT displays, an LCD is tuned to a specific resolution and when you change it the results tend to be blurry. Another is to keep the resolution as it is and to adjust each program (if the program allows it). This makes Word usable and your browser can be set to use no font smaller than a size you set (which has some unpleasant side affects at some Web sites), but some programs and some parts of programs cannot be changed. The menubar and menus are among them. The third solution is one that Apple promised several years ago but has not yet provided - a resolution independant GUI. We can only hope that comes soon. And there's another partial solution - look in System Preferences under Accessibility.

Hello. I've Apple TV 3rd gen and MacBook Pro 2013 all with latest updates. AirPlay works fine till I don't start streaming videos from YouTube. After that AirPlay icon from MacBook menu bar simply disappears. Could some help. I'm using 2 Mbps Internet

Hello. I've Apple TV 3rd gen and MacBook Pro 2013 all with latest updates. AirPlay works fine till I don't start streaming videos from YouTube. After that AirPlay icon from MacBook menu bar simply disappears. Could some help. I'm using 2 Mbps internet connection.

Same issue here- I can airplay my amazon prime library just fine from my iphone 5 but on my macbook- (mavericks, 15 inch 2013 retina with quad core i7, nvidia 650 M and SSD) it just sputters and lags.
I have noticed web video is considerably worse than local content, giving me pauses of up to 2 or 3 seconds in which video stops but audio continues in the amazon player. Youku video, however, seems relatively stable. Our subscription speed is 25 mbps, so that should be plenty to stream SD video from Amazon and doesn't account for why it would be nice and stable from the iphone, but not the mbp.
Playing light, locally hosted steam sidescrollers like Limbo is better but gives periodic drops in framerate on the Tv. when mirroring the framerate remains steady on the MBP screen.
Games airplayed from my iphone seem relatively stable, though with a noticably lower framerate on the TV than on the phone.
It seems these issues have abated considerably since yesterday's Apple TV update, but are still curious nonetheless and I'm not sure that the update yesterday was specifically meant to address those issues or if I'm just getting a time with less network interference now.
Comcast recently installed a new router/modem/phone combo, replacing our old separate modem and router setup. I'm going to test if putting the network on a different channel helps.

How do I insert a drop down menu bar?

Hi, I'm designing my 1st website and I started it in photoshop cs5.5. I imported my site into Dreamweaver cs5.5 and uploaded it to my server. The problem I'm having is that when I try to insert a drop down menu bar, I get gaps within my page. How do I fix this? *Help Please* The URL for my site is: http://www.coriemoment.com
and this is my coding:
<html xmlns="http://www.coriemoment.com"
<head>
<title>The Official Corie Moment Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
    <div id="=container"
<body bgcolor="#FFFFFF" leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto" margin:0;>

<table id="Table_01" width="1281" height="768" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td colspan="6">
                              <img src="images/index_01.png" width="1280" height="220" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="220" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="4">
                              <img src="images/index_02.png" alt="" width="414" height="548"></td>
                    <td rowspan="3">
                              <object width="564" height="423"><param name="movie" value="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3" type="application/x-shockwave-flash" width="564" height="423" allowscriptaccess="always" allowfullscreen="true"></embed></object></td>
                    <td colspan="3">
                              <img src="images/index_04.png" width="255" height="89" alt=""></td>
                    <td rowspan="4">
                              <img src="images/index_05.png" width="46" height="548" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="89" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/video_03-07.png" width="1" height="336" alt=""></td>
                    <td rowspan="3">
                              <img src="images/index_07.png" width="34" height="459" alt=""></td>
                    <td>
                              <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
/*put your twitter id that people use to reply to you below. Mine is mhorning. If you only want to see the Tweets that you have Tweeted, then delete the part below that says- OR to:coriemoment */
search: 'from:coriemoment OR to:coriemoment',
   /*this is the duration in terms of seconds*/
interval: 30000,
   /*this is the title you want on your tweets*/
title: 'Corie Tweets',
subject: 'Send us your comments',
   /*setting width to 'auto' will adjust the width of your tweetbox to whatever is set on your div. You can change this to something like 500px if you want*/
width: 'auto',
height: 212,
theme: {
    shell: {
             /*this will change the background color of your tweetbox. It is currently yellow*/
            background: 'body p, body img, body embed, body object, body video{opacity:1 !important}',
      /*this will change the color of the text in your background*/
            color: 'fac935'
    tweets: {
             /*this will change the background color behind your tweets. It is currently white*/
            background: 'body p, body img, body embed, body object, body video{opacity:0.2 !important}',
       /*this will change the color of the text in your tweets. It is currently black*/
            color: '#000000',
       /*this will change the color of anything that is hyperlinked in your tweet. It is currently blue*/
            links: '#1985b5'
features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
}).render().start();
</script></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="302" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/index_09.png" width="220" height="157" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="34" alt=""></td>
          </tr>
          <tr>
                    <td colspan="2">
                              <img src="images/index_10.png" width="566" height="123" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="123" alt=""></td>
          </tr>
</table>

</body>
</html>

Please see here http://forums.adobe.com/thread/1166609.
Really annoying when there are multiple posts for one query

Using a different background for the drop down options in a spry menu bar

Hi all,
I am trying to set just a background color in the drop down menu, I have a background image repeated along the x asis at the top but this has come down into the sub menu bar how can I change just the lower drop down menu to just a solid color??
I have tryed google and youtube to try to find a answer but have had no luck in finding the solution to this problem.

Give a man a fish, you feed him for a day. Teach a man to fish, he eats every day…
winabe23, you joined this month—probably because you were having trouble with CSS and HTML and you have certainly come to the right place.
I'm going to send you to several places I have found helpful in understanding how you can make drop-down menus in CSS without the need for JavaScript—though JS may be necessary for certain older browsers that do not understand pseudo classes and may be necessary for the blind or keyboard navigation.
CSS Wizardry has a great tutorial here.
Line25 has one here.
For those who don't want to have to wrangle code, here is a menu generator from PureCSSMenu.
Here's a page by Eric Meyer who describes how the concept works.
And here is a video tutorial by "zorro30mum." It's in two parts, but there is a link to Part 2 below Part 1.
The reason why I am posting all of these links in my answer is because you're using Spry. And Spry has been found wanting by Adobe and they are deprecating and abandoning it.
The Spry framework is an open source Ajax framework that Adobe developed. Ajax stands for Asynchronous JavaScript And XML. On August 29th 2012, Adobe handed over Spry to github. If you want to help github develop Spry, there is a site for that, but I'm thinking you're not a JavaScript developer.
I would recommend you pay a little more attention and time to Ajax, which is not deprecated and not discontinued. It allows you to do client-side triggers for server-side code. But that's if you want to do work in JavaScript, XML and a server-side language, like Cold Fusion, php or ASP.
But in the meantime, the tutorials above will get you into understanding how this whole menuing stuff is done in CSS and give you the understanding necessary to do simple stuff, like changing the color of a background for a drop-down.
I hope this helps you make great websites!
-Mark

I lost the bookmarks drop-down on the menu bar

== Issue
==
I have a problem with my bookmarks, cookies, history or settings
== Description
==
I have Firefox 3.5.10. Somehow, I managed to click on "hide this folder?" while I was trying to organize my bookmarks, and now I can't get the folder back onto the menu bar. I am able to access them via the sidebar, but I prefer the drop-down menu.
I have already tried View>Toolbars>Customize. There is no icon for "bookmarks" for me to add; there doesn't appear to be any way to add/delete menu bar items. Besides, I really don't want to restore the default after having customized it.
Any clue????
== Troubleshooting information
==
Scrapbook, Colorful Tabs, Adblock Plus, Roboform, Better GCal, Delicious, Diigo, Google, Personas, Scrapbook, Tree-style Tab, Zotero, Wired Marker
== Firefox version
==
3.5.3
== Operating system
==
Windows Vista
== User Agent
==
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 GTB6 (.NET CLR 3.5.30729) FBSMTWB
== Plugins installed
==
*-Default Plug-in
*The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
*Adobe Shockwave for Director Netscape plug-in, version 11.0
*1.7.0069.2
*Adobe PDF Plug-In For Firefox and Netscape
*np-mswmp
*Provides additional functionality on Facebook. See our web site for details.
*Shockwave Flash 10.0 r32
*iTunes Detector Plug-in
*DivX Web Player version 2.0.2.39
*GEPlugin
*Picasa plugin
*4.0.50524.0
*Office Live Update v1.3
*Google Updater pluginhttp://pack.google.com/
*Google Update
*Next Generation Java Plug-in 1.6.0_18 for Mozilla browsers

Please help with this. I see that https://support.mozilla.com/en-US/questions/827504 is exactly the same issue. I have also seen the issue reported when I did a Google search on display problems. it's obvioulsy not a one-off so I hope someone can assist.
Johhno again

To extend a clip I have `Show Fine Tuning controls' turned on in my iMovie 11 preferences, but the blue forward/backward buttons don't appear. To get the orange handle bar, is there a hotkey?

To extend a clip I have `Show Fine Tuning controls' turned on in my iMovie 11 preferences, but the blue forward/backward buttons don't appear. To get the orange handle bar, is there a hotkey?

That's a comment in the file. It has no effect at all.

Font in Menu Bar and Drop Down list way too small

I just tried PSE 10 and was very surprised to see that Adobe did not address the problem with the font size being way too small in the menu bar and drop down list. I cannot possibly read the font - so the program is basically unusable. I am using a new 17inch laptop. Is it possible that after all the complaints Adobe didn't fix this problem in PSE 10? Are they even working on it? I love the program but unfortunately I am going to have to switch to something else because there is no way I can read the font and thus cannot use the program at all. Very, very disappointing. Hopefully they are working on a fix???

Photoshop CS5 Essential has preferences that offer users the opportunity to adjust menu bar background color as well as font size. For example,
"UI Font Size
If you find that Photoshop's interface text is a little too small for comfort, you can increase its size by changing the UI Font Size option to either Medium or Large. And no, this option isn't just for old folks with poor eye sight. Working on a very high resolution monitor can make Photoshop's interface text appear very small. Personally, I like to set my font size to Large which I find helps to avoid eye strain. You'll need to close and then re-open Photoshop for the change to take effect:
Change the font size to increase some of the text in Photoshop's interface.
(From an article by Steve Patterson at http://www.photoshopessentials.com/basics/cs5/preferences/ .
Why not Photoshop Elements? ?
Lensw

Ichat drop down menu from menu bar shows up in the wrong place.

I'm not sure how this happened, but for some reason, ever since I've moved to college, my Ichat drop down menu from the menu bar shows up on the left side of my screen, and you can only see half of the menu. I don't know how to fix this problem so if anyone could help me out that would be great.
Sincerely,
Cody Martin

Yep.
Go to the Buddy List Status Message and option the Edit option.
Delete that Status Message that you have that is over 42 characters.
Ones of about 60 or more will introduce the "Left Shift" (And the fact the drop Down may line up with the right hand edge of the Menu Bar icon on in-between lengths)
In Snow Leopard it is possible to have a Long Message that displaces the Drop Down Off Screen.
The other factor is the order of the Menu Bar Icons on that side of the Screen
The iChat one can be Dragged if you use the Apple (CMD) key.
If the Drop Down can not fit the message in before the right hand edge of the Screen it will displace.
Having a Second mac User Account and deciding to Display which mac User is Logged in can give you some extra "space"
3:24 PM Sunday; October 11, 2009

Horizontal Menu Bar Drop Downs Not Displaying

I've had this problem before and here I am grappling with it again. I have a Spry horizontal menu bar with a few drop down menus on it. The drop downs are not displaying above the other layers on the page. http://bakerlake50k.com/draft/index.php
Need help.
Jeannette

I get dizzy when I look at your markup. Have a look at the following
<body class="BakerLake_body_design">
<div class="BakerLake">

<div class='cssLO BakerLake_wrapper_layout'>
    <div class='wrapper cssLI BakerLake_wrapper_design'>
      <div class='cssLO BakerLake_row_1_layout'>
        <div class='row_1 cssLI BakerLake_row_1_design'>
          <div class='cssLO BakerLake_row_1_xtdalignwrapper_layout'>
            <div class='row_1_xtdalignwrapper cssLI BakerLake_row_1_xtdalignwrapper_design'>
              <div class='cssLO BakerLake_row_2_layout'>
                <div class='row_2 cssLI BakerLake_row_2_design'>
                  
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <ul id='MenuBar'>
and compare that to
<body>
<div id="header">
</div>
<div id="nav">
</div>
The document looks like
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
</div>
<div id="nav">
    The Spry Menubar goes here
</div>
<div id="content">
    <div class="article">
</div>
</div>
</body>
</html>
and the stylesheet
/* CSS Document */
html {
    background: #ccc;
    height: 100%;
body {
    background: #333;
    width: 1000px;
    margin: auto;
    height: 100%;
#header {
    background: url(http://bakerlake50k.com/images/bk-header2.gif) no-repeat 30px;
    height: 233px;
#nav {
    height: 28px;
    background: #000;
    color: #FFCC00;
    width: 900px;
    margin: -30px auto 0 auto;
#content {
    background: #000;
    padding: 30px;
    margin-top: 15px;
    height: 100%;
#content .article{
    width: 750px;
    float: left;
    background: #FFF;
    height: 100%;
If you follow the proposed structure, your SpryMenuBar worries will be a thing of the past
Gramps

Spry menu bar -- only one of the submenus of a drop down set works.

I created a spry drop-down menu bar for navigation within my site for a special event (on October 19). Most items have only one filie (e.g., tickets) but some of the items (e.g., Historic Homes) have up to 8 sub-items.
I renamed the spry file. I defined all my menu and sub menu items using the dialog box. I styled the bar for both basic state and "hover."
So far, so good.
I then created multiple new pages by using "Save As" (the original menu bar file)-- substituting appropriate text to to make the additional item and sub item files.
But when I link it all up and test it, only ONE of the submenus work. The menu disappears from the other sub menu pages when I navigate to them. Users can't get back to the original menu choices..
This is the first time with a Spry Menu bar.
Can you help?
Susan

Without seeing your code, I'm guessing your lists and sub-lists are not properly coded. Check your HTML & CSS with the validation tools below:
Code validation tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

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.

Rolling the mouse over the menu bar does not activate menu bar drop downs

Anyone one familiar with menu bars and drop downs not activating when the mouse is rolled over them? This happens consistently afterrunning Photoshop it seems. The menus only work if they are clicked. Webpage links do not display the hand and also have to be clicked. Additionally, Photoshop selections (marching ants) do not activate.

The standard behavior of Macintosh Menus is to do nothing when the mouse is rolled over them. They drop down once you click somewhere, then roll over a similar item, such as click and release on the apple menu, then rollover the File Menu or the Edit menu.

Menue bar does not drop sometimes when in Safari Mountain Lion

When in Safari on Mountain I have had a few occassions where the menue bar will not drop down to close Safari

I have this problem too!

Drop Menu Bar Fine Tuning

Similar Messages

Maybe you are looking for