Spry bar defaulting to second line in FF
My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?
eberhoo wrote:
My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?
The original Spry files do work in all modern browsers. Which means that you have changed something, probably within the CSS-file, that has upset the delicate balance.
Compare the original CSS with the one that you have modified and you may be able to figure out where the problem lies. The 10 commandments may help you out and can be found here http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
I hope this helps.
Ben
Similar Messages
-
Spry Menu Bar wraps to second line on a few monitors
Hello-
I am stuck on a spry horizontal menu bar and have discussed with a few local dreamweaver users and we can't figure this out. I'm using CS4 to create an internal site for my company (sorry, I can't send you link). I tested the site on firefox and explorer on my computer and everything works beautifully. When going through the soft launch one computer out of the six computers who reviewed the site had an issue with my navigation bar. I used the horizontal spry menu bar to create a navigation with six options. The problem computer wrapped the last two to a second line which makes everything weird on pages within the site.
Screen captures are below. Three images show the main page where the navigation wraps on top of the side column and right column. The second image shows the menu bar wrapping behind the left column on additional site pages which is happening on all additional site pages.
The code for the spry menu assets should be below the images. If you need additional information, if I didn't provide everything, I'll send it. I'm very new to this and pretty much self-taught. I have taken an online class through ed2go.com, I've asked a ton of questions from other designers using Dreamweaver, and I've watched MANY tutorials online. ANY help you can give would be MUCH appreciated. THANK YOU!!
MAIN PAGE/HOME PAGE
ADDITIONAL SITE PAGES
@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;
background-color: #D6D6D6;
background-image: url(/Images/Autry_Background.jpg);
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* 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: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
vertical-align: middle;
background-color: #005BAE;
/* 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: #CCC;
color: #000;
text-decoration: blink;
/* 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: #CCC;
color: #333;
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, Mel,
I see that you are using default widths for the list items in the menus. If you reduce the width of the list items, you should be able to settle on a width that works better than 8em and 8.2em.
Here are the bits that will need editing:
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em; /* make this width smaller */
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em; /* make this width smaller */
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* 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: 8.2em; /* make this width smaller */
Z -
What comes up on her side on the second bar is most visited, getting started, latest headlines.
Thanks. Did it in 3 seconds, after many fruitless hours of novice flailing.
Thanks, JB -
How can I fix a nav bar that wraps to a second line?
I have a single line of text on the navigation bar while I'm working in iweb but when published it wraps to a second line. I tried extending the page width which seemed to help on my home page but the other pages still have 2 lines.
some theme has large fo font size and/or wide padding for navbar items.
iweb navbar is rendered by javascript widget, so you can use javascript to change them:
http://iweb3widgets.cyclosaurus.com/iWebNavBar/Small_Font.html
http://iweb3widgets.cyclosaurus.com/iWebNavBar/Close_Padding.html
code is linked to examples. -
How to increase the width of the second line -status bar -tab --Urgent
Hi all,
We are not able to get the full information which suppose to display in second line in the status bar -tab for e.g --> we are getting only Enter Qu... for the message Enter Query.
We need to display full information. Could anyone help us ?ok, I tested it for you.
IE versus Firefox versus Jini versus sunplugin.
In each version you have too few space for Enter-Query... You have to live with that problem -
Anyway to "UN" Ken Burns stills globally or as default bringing in jpeg's? New to iMovie. I have 3 titles that build. First is logo, add prod't name second line, add date 3rd line. They shift when dissolving between them. Title function NG for this.
The people at the Apple store gave me a long, tedious workaround which is open Pages and bring in logo. Export it as a PDF. Open the PDF in Review and then "Save As" a jpg to the desktop and drag and drop into the imovie. Even with this process, the text will sometimes shift. When it works, it looks good, the logo comes up, then the second line fades in under it as part of the build and then the third line completes the graphic. It would something this easy and straight forward would be easy.
HarveyVI did the work around for the titles/jpg's in this short video.
I'll try your fix on the next one. I have 22 short 3-5 minute videos to produce
and I'm on number 5. This should save me a bunch of time.
It would appear that you know more than the guy at the Apple Store.
Thank goodness for on-line forums.
I already tried fixing them individually as you suggested,
by going the crop/fit route. However, even then,
the second in the series had always shifted.
The first and the third images lined up, but not number 2..
So I brought in all the images, (1, 2 and 3).
and then the 2nd image again and put it in the third position
in the sequence on the time line. I deleted the "original" 2nd image.
So I had 1, 3, then 2. Then I dragged and dropped the correct number two
into position two and it worked. So what happens is that the
client logo appears, then that stays put and the next line dissolves in
and then the third dissolves in. They are three separate titles, but they
are aligned perfectly so that they build as I dissolve between them.
I think the problem with the edit copy route would be that while
I could edit/copy the logo, I couldn't position text through the
iMovie text function exactly as it only gives you middle or bottom third etc.
Each title with the product name is positioned individually depending on
length and number of lines. By going through Pages, I can position the logo
and the text exactly. Also, some logos are horizontal, while others
are square etc., so text positioning is crucial.Anyhow,
I'll try the global approach for the next one and see how that works.
Thanks very much for your insight and especially for your prompt reply.
I trust you're inside on this gorgeous July 4th because you're
making money on your computer. ;-)HarveyVOn 7/4/2011 3:57 PM, Apple Support Communities Updates wrote:
> Apple Support Communities <https://discussions.apple.com/index.jspa>>>> Re: Anyway to "UN" Ken Burns stills globally or as default> bringing in jpeg's? New to iMovie. I have 3 titles that build.> First is logo, add prod't name second line, add date 3rd line.> They shift when dissolving between them. Title function NG for...>> created by AppleMan1958 > <https://discussions.apple.com/people/AppleMan1958> in /iMovie/ - View > the full discussion > <https://discussions.apple.com/message/15552380#15552380>> ------------------------------------------------------------------------>> I am baffled by what you are asking...but if you are asking how to > turn off the Ken Burns effect, you can do it for future photos you add > by going to File/Project Preferences and setting the default initial > photo placement to FIT or CROP rather than Ken Burns.>> For a global change on photos that are already in your project, pick a > photo. Open the Rotate, Crop, Ken Burns Tool. Select FIT or CROP. > Exit the tool. Now select this same photo and EDIT/COPY.>> Now, EDIT/SELECT ALL.>> Finally, EDIT/PASTE ADJUSTMENTS.../CROP ADJUSTMENTS. -
Spry bar sub menus not working. Am at wit's end.
Hi all,
I am having trouble with getting my submenus on my spry bar to function. At first I was getting the error message of spry undefined. I looked for answers in forums, and tried a few things like making sure the .js file was there, looking for code mistakes, etc. Nothing worked, so I then deleted and reinstalled the spry bar and spry assets files, and of course, uploaded them to the server. Now I don't get any error messages, but the submenus just don't drop down.
Here is my code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Natural Handmade Soaps</title>
<link href="../../styles/HealingHandsStyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="container">
<div id="banner">
<img src="../../images/BitsAndPieces/HealingHandsNewBanner.jpg" width="960" height="99" />
</div>
<div id="healingmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="../../index.html">home</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="../hair_serum.html">hair</a></li>
<li><a class="MenuBarItemSubmenu" href="../face_products.html">face</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="/soaps.html">complexion perfection face soap</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="../complexion_perfection_pages/complexion_perfection.html">complexion perfection face serum</a></li>
<li><a href="../silk.html">SILK face serum</a></li>
</ul>
</li>
<li><a href="../body_products.html">body</a></li>
<li><a href="../Essential_Oil_Blends/essential_oil_blends.html">eo blends</a></li>
<li><a href="../../Pages/ayreveda/ayurveda_page.html" class="MenuBarItemSubmenu">herbal info</a>
<ul>
<li><a href="../../Pages/ayreveda/ayurveda_page.html">what is ayurveda?</a></li>
<li><a href="../../Pages/bach_flower_essences/bach_page.html">what are bach flower essences?</a></li>
</ul>
</li>
<li><a href="mailto:[email protected]">contact</a></li>
<li><a href="/blog">blog</a></li>
</ul>
</div>
<div id="left_column">
<p align="left"><img src="images/cp_serum_soap_teapot.jpg" width="227" height="206" alt="Complexion Perfection Soap" /></p>
<p align="left"><span class="style47"><img src="images/cpsoap.JPG" alt="" width="227" height="206" /></span></p>
<p align="left"><span class="style47"><img src="../complexion_perfection_pages/images/three_bottles.jpg" alt="" width="240" height="200" /></span></p>
<p><span class="style1"><a href="../complexion_perfection_pages/complexion_perfection.html">Complexion Perfection Face Serum</a></span><span class="style2">, for use with Complexion Perfection soap.</span></p>
<p><br />
</p>
</div>
<div id="center_column">
<p align="center" class="style1">About the Soaps</p>
<p class="style2" >Healing Hands Apothecary soaps are handmade in small batches using rich, all-natural ingredients. The soaps are scented with pure, therapeutic essential oils obtained from plants, which also carry the beneficial properties of the plants. The soaps take 4-6 weeks to "cure" and are extremely mild and gentle for your skin. They will last
significantly longer than the popular bars you get from the store because
they are not fluffed up with air. Each 3.5" x 1" x 2.75" bar is approximately 5-5.5 oz of pure goodness!</p>
<p align="center" class="style1" >Complexion Perfection Face Bar</p>
<p class="style2">A rich face soap made with French
green clay to tighten pores and extract impurities from the skin. The Complexion Perfection
face bar is specifically made to complement the <a href="http://www.healinghandsapothecary.com/Product%20Pages/complexion_perfection_pages/complexi on_perfection.html">Complexion Perfection Face Serum for Problem Skin</a>. Complexion Perfection is suitable for deep cleansing of all skin types, though it is especially great for problem skin.</p>
<p class="style2"><strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, shea butter, lavender, bergamot, and eucalyptus essential oils, French green clay, green tea.</p>
<p align="center" class="style47">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="GHKAAN38MDEDU" />
</p>
<div align="center">
<table>
<tr>
<td><input type="hidden" name="on0" value="Quantity" />
Quantity</td>
</tr>
<tr>
<td><select name="os0">
<option value="One Bar">One Bar $6.50 USD</option>
<option value="Five Bars">Five Bars $30.00 USD</option>
<option value="Ten Bars">Ten Bars $55.00 USD</option>
</select></td>
</tr>
</table>
<input type="hidden" name="currency_code" value="USD" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
<p align="center" class="style51"><img src="images/GBB_closeup.jpg" alt="" width="300" height="200" /></p>
<p align="center" class="style1">Gardener's Blessing Bar</p>
<p align="left"><span class="style2">A special soap made for gardeners! People who like a moisturizing soap that cleans well after a hard day's work in the yard will love the Gardener's Blessing Bar. Dried orange peel and poppy seed offer exfoliation, and tea tree oil soothes cuts, bites, and scratches. Sweet orange and eucalyptus oils add a delightful scent to this ultra rich and creamy soap.</span></p>
<p align="left" class="style2"> <strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, cocoa butter, shea butter, beeswax, sweet orange oil, eucalyptus oil, tea tree oil, dried orange peel, poppy seed.</p>
<p align="center" class="style47">Gardener's
Blessing Bar<br />
One Bar: $6.50<br />
Out Of Stock</p>
<p> </p>
</div>
<div id="right_column">
<p align="center"><a href="/Product Pages/soaps/purify.html"><font size="+2" class="style1">PuriFire<br />
<span class="style53">The bar that kills MRSA, viruses, and bacteria!
Made with rhassoul clay and rooibos tea. Click here for more ingredients.</span></font></a></p>
<p align="center"><span class="style57"><img src="images/PuriFireBasket.JPG" alt="" width="300" height="200" /></span></p>
<p class="style2">PuriFire soap was developed for healthcare
workers who work all day in an environment
saturated with deadly bacteria and viruses. This
soap contains essential oils with antiviral and antibacterial properties, and will effectively cleanse your body of all unwanted microorganisms
while leaving the beneficial ones behind for defense.</a></p>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div align="center">
<input type="hidden" name="cmd2" value="_s-xclick" />
<input type="hidden" name="hosted_button_id2" value="SQY6LVCYW9LU2" />
<table>
<tr>
<td><input type="hidden" name="on" value="Quantity" />
Quantity</td>
</tr>
<tr>
<td><select name="os">
<option value="One Bar">One Bar $8.00 USD</option>
<option value="Five Bars">Five Bars $37.50 USD</option>
<option value="Ten Bars">Ten Bars $70.00 USD</option>
</select></td>
</tr>
</table>
<input type="hidden" name="currency_code2" value="USD" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit2" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
</form>
<p align="center"><img src="images/PuriFire stacked.JPG" alt="" width="309" height="219" /></p>
<p align="center"> </p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Any ideas? Is it something to do with where my Spry Asset folder is, like maybe I shouldn't have ../../../?????
Thank you.Hi,
Although you didn't get an answer here, I visited your web page and it looks like you found a way to solve the problem. I am having a similar problem and wonder if you (or somebody) can help me?
My problem is that while everything else works just fine, my sub-submenus do not. The first one drops down, but the second one does not (so it looks like I have one item when in fact I have two).
My css code is copied directly from Adobe's SpryMenuBarHorizontal.css. The only things I changed were some button widths, colors, and I tweaked the location the buttons appear in (but did not change original locations nor z-indexes, I don't think!). I am reprinting it below, just in case.
I am using the last version of Spry (1.6.1).
Here is a link to the page, and when you view it, keep in mind that only "Portfolio" has sub-menus, and of those, only "Writing" is supposed to have more than one sub-item ("Fiction" and "Non-Fiction").
http://www.kateswork.com/tests/test-sample4.html
Here is the css:
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
ul.MenuBar2Horizontal
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
position: relative;
/* 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. These have are a fixed width in the primary menu, an auto width in the secondary menu, which has no children. */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 7em;
float: left;
white-space:nowrap;
ul.MenuBar2Horizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 8em;
float: left;
white-space:nowrap;
/* Submenus containers 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: 7em;
position: absolute;
left: -1000em;
white-space:nowrap;
/* Submenu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 7em;
/* Sub-submenu containers are wider to accomodate longer items */
ul.MenuBarHorizontal ul ul
position: absolute;
width: 11.6em;
height:2em;
margin-top: -2%;
margin-right: 0%;
margin-bottom: 0;
margin-left: 0%;
/* Sub-submenu contents */
ul.MenuBarHorizontal ul ul li
position: absolute;
width: 11.7em;
/* 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;
/* Submenus should appear slightly overlapping to the right (99%) */
ul.MenuBarHorizontal ul ul
margin: 0 0 0 99%;
/* Sub-submenus should also appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul li
margin: 0 0 0 0%;
height:auto;
/* 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 #999999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
text-decoration: none;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFCC;
border-bottom-color: #7F7F5C;
border-left-color: #7F7F5C;
border-top-width: .1em;
border-top-style: solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
color: #333333;
background-color: #CCCC99;
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
ul.MenuBar2Horizontal a
display: block;
cursor: pointer;
text-decoration: none;
border-right-width: .2em;
border-bottom-width: .2em;
border-left-width: .2em;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CCCCCC;
border-bottom-color: #999999;
border-left-color: #999999;
border-top-width: .2em;
border-top-style: solid;
border-top-color:#999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
color: #333333;
background-color: #FFFFFF;
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
ul.MenuBarHorizontal ul li ul li a
border-right-color: #7F7F5C;
/* MOUSEOVER CONDITIONS: */
/* On mouse-over, or "focus," buttons change to a grey background and white text.
The following rule only applies to the IE browser (notice the syntax using the colon): */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #333333;
color: #FFFFFF;
border: 1px solid #CCCCCC;
/* The next rule set has a group selector, so top-menu and submenu items will have the same background color and font color. Notice that the font color here overrides the base rule, above. Menu items that are open with submenus are set to MenuBarItemHover with a grey background and white text. */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #333333;
color: #FFFFFF;
border: 1px solid #CCCCCC;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #333333;
color: #FFFFFF;
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; -
How to make plant default on the line item along with the item category
Hi All,
I want to default Plant on the line item along with the item category.In order to meet the following scnario.
1. I have two plants,first plant is maintained for the valuated item and the second plant is maintained for the non valuated item (Free Goods).
Whenever user is entering an item in the sales order for which corresponding free goods item is maintained in the master record.System is proposing two lines items in the sales order.
First line item is the main item which appears along with the Plant 1 which contains valuated items
Second line item is for the Free of charge item which is being proposed from Plant 2, which contains the non valuated items.
I want that the system should always propose Plant 1 with main item and Plant 2 with the Free of Charge item by default. (Along with the item category TAN and TANN)
RahulDelivering Plant is determined in the following order
1. Customer material info record.
2. Customer master
3. Material master.
Use one of them an default your plant.
I think in your case you can use the materila master which will give an item level plant different. The other two will default the plant at the header level.
regards
jude -
How do I format a second line (and subsequent lines) of text in a form field?
For example, I don't want this:
1. Blanskgljdslgjsldjglksjdgljsdklgjskldjgklsjdgkljsldkgjklsdjglkjsdgkljskldgjlskdjglksjdogk jskldgjlskdgjlskdjgkls
lkjsdlktjlkjglsjldgj
I would like the second line indented with the first.
Thanks!This is possible for a user to configure if the field is set up to allow rich text formatting. Press Ctrl+E to bring up the Properties bar:
-
I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.
I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
margin: 0;
padding: 0;
html {
background: #FFF;
height: 100%;
color: #000;
font: 100% Verdana, Geneva, sans-serif;
body {
background: #FFC;
width: 800px;
margin: auto;
font-size: 0.85em;
#header {
height: 148px;
background: #C2A4FF;
#nav {
background: #EEE;
height: 3.6em;
#aside {
width: 197px;
float: left;
padding: 20px;
#article {
margin-left: 240px;
padding: 20px;
background: #C2A4FF;
ul.MenuBarHorizontal li {
font-size: 1.05em;
width: auto;
text-align: center;
ul.MenuBarHorizontal a {
background-color: #EEE;
padding: 0.5em 1.1em;
color: #333;
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#"><br>Home</a> </li>
<li><a href="#"><br>Services</a></li>
<li><a href="#">Benefits &<br>Contraindications</a></li>
<li><a href="#">Common <br>Q&A</a></li>
<li><a href="#"><br>Pricing/Hours</a></li>
<li><a href="#">Contact/About<br>Melanie</a></li>
<li><a href="#"><br>Resources</a></li>
</ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
<p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
<p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
<p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps -
I've imported the spry bar for from the David Powers Tutorial, the 2.0 widget for the Bayside Pulse website, I have styled it in my own design, done every thing he said everything fine, I added the fifth top level menu button to the menu bar Cafe Citrus, but in my case Inspections, I took out all the stuff I did not want and put in all the stuff I did want, everything still going great, Checked it in live view looked good, saved it, and then went back to live view and there was an extra button on the end with nothing in it, I have tried to get rid but I cant sort it, not a clue. Can any one help please?
@Jeffrey
I received your PM with the link to your site.
Because you are using SpryMenuBar v2.0 and have probably styled the bar within the Widget Browser, once applied to your document it becomes a nightmare for newbies to make any styling changes.
In your case, you have (or the Widget Browser) as constructed the menu bar to use the MenuBar and an overriding MenuBarRightShrink classes as per
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarRightShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
The style rules for MenuBarRightShrink makes the menubar float right with a width of auto as per
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
The above style rules are contained within a style sheet called consultant_cs5.css
When we now look to see how the stylesheets are loaded, we see the following
<link href="consultant_cs5.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
This means that any rules targetting the same selectors in consultant_cs5.css will be overridden by those in SpryMenuBasic.css. Line 31 in SpryMenuBasic.css says
.MenuBar {
float: left;
width: 100%;
So now, instead of a right floating auto width menubar we have a left floating menubar covering the full width of the div.
If you swap the two stylesheets so that SpryMenuBasic.css loads before consultant_cs5.css, you will find that the situation is reversed and that the menubar will again be an auto width.
Gramps -
Combine a Bar Graph with a Line Graph!
Is it possible to combine a Bar Graph with a Line Graph because occasionally we wish to use both bars and lines on the same plot.
If yes, could you please give us a sample rtf file?
Thanks,
-RituHi Tim,
To be more clear, I need to superimpose the two graphs.
For example,the first one shows the budget for each month along with the actual expenditures as a bar graph. The other shows the cumulative budget, forecast and costs for the entire project as a series of lines. The first graph uses the scale on the left side of the graph and the second graph uses the scale on the right side.
Thanks,
-Ritu -
Original Question:
We use CS3 and have created a school website using the sprybar in Dreamweaver as our navigation bar. We have uploaded the spry assets folder and everything works great except for when we make changes to the sprybar, such as adding links. Currently, we have to update the navigation bar by copying the html and then opening and pasting the html into every page in the site, which is more than 100 pages. How do we make the sprybar automatically update whenever we make edits or changes to the sprybar?
We have tried creating the sprybar as a library item and it doesn't work unless it's a problem with Dreamweaver on the local computer communicating with the file on the server. We have played around with using the "include file" command.
As the site continues to get larger, this gets to be a much bigger problem. Any help is greatly appreciated.
Previous Answer Given:
http://foundationphp.com/tutorials/sprymenu/ssi.php
Current Question:
Ok, so we tried doing what was in the above tutorial. It all looks good on the dreamweaver side (I think...the spry bar doesn't show but it is replaced with a php icon). Is there something that needs to be done on the server side? Someone told me the server needed to be "activated" for php. What does this mean?
If php is not an option for us, is there another way to solve this issue?Jmonday1 wrote:
> Alright guys I am kind of a newbie when it comes to
dreamweaver (I was always a
> fan of golive because of its simplicity). Anyways I am
running Dreamweaver Cs3
> and an older version of the spry scripts (1.4 because I
can't get the updater
> to work on my mac for whatever reason). Anyways I have
my bar layed out as I
> want and it looks great. the problem is it is invisible
in IE. I think its
> probably a filter setting but i'm not sure where its
at... I will attach a
> link, and if you guys want me to post the code I will I
know thats a lot to
> look at though. Any help would be greatly appreciated.
Sorry, not sure what this issue is, but you should try asking
in the Spry forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Also, just because you can't install the Spry updater
extension doesn't mean that you can't use the updated Spry files
(which may even help resolve the issue). Get the latest versions of
the files here:
http://labs.adobe.com/technologies/spry/home.html
Open the Download zip file and look for the widgets/menubar
folder, it'll contain the latest .js and .css files. The default
1.6.1 files in that package work in IE7, so it may be the specific
CSS that you're using for your page. SO you may want to rebuild
from the latest .js and .css files and apply your styling changes
and test while your doing that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
I'm trying to get my Spry bar div in to position in the bottom right corner in the banner div. can any one help please?
The js for the Spry tooltip effect uses the current mouse
position to
determine where to display the tooltip. To change this, you'd
have to hack
into the Spry js. It doesn't seem to be a good idea to me.
Can you tough
it out with the stock placement?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Walter Elias" <[email protected]> wrote in
message
news:gjrnfr$keh$[email protected]..
>I haven't actually built the page. I've made numerous
pages with Spry
>tooltips
> using images, and the tooltip image position is always
an offset value
> from the
> cursor location (default 15 pixels in both x and y
axes). There is a
> dialogue
> box which enables control over the offset from the
cursor. This was never
> an
> issue with those pages.
>
> But when I started experimenting with a new page, trying
to find a way to
> make
> every tooltip image align exactly to the upper left
corner of the page, it
> was
> impossible (within my limited knowledge).
>
> So, the question remains - and you don't need to see my
rough page layouts
> (which I didn't save) to answer this - is there a way to
make an image
> within a
> Spry tooltip always align to the top left corner of the
page, or of the
> DIV?
> -
Customizing a Horizontal spry bar
Maybe I have been looking in the wrong places, but is there a tutorial to customize a spry bar like the sample ones on adobe labs. I have almost got my spry bar completed, but I cannot figure out how adjust a few things. I looked at David Powers' tutorials and one or two others, they were helpful but not enough. All help is greatly appreciated
I am having trouble with the width of the boxes that have submenus (members, safety, and cal/osha).... Basically the width is good as far as the text goes but the arrow that indicates there is a submenu for that box is covering the last letter.
I am also having trouble with the padding/spacing left of the submenu items, I think I some how added padding/spacing to the submenu items when I was following a tutorial but I forgot how to undo that action.
I don't have my site up yet, but I can post the code....
here's the css for my horizontal spry menu bar-
/* 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;
text-transform: uppercase;
/* 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;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
padding-right: 15px;
white-space: nowrap;
/* 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
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
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: auto;
display: block;
float: none;
white-space: nowrap;
background-color: transparent;
/* 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;
background-color: #FFF;
color: #000;
text-decoration: none;
/* 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: #03F;
/* 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: #FFF;
color: #03F;
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: 100% 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;
** Just in case here is my source code....
<ul id="PARAMA_Menu" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Members </a>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">w/c Advantages</a></li>
<li><a href="#">w/c quote assistant</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Safety</a>
<ul>
<li><a href="#">Safety & Loss Control</a></li>
<li><a href="#">Safety Articles</a></li>
<li><a href="#">safety articles archive</a></li>
<li><a href="#">scif newsletters</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">cal/osha</a>
<ul>
<li><a href="#">compliance & enforcement</a></li>
<li><a href="#">consultation</a></li>
<li><a href="#">archive</a></li>
</ul>
</li>
<li><a href="#">resources</a></li>
<li><a href="#">site map</a></li>
</ul>
Maybe you are looking for
-
How to change "previous iTunes library" header after choosing and old library
This worked for me on windows vista ultimate: - Open itunes with shift press down - Create a new library, by default, it is created at C:\Users\"your user"\Music\iTunes\iTunes (different location from where it is originally), close iTunes -Now remov
-
Pages 5.1 file incompatibility with Pages 5 and 5.01?
Can anyone who has access to both Pages 5.01 and Pages 5.1 on different machines test the following: 1. Create a file in Pages 5.01 using various text and objects eg TextBox, Shapes, Images, Charts and Tables labelling it as XYZ v5.01 I suggest openi
-
Hi, I am using SAP 2007B PL:16. When i run Purchase analysis with items tab and GRPO selection the "Quantity" field is zero. When i double click the row all the GRPO are listed but there also the Quantiyt field is zero What could be the problem? Than
-
NationalInstruments.Analysis.Dsp.SignalProcessing.Integrate method
Could you give me an example use of the NationalInstruments.Analysis.Dsp.SignalProcessing.Integrate method? I want to integrate a signal but I am not sure what to use for the boundary conditions (initialCondition and finalCondition).
-
Hi again Since updating to OS5, when i click my BB icon to bring up my full icon menu the backgroud on the phone turns bright white which im not keen on and is straining my eyes, how do i go about changing this? i have my own theme added which used t