Fixed position for a menu bar

Similar Questions

• How can I create a new master page with a different set of pages for the menu bar?

  I want to create a new Master Page that could be used for a different set of pages with a different menu pointing to other pages...

  For example:

  Master A to include a menu for pages:

  Page 1, Page 2, Page 3,

  Master B to the guests for the pages menu:

  Page 1, Page 4, Page 5...

  Maybe I would also do Master C and D with a bar of menus different total...

  But how can I isolate the menu bar from the rest of the pages that I don't want it?

  Right click on this page that you want to isolate > menu goto option > exclude from the menu.

  Hope It could help.

• Fixed position for Dock

  Hi guys,.
  
  I've included a Dock ( http://xs141.xs.to/xs141/09295/dock741.jpg for some reason any it now opens a video player for me) in an application and made it centered. However, I also want to put in a specific place because currently the Wharf when no option is selected in the selection list appears at the top. When it has been selected, it descends and changes according to the number of results. If I put the report to the 15 results per page, I would like to repair slot there for consistency. How can I do this? With a few coord x - y for the upper left point I guess, but what is the HTML code?
  
  Mike
  
  Published by: Gerd on September 23, 2009 14:51

  Hi GERD,

  If you list your item in a DIV tag, you can then set attributes:
  position: absolute;
  high: 123;
  left: 456;
  against this point (preferably in css).

  Concerning

  Michael

• Menu bar of the modules to load for each submenu

  I'm creating an application by using the MENU bar, but cannot get a module to open when it is clicked on a submenu. I stripped my app up to bare bones to eliminate other factors. The menu bar has several main options, such as Button1, Button2, Button3, then each has a submenu drop-down. If Button1 has dropdowns Button1Sub1 and Button1Sub2 I want to have a different module launch when you click on one of the submenus.

  I managed to use ModuleManager to open a particular module by referring to the creationComplete = "moduleLoadHandler ()" but not by selecting a menu item in the menu bar. " My application has need to be as easy to use, Windows-like as possible. There are a lot of different modules that must be loaded and unloaded.

  I have attached an image screenshot of my project tree and circled the ActionModule.swf file to show its location.

  I have attached my code below:

  " < = xmlns:mx mx:Application ' http://www.Adobe.com/2006/MXML "layout ="vertical"creationComplete =" creationHandler (); » >

  < mx:Script >

  <! [CDATA]

  Import mx.controls.menuClasses.IMenuBarItemRenderer;

  Import mx.controls.MenuBar;

  Import mx.controls.menuClasses.MenuBarItem;

  Import mx.controls.Alert;

  import mx.modules.Module;

  import mx.events.ModuleEvent;

  import mx.modules.ModuleManager;

  import mx.modules.IModuleInfo;

  import mx.rpc.events.ResultEvent;

  import mx.rpc.events.FaultEvent;

  import mx.events.FlexEvent;

  import mx.events.MenuEvent;

  Import mx.collections. *;

  public var _moduleInfo:IModuleInfo;

  [Bindable]

  public var menuBarCollection:XMLListCollection;

  private var menubarXML:XMLList =

  <>

  < label menuitem = "Menu1" data = "top" >

  < label menuitem = "1-A MenuItem" data = "1a" itemClick = "moduleLoadHandler ()" / >

  < label menuitem = "MenuItem 1-B" data = 1 'b' / >

  < / menuitem >

  < label menuitem = "Menu2" data = "top" >

  < label menuitem = "2-A MenuItem" type = "check data" = "2" / >

  < type menuitem = "separator" / >

  < label menuitem = "MenuItem 2-B" >

  < label menuitem = "SubMenuItem 3A" type = "radio".

  groupName = "one" data = "3" / >

  < label menuitem = "SubMenuItem 3-B" type = "radio".

  groupName = "one" data = "3B" / >

  < / menuitem >

  < / menuitem >

  < label menuitem = "Menu3" data = "top" >

  < label menuitem = "MenuItem 3-A" data = "3" / >

  < label menuitem = "MenuItem 3-B" data = "3B" / >

  < / menuitem >

  < label menuitem = "Menu4" data = "top" >

  < label menuitem = "4A MenuItem" data = "4A" / >

  < label menuitem = "4-B MenuItem" data = "4B" / >

  < / menuitem >

  <>/.

  private function creationHandler (): void {}

  menuBarCollection = new XMLListCollection (menubarXML);

  }

  private void moduleLoadHandler(event:ModuleEvent):void {}

  canvas.addChild (_moduleInfo.factory.create () in Module);

  _moduleInfo = ModuleManager.getModule ('ActionModule.swf');

  _moduleInfo.addEventListener (ModuleEvent.READY, moduleLoadHandler);

  _moduleInfo.load ();

  }

  Event handler for the MenuBar control's itemClick event.

  private void menuHandler(event:MenuEvent):void {}

  Do not open the alert for a menu bar that

  Opens a pop-up submenu.

  If (event.item.@data! = 'top') {}

  Alert.Show ("Label:" + event.item.@label + "\n" +)

  ("Data:" + event.item.@data, 'Clicked menu' item);

  //}

  }

  private void onTopSelection(event:MenuEvent):void {}

  var mb:MenuBar is event.target as menu bar;.

  var selectedIndex:int = mb.selectedIndex;

  for (var i: int = 0; i < mb.menuBarItems.length; i ++) {}

  {if(i==SelectedIndex)}

  (mb.menuBarItems [i] as MenuBarItem) .setStyle ("fontWeight", "bold");

  }

  else {}

  (mb.menuBarItems [i] as MenuBarItem) .setStyle ("fontWeight", "normal");

  }

  }

  }

  []] >

  < / mx:Script >

  < mx:Canvas id = "canvas" height = "75%" width = "75%".

  paddingTop = "10" paddingLeft = "10" >

  "< mx:MenuBar labelField="@label "itemClick ="menuHandler (event); "dataProvider ="{menuBarCollection}"change =" onTopSelection (event) "/ >"

  < / mx:Canvas >

  < / mx:Application >

  I think it should look like:

  function menuHandler(event:MenuEvent):void

  {

  moduleLoader.url = event.item.@data

  }

  Alex Harui

  Flex SDK Developer

  Adobe Systems Inc..

  Blog: http://blogs.adobe.com/aharui

• Gap between the header and spry menu bar (school project)?

  Hello I have a project for school and they want me to a dw premade layout html, with a header image, and a spry menu bar located in the header. Which I did, but there is this small gap between the header image and the spry menu bar and the header that I can't get rid of. There is no additional line break tag or paragraph in there, I have NO idea what is wrong, please help if you know. Thank you.

  Joint below is code html and css. Sorry there all text in dw premade in there too. Basically, I have also attached the css external to the spry menu bar, and the page just in case.

  <! DOCTYPE HTML >

  < html >

  < head >

  < meta charset = "UTF-8" >

  < title > Rapids Transit - Buffalo River Outfitters < /title >

  < link href = "css/rapids_transit.css" rel = "stylesheet" type = "text/css" > "

  < style type = "text/css" >

  <!--

  {body

  Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.

  Background: # 42413;

  margin: 0;

  padding: 0;

  Color: #000;

  }

  / * ~ ~ Tag of the element selectors ~ ~ *.

  UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

  padding: 0;

  margin: 0;

  }

  H1, h2, h3, h4, h5, h6 {p}

  margin-top: 0;     / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

  padding-right: 15px;

  padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */

  }

  an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

  border: none;

  }

  / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

  a: link {}

  color: # 42413.

  text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

  }

  a: visited {}

  color: #6E6C64;

  text-decoration: underline;

  }

  a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

  text-decoration: none;

  }

  / * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.

  . Container {}

  position: relative;

  Width: 960px;

  Background: #FFF;

  margin: 0 auto; / * set to auto on the sides, coupled with the width, the layout centres * /.

  }

  / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

  . Header {}

  background-color: #fff;

  padding-right: 5px;

  padding-left: 5px;

  }

  / * ~ ~ It's layout information. ~~

  (1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

  */

  . Happy {}

  padding-top: 10px;

  padding-right: 0;

  padding-bottom: 10px;

  padding-left: 0;

  }

  / * ~ ~ Footer ~ ~ * /.

  .footer {}

  padding: 10px 0;

  background: #CCC49F;

  }

  / * ~ ~ various float/clear classes ~ ~ * /.

  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

  float: right;

  left margin: 8px;

  }

  .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

  float: left;

  right margin: 8px;

  }

  .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

  Clear: both;

  height: 0;

  font size: 1px;

  line-height: 0px;

  }

  ->

  < / style >

  < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

  < link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "

  < style type = "text/css" >

  {#river_level}

  position: absolute;

  left: 500px;

  top: 325px;

  Width: 245px;

  height: 80px;

  z-index: 1;

  background-color: #ffcc33;

  border-top-style: inset;

  border-right-style: inset;

  border-bottom-style: inset;

  border-left-style: inset;

  border-bottom-color: #960;

  border-right-color: #960;

  border-bottom-color: #960;

  border-left-color: #960;

  text-align: center;

  do-family: Verdana, Geneva, without serif.

  font-size: medium;

  }

  < / style >

  < / head >

  < body >

  < div class = "container" >

  < div class = "header" > < a href = "#" > < img src = "assets/rt_banner.jpg" alt = "Banner Rapids Transit" width = "950" height = "120" / > < / a > "

  < ul id = "MenuBar1" class = "MenuBarHorizontal" >

  < li > < a href = "index.html" > home < /a > < /li >

  < li > < a href = "guides.html" > our Guides < /a > < /li > ""

  < li > < a href = "rates.html" > rates < /a > < /li > ""

  < li > < a href = "lodging.html" > Lodging < /a > < /li > ""

  < li > < a href = "before.html" > Before You Go < /a > < /li > ""

  < /ul >

  <! - end .header - > < / div >

  < div class = "content" >

  < p align = "left" class = "body_text" > welcome to rapid Transit. We are a rental service and canoe river guide located on the banks of the beautiful Buffalo River to Gilbert (Arkansas). We also offer kayak and raft rental. Our experienced guides will be pleased to offer trips on the river suitable for all levels - from beginner to expert. They will also be pleased to accompany you all the way! Stop at our country store and pick up your picnic supplies in the process of disappearance. We will even Pack it for you in airtight containers. (Just a precaution!) Call us to make your reservations. < /p >

  < p align = "left" class = "contact_info" > Rapid Transit < br / >

  Highway 55 North < br / >

  Gilbert, Arkansas 75497 < br / >

  (555) 365-5228 < br / >

  < a href = "mailto: " [email protected] ' > Mike Andrew < /a > < /p > .

  < h1 > < / h1 >

  <! - end content - > < / div >

  < div class = "footer" >

  < p > < em > Copyright 2000 - 2012 < br / >

  Last updated on

  <!-#BeginDate format: Am1-10 April 2012 > <!-#EndDate->

  You < /i > < / p >

  <! - end .footer - > < / div >

  <!-end .container-> < div id = "river_level" > current River Conditions: < br >

  good floating today < br >

  with a few spots of class II < / div > < / div >

  < script type = "text/javascript" >

  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

  < /script >

  < / body >

  < / html >

  -------------------------------------------------------

  ALSO, HERE IS MY EXTERNAL STYLESHEET

  {.body_text}

  do-family: Arial, Helvetica, without serif.

  do-size: 14px;

  make-style: normal;

  }

  {.paragraph_header}

  do-family: Arial, Helvetica, without serif.

  do-size: 14px;

  make-style: normal;

  make-weight: bold;

  color: #036;

  }

  {.contact_info}

  do-family: Arial, Helvetica, without serif.

  do-size: 14px;

  make-style: italic;

  Color: #000;

  }

  -----------------------------------------------------

  HERE'S MY SPRY MENU BAR CSS TOO

  @charset "UTF-8";

  / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

  The AVAILABLE INFORMATION: Describes the box model, positioning, the order

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

  / * The outermost container for the menu bar, an area of width auto without margin or padding * /.

  UL. MenuBarHorizontal

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 14px;

  cursor: default;

  Width: auto;

  do-family: Arial, Helvetica, without serif.

  }

  / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */

  UL. MenuBarActive

  {

  z-index: 1000;

  }

  / * Menu item containers, position of children relative to this container and are a fixed width * /.

  UL. MenuBarHorizontal li

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  position: relative;

  text-align: center;

  cursor: pointer;

  Width: 190px;

  float: left;

  height: 25px;

  }

  / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.

  UL. MenuBarHorizontal ul

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  z index: 1020;

  cursor: default;

  Width: 8.2em;

  position: absolute;

  left:-1000em;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible

  {

  left: auto;

  }

  / * Container of menu items are same fixed width parent * /.

  UL. MenuBarHorizontal ul li

  {

  Width: 8.2em;

  }

  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.

  UL. MenuBarHorizontal ul ul

  {

  position: absolute;

  margin:-5% 0 0 95%;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible

  {

  left: auto;

  top: 0;

  }

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

  INFORMATION DESIGN: Describes the set of colors, borders, fonts

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

  / * Submenu containers have borders on all sides * /.

  UL. MenuBarHorizontal ul

  {

  border: 1px solid #CCC;

  }

  / * Menu items are a light grey block with padding and no text decoration * /.

  UL. MenuBarHorizontal a

  {

  display: block;

  cursor: pointer;

  background-color: #2E9712;

  Padding: 0.5em 0.75em;

  color: #fff;

  text-decoration: none;

  }

  / Components menu that have mouse over or focus have a blue background and white text * /.

  UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

  {

  background-color: # 33;

  color: #FFF;

  }

  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.

  UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

  {

  background-color: #3FA7A8;

  color: ##ffffff;

  }

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

  Submenu INDICATION: styles if there is a submenu in a given category

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

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  UL. MenuBarHorizontal a.MenuBarItemSubmenu

  {

  background-image: url (SpryMenuBarDown.gif);

  background-repeat: no-repeat;

  background-position: 50 95%;

  }

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  UL. MenuBarHorizontal ul a.MenuBarItemSubmenu

  {

  background-image: url (SpryMenuBarRight.gif);

  background-repeat: no-repeat;

  background-position: 50 95%;

  }

  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

  }

  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

  }

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

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

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

  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.

  UL. MenuBarHorizontal iframe

  {

  position: absolute;

  z index: 1010;

  Filter:alpha(opacity:0.1);

  }

  / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.

  @media screen, projection

  {

  UL. MenuBarHorizontal li. MenuBarItemIE

  {

  display: inline;

  f\loat: left;

  Background: #FFF;

  }

  }

  Add the below css to your styes css selector:

  . Header img {}

  display: block;

  }

  Change your padded 30px high 'content' css selector and also include clear: both; (as shown below).

  . Happy {}

  padding-top: 30px;

  padding-right: 0;

  padding-bottom: 10px;

  padding-left: 0;

  Clear: both;

  }

• Menu bar not working not properly in IE9

  My spry menu bar works perfectly in Chrome, Firefox, and Safari, but not working in IE9.  The submenus to the menu bar horizontally not to fall down, they go on the side.  Any ideas?

  http://littlechisel.com/Ideal_Window/

  Here is my code:

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml "> <!-InstanceBegin template="/Templates/Ideal_Header.dwt ' codeOutsideHTMLIsLocked = 'false'->

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

  <!-InstanceBeginEditable name = "doctitle"-->

  < title > < /title > ideal window manufacturing

  <! - InstanceEndEditable - >

  <!-InstanceBeginEditable name = "head"->

  <! - InstanceEndEditable - >

  < style type = "text/css" >

  body, td, th {}

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  }

  {body

  background-color: #A74131;

  }

  a: link {}

  text-decoration: none;

  }

  a: visited {}

  text-decoration: none;

  }

  a: hover {}

  text-decoration: underline;

  }

  a: active {}

  text-decoration: none;

  }

  < / style >

  < link href = "IdealWindowTemplate.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 >

  < table width = "900" border = "0" align = "center" cellpadding = "0" cellspacing = "0" >

  < b >

  < class td = "White-13-AlignRt" > < a href = "Contact.html" > contact us < /a > | Dealer Login < table >

  < /tr >

  < b >

  "< td valign ="top"> < a href =" index.html "> < img src = images/thanks" "width ="243"height ="145"border ="0"/ > < /a > < img src =" images/Ballet_Header.jpg "width ="657"height ="145"border ="0"/ > < table >

  < /tr >

  < b >

  < td >

  < table >

  < /tr >

  < tr bgcolor = "#FFFFFF" >

  < td align = "center" valign = "top" > < ul id = "MenuBar1" class = "MenuBarHorizontal" >

  < li > < a class = "whyideal MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >

  < ul >

  < li > < a class = "whyidealsub" href = "#" > why ideal < /a > < /li >

  < li > < a class = "whyidealsub" href = "#" > story < /a > < /li >

  < /ul >

  < /li >

  < li > < a class = "products MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >

  < ul >

  < li > < a class = "productssub" href = "#" > ranges < /a > < /li >

  < li > < a class = "productssub" href = "#" > doors Patio < /a > < /li >

  < li > < a class = "productssub" href = "#" > garden window < /a > < /li >

  < li > < a class = "productssub" href = "#" > forms architectural < /a > < /li >

  < /ul >

  < /li >

  < li > < a class = "intermodality MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >

  < ul >

  < li > < has a class = "energysub" href = "#" > Energy Saving packages < /a > < /li >

  < li > < a class = "energysub" href = "#" > R5 window program < /a > < /li >

  < li > < a class = "energysub" href = "#" > Options package < /a >

  < ul >

  < li > < a href = "#" > LowE Glass < /a > < /li >

  < li > < a href = "#" > gas Argon/Krypton < /a > < /li >

  < li > < a href = "#" > Triple pane < /a > < /li >

  < li > < a href = "#" > foam fill < /a > < /li >

  < /ul >

  < /li >

  < /ul >

  < /li >

  < li > < a class = "news" href = "#" > < span > < / span > < /a > < /li >

  < li > < a class = "custody MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >

  < ul >

  < li > < a class = "caresub" href = "#" > cleaning & amp; Operation < /a > < /li >

  < li > < a class = "caresub" href = "#" > Condensation < /a > < /li >

  < li > < a class = "caresub" href = "#" > glossary < /a > < /li >

  < /ul >

  < /li >

  < li > < a class = "guarantee" href = "#" > < span > < / span > < /a > < /li >

  < /ul > < table >

  < /tr >

  < b >

  < td height = "5" align = "left" valign = "top" > < table >

  < /tr >

  < b >

  < td align = "left" valign = "top" bgcolor = "#FFFFFF" > <!-InstanceBeginEditable name = "EditRegion1"->

  < table width = "900" border = "0" cellspacing = "0" cellpadding = "0" >

  < b >

  < td width = "19" align = "left" valign = "top" > < img src = "images/BarShadow19.jpg" width = "19" height = "34" / > < table > "

  < td width = "525" align = "left" valign = "top" > < img src = "images/indexPhoto.jpg" width = "525" height = "362" / > < table > "

  < td width = "336" > < table >

  < td width = "20" align = "left" valign = "top" > < img src = "images/BarShadow20.jpg" width = "20" height = "34" / > < table > "

  < /tr >

  < /table >

  <!-InstanceEndEditable--> < table >

  < /tr >

  < b >

  < td align = "center" valign = "top" > < class p = 'Footer' > ideal window manufacturing |  100 West 7th Street, Bayonne, NJ 07002 |  Tel: 800-631-3400 |  Fax: 800 758-7528 < br / >

  © Ideal window manufacturing 2012 all rights reserved < br / >

  " Web Design by < a href =" http://www.littlechisel.com "target ="_new"> small chisel Design < /a > < /p > "

  < class p = 'Footer' > < / p > < table >

  < /tr >

  < /table >

  < script type = "text/javascript" >

  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});

  < /script >

  < / body >

  <! - InstanceEnd - > < / html >

  Sections:

  @charset "UTF-8";

  / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

  The AVAILABLE INFORMATION: Describes the box model, positioning, the order

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

  / * The outermost container for the menu bar, an area of width auto without margin or padding * /.

  UL. MenuBarHorizontal

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  cursor: default;

  Width: auto;

  }

  UL. MenuBarHorizontal ul a {}

  background-color: #514B 97.

  color: #CCC;

  }

  UL. MenuBarHorizontal a.whyideal {}

  background-image: url (.. / images/WhyIdeal.jpg);

  height: 28px;

  Width: 139px;

  }

  UL. MenuBarHorizontal a.whyideal.MenuBarItemSubmenu {}

  background-image: url (.. / images/WhyIdeal.jpg);

  height: 28px;

  Width: 139px;

  }

  UL. MenuBarHorizontal a.whyideal.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/WhyIdealRoll.jpg);

  height: 28px;

  Width: 139px;

  }

  UL. MenuBarHorizontal a.whyideal span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.whyideal:hover, ul. MenuBarHorizontal a.whyideal:focus, ul. MenuBarHorizontal a.whyideal.MenuBarItemHover, ul. MenuBarHorizontal a.whyideal.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.whyideal.MenuBarSubmenuVisible {}

  Background: url (.. / images/WhyIdealRoll.jpg);

  }

  UL. MenuBarHorizontal a.products {}

  background-image: url (.. / images/Products.jpg);

  height: 28px;

  Width: 138px;

  }

  UL. MenuBarHorizontal a.products.MenuBarItemSubmenu {}

  background-image: url (.. / images/Products.jpg);

  height: 28px;

  Width: 138px;

  }

  UL. MenuBarHorizontal a.products.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/ProductsRoll.jpg);

  height: 28px;

  Width: 138px;

  }

  UL. MenuBarHorizontal a.products span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.products:hover, ul. MenuBarHorizontal a.products:focus, ul. MenuBarHorizontal a.products.MenuBarItemHover, ul. MenuBarHorizontal a.products.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.products.MenuBarSubmenuVisible {}

  Background: url (.. / images/ProductsRoll.jpg);

  }

  UL. MenuBarHorizontal a.energysavings {}

  background-image: url (.. / images/EnergySavings.jpg);

  height: 28px;

  Width: 169px;

  }

  UL. MenuBarHorizontal a.energysavings.MenuBarItemSubmenu {}

  background-image: url (.. / images/EnergySavings.jpg);

  height: 28px;

  Width: 169px;

  }

  UL. MenuBarHorizontal a.energysavings.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/EnergySavingsRoll.jpg);

  height: 28px;

  Width: 169px;

  }

  UL. MenuBarHorizontal a.products span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.energysavings:hover, ul. MenuBarHorizontal a.energysavings:focus, ul. MenuBarHorizontal a.energysavings.MenuBarItemHover, ul. MenuBarHorizontal a.energysavings.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.energysavings.MenuBarSubmenuVisible {}

  Background: url (.. / images/EnergySavingsRoll.jpg);

  }

  UL. MenuBarHorizontal a.news {}

  background-image: url (.. / images/News.jpg);

  height: 28px;

  Width: 104px;

  }

  UL. MenuBarHorizontal a.news.MenuBarItemSubmenu {}

  background-image: url (.. / images/News.jpg);

  height: 28px;

  Width: 104px;

  }

  UL. MenuBarHorizontal a.news.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/NewsRoll.jpg);

  height: 28px;

  Width: 104px;

  }

  UL. MenuBarHorizontal a.news span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.news:hover, ul. MenuBarHorizontal a.news:focus, ul. MenuBarHorizontal a.news.MenuBarItemHover, ul. MenuBarHorizontal a.news.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.news.MenuBarSubmenuVisible {}

  Background: url (.. / images/NewsRoll.jpg);

  }

  UL. MenuBarHorizontal a.care {}

  background-image: url (.. / images/CareMaint.jpg);

  height: 28px;

  Width: 205px;

  }

  UL. MenuBarHorizontal a.care.MenuBarItemSubmenu {}

  background-image: url (.. / images/CareMaint.jpg);

  height: 28px;

  Width: 205px;

  }

  UL. MenuBarHorizontal a.care.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/CareMaintRoll.jpg);

  height: 28px;

  Width: 205px;

  }

  UL. MenuBarHorizontal a.care span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.care:hover, ul. MenuBarHorizontal a.care:focus, ul. MenuBarHorizontal a.care.MenuBarItemHover, ul. MenuBarHorizontal a.care.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.care.MenuBarSubmenuVisible {}

  Background: url (.. / images/CareMaintRoll.jpg);

  }

  UL. MenuBarHorizontal a.warranty {}

  background-image: url (.. / images/Warranty.jpg);

  height: 28px;

  Width: 145px;

  }

  UL. MenuBarHorizontal a.warranty.MenuBarItemSubmenu {}

  background-image: url (.. / images/Warranty.jpg);

  height: 28px;

  Width: 145px;

  }

  UL. MenuBarHorizontal a.warranty.MenuBarItemSubmenu:hover {}

  background-image: url (.. / images/WarrantyRoll.jpg);

  height: 28px;

  Width: 145px;

  }

  UL. MenuBarHorizontal a.warranty span {}

  visibility: hidden;

  }

  UL. MenuBarHorizontal a.warranty:hover, ul. MenuBarHorizontal a.warranty:focus, ul. MenuBarHorizontal a.warranty.MenuBarItemHover, ul. MenuBarHorizontal a.warranty.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.warranty.MenuBarSubmenuVisible {}

  Background: url (.. / images/WarrantyRoll.jpg);

  }

  #MenuBar1. MenuBarSubmenuVisible a {}

  background-image: none;

  background-repeat: no-repeat;

  Width: 139px;

  height: 28px;

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  Color: #000;

  text-align: center;

  vertical-align: bottom;

  background-color: #d3c7b7;

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  }

  #MenuBar1. MenuBarSubmenuVisible a: hover {}

  make-weight: bold;

  background-color: #eee9e3;

  }

  #MenuBar1. MenuBarSubmenuVisible a.whyidealsub {}

  background-image: none;

  background-repeat: no-repeat;

  Width: 139px;

  height: 28px;

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  Color: #000;

  text-align: center;

  vertical-align: bottom;

  background-color: #d3c7b7;

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  overflow: visible;

  line-height: 28px;

  float: none;

  }

  #MenuBar1. MenuBarSubmenuVisible a.whyidealsub:hover {}

  make-weight: bold;

  background-color: #eee9e3;

  }

  #MenuBar1. MenuBarSubmenuVisible a.productssub {}

  background-image: none;

  background-repeat: no-repeat;

  Width: 138px;

  height: 28px;

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  Color: #000;

  text-align: center;

  vertical-align: bottom;

  background-color: #d3c7b7;

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  line-height: 28px;

  }

  #MenuBar1. MenuBarSubmenuVisible a.productssub:hover {}

  make-weight: bold;

  background-color: #eee9e3;

  }

  #MenuBar1. MenuBarSubmenuVisible a.energysub {}

  background-image: none;

  background-repeat: no-repeat;

  Width: 169px;

  height: 28px;

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  Color: #000;

  text-align: center;

  vertical-align: bottom;

  background-color: #d3c7b7;

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  line-height: 28px;

  }

  #MenuBar1. MenuBarSubmenuVisible a.energysub:hover {}

  make-weight: bold;

  background-color: #eee9e3;

  }

  #MenuBar1. MenuBarSubmenuVisible a.caresub {}

  background-image: none;

  background-repeat: no-repeat;

  Width: 205px;

  height: 28px;

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  Color: #000;

  text-align: center;

  vertical-align: middle;

  background-color: #d3c7b7;

  do-family: Tahoma, Geneva, without serif.

  do-size: 12px;

  line-height: 28px;

  }

  #MenuBar1. MenuBarSubmenuVisible a.caresub:hover {}

  make-weight: bold;

  background-color: #eee9e3;

  }

  / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */

  UL. MenuBarActive

  {

  z-index: 1000;

  }

  / * Menu item containers, position of children relative to this container and are a fixed width * /.

  UL. MenuBarHorizontal li

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  position: relative;

  text-align: center;

  cursor: pointer;

  float: left;

  vertical-align: middle;

  }

  / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.

  UL. MenuBarHorizontal ul

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  do-size: 100%;

  z index: 1020;

  cursor: default;

  position: absolute;

  left:-1000em;

  vertical-align: middle;

  text-align: center;

  display: block;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible

  {

  left: auto;

  }

  / * Container of menu items are same fixed width parent * /.

  UL. MenuBarHorizontal ul li

  {

  line-height: 28px;

  }

  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.

  UL. MenuBarHorizontal ul ul

  {

  position: absolute;

  margin:-5% 0 0 95%;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible

  {

  left: auto;

  top: 0;

  }

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

  INFORMATION DESIGN: Describes the set of colors, borders, fonts

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

  / * Submenu containers have borders on all sides * /.

  UL. MenuBarHorizontal ul

  {

  border: 1px solid #CCC;

  }

  / * Menu items are a light grey block with padding and no text decoration * /.

  UL. MenuBarHorizontal a

  {

  display: block;

  cursor: pointer;

  background-color: #EEE;

  Color: #333;

  text-decoration: none;

  }

  / Components menu that have mouse over or focus have a blue background and white text * /.

  UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

  {

  background-color: # 33;

  color: #FFF;

  }

  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.

  UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

  {

  background-color: # 33;

  color: #FFF;

  }

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

  Submenu INDICATION: styles if there is a submenu in a given category

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

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  UL. MenuBarHorizontal a.MenuBarItemSubmenu

  {

  background-image: url (SpryMenuBarDown.gif);

  background-repeat: no-repeat;

  background-position: 50 95%;

  }

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  UL. MenuBarHorizontal ul a.MenuBarItemSubmenu

  {

  background-image: url (SpryMenuBarRight.gif);

  background-repeat: no-repeat;

  background-position: 50 95%;

  }

  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

  }

  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

  }

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

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

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

  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.

  UL. MenuBarHorizontal iframe

  {

  position: absolute;

  z index: 1010;

  Filter:alpha(opacity:0.1);

  }

  / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.

  @media screen, projection

  {

  UL. MenuBarHorizontal li. MenuBarItemIE

  {

  display: inline;

  f\loat: left;

  Background: #FFF;

  }

  }

  Add or change

  UL. MenuBarHorizontal ul li {}

  display: block;

  float: none! important;

  Width: auto;

  white-space: nowrap;

  }

  The! important bit is to substitute the JS

  GRAMPS

• Space additional Spry menu bar

  I put a spry menu bar in Dreamweaver and everything works except there is a small space on the left of the submenus within the boundary of the submenu. It is quite difficult to see because everything is blue, but if you look closely you can see.

  I played around with the css (and probably messed up a few things on the way), but I can't seem to get rid of this space.

  Capture screen and css below:

  

  @charset "UTF-8";

  / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

  The AVAILABLE INFORMATION: Describes the box model, positioning, the order

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

  / * The outermost container for the menu bar, an area of width auto without margin or padding * /.

  UL. MenuBarHorizontal

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  are-size: 100%;

  cursor: default;

  width: auto;

  }

  / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */

  UL. MenuBarActive

  {

  z-index: 1000;

  }

  / * Menu item containers, position of children relative to this container and are a fixed width * /.

  UL. MenuBarHorizontal li

  {

  padding: 0;

  list-style-type: none;

  are-size: 100%;

  position: relative;

  text-align: left;

  cursor: point;

  width: auto;

  float: left;

  margin left: 3%;

  }

  / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.

  UL. MenuBarHorizontal ul

  {

  margin: 0;

  padding: 0;

  list-style-type: none;

  are-size: 100%;

  z-index: 1020;

  cursor: default;

  width: 8.2em;

  position: absolute;

  left:-1000em;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible

  {

  left: auto;

  }

  / * Container of menu items are same fixed width parent * /.

  UL. MenuBarHorizontal ul li

  {

  width: 8th;

  }

  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.

  UL. MenuBarHorizontal ul ul

  {

  position: absolute;

  }

  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.

  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible

  {

  left: 0px;

  top: 0;

  }

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

  INFORMATION DESIGN: Describes the set of colors, borders, fonts

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

  / * Submenu containers have borders on all sides * /.

  UL. MenuBarHorizontal ul

  {

  border: 1px solid #CCC;

  }

  / * Menu items are a light grey block with padding and no text decoration * /.

  SLH MenuBarHorizontal a

  {

  display: block;

  cursor: point;

  color: #FFF;

  text-decoration: none;

  background-color: #173362;

  }

  / Components menu that have mouse over or focus have a blue background and white text * /.

  SLH MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

  {

  background-color: #BCC5C2;

  color: #000;

  }

  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.

  SLH MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

  {

  background-color: #173362;

  color: #FF0;

  }

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

  Submenu INDICATION: styles if there is a submenu in a given category

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

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  SLH MenuBarHorizontal a.MenuBarItemSubmenu

  {

  }

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

  MenuBarHorizontal ul a.MenuBarItemSubmenu SLH

  {

  background-repeat: no-repeat;

  }

  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.

  SLH MenuBarHorizontal a.MenuBarItemSubmenuHover

  {

  background-repeat: no-repeat;

  }

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

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

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

  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.

  SLH MenuBarHorizontal iframe

  {

  position: absolute;

  z-index: 1010;

  filter:alpha(opacity:0.1);

  }

  / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.

  @media screen, projection

  {

  ul. MenuBarHorizontal li. MenuBarItemIE

  {

  display: inline;

  f\loat: left;

  background: #FFF;

  }

  }

  Connect to the Widget from Adobe Exchange and grab the latest Spry Menu 2.0 (less problems).

  Widget Browser
  http://labs.Adobe.com/technologies/widgetbrowser/

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• Problem with the 2.0 (1.0) Spry menu bar re - CSS

  Hello:

  I'm having some trouble with a Spry (horizontal) 2.0 (1.0) menu bar I created.  Initially, I thought the problem was in what concerns the problems of rendering on IE 6.0, but the problem seems to be more general than that, and I came to believe that this has to do with the CSS created by the browser Widget and changed once imported in the Web page.  That's why I chose to post my question here rather than on the spry page.

  I leaned on the tutorial provided by David Powers (Bayside.css) and in addition any other documentation regarding the Spry UI bar menu.  The problem appeared as one of the 6 IE rendered page with a gap that is created when the menus appear, so push down the divs that appear below the page.

  However, through a laborious process of trial and error, my problem now seems to be that when I export the CSS generated by the browser widget to an external style sheet (the style sheet General governing the whole of the site), he comes into conflict with other CSS styles for links etc.  The end result is that all the padding, background colors, background images, and colors of text are lost.  As long as the CSS is in the head that this does not happen.

  My thought is that this must have to do with the problems of specificity, inheritance, etc.

  The site is available at the following ADDRESS: http://www.aclco.org/testing/index.html.  In its current form, all the CSS associated with the menu bar is located at the head of each page.  (see CSS below).

  My question is I can set up a separate style sheet for the menu bar horizontally and have these styles applied specifically (and only) in the menu bar my only alternative is to work through the rest of the General style sheet and the work by problems of specificity/inheritance - that may be the "best" practice , but it may create another 'cascading' [sic] problems elsewhere.

  Advice or suggestions or directed readings (which would point to a solution) that could be offered would be greatly appreciated.

  Steve Webster

  The horizontal CSS governing the menu bar is as follows: (currently the following CSS is embedded in the web page's head)
  

  < style type = "text/css" >

  / * - Start styles horizontal Spry Menu Widget 2.0 (1.0) menu bar-* /.

  
  / * BeginOAWidget_Instance_2141544: #MenuBar * /.
  / * Values for skinning a basic through presets menu. If the default settings are not sufficient, most count should be done in
  These rules, except for the images used to down or to the right pointing arrows, located in the SpryMenuBasic.css file
  
  They take the following classes of widget for layout of menu (located in a "Preset")
  . MenuBar - applies to all menu bars - default is a horizontal bar, all submenus are vertical - level 2 subs and beyond are drop down to the right.
  . MenuBarVertical - vertical main bar; All submenus are drop down to the right.
  
  You can also pass in extra classnames to set your desired top-level menu bar layout. Normally, they are defined by using a predefined setting.
  They apply only to the horizontal menu bars:
  MenuBarLeftShrink - the menu bar will be horizontally "shrinkwrapped" be just big enough to hold his items and left-aligned
  MenuBarRightShrink - as MenuBarLeftShrink, but right-aligned
  MenuBarFixedLeft - set to a specified width defined in rule "." MenuBarFixedLeft', and left-aligned.
  MenuBarFixedCentered - Fixed to a specified width defined in rule "." MenuBarFixedCentered',.
  and centered in its parent container.
  MenuBarFullwidth - expands to fill the width of the parent container.
  
  In general, all the rules specified in this file are prefixed by #MenuBar so that they don't apply to instances of the widget inserted along
  with the rules. This allows use of multiple MenuBarBasic widgets on the same page with different layouts. Due to limitations in IE6.
  There are a few rules where this was not possible. These rules are so noted in the comments.
  
  */

  {#MenuBar}
  background-color: transparent;
  do-family: Arial, Helvetica, without serif. / * Specify the fonts on the bar menu and submenu MenuItemContainer, so MenuItemContainer.
  MenuItem and MenuItemLabel
  at a given level all use the same definition for ems.
  Note that this means that the size is also inherited from the submenus of the child,
  so be careful when using other than relative sizes
  100% on the fonts submenu. */
  make-weight: normal;
  font size: 17px;
  make-style: normal;
  padding: 0;
  
  }
  / * ATTENTION: because ID + class selectors do not work correctly in IE6, but we want to restrict these rules to all this
  instance of widget, we used the concatenated string classnames to our selectors for the type of layout of the menu bar
  in this section. These have very low specificity, so be careful not to overstep accidentally. */

  . MenuBar br {/ * using only a class, so there same specificity that the "."} MenuBarFixedCentered br' rule bleow * /.
  display: none;
  }
  . {MenuBarLeftShrink}
  float: left; / * shrink the content, but also to float the menu bar * /.
  Width: auto;
  }
  . {MenuBarRightShrink}
  float: right; / * shrink the content, but also to float the menu bar * /.
  Width: auto;
  }
  . {MenuBarFixedLeft}
  float: left;
  Width: 80em;
  }
  . {MenuBarFixedCentered}
  float: none;
  Width: 80em;
  margin-left: auto;
  margin-right: auto;
  }
  . MenuBarFixedCentered br {}
  Clear: both;
  Display: block;
  }
  . MenuBarFixedCentered. Submenu br {}
  display: none;
  }
  . {MenuBarFullwidth}
  float: left;
  Width: 100%;
  }

  / * Top level bar small objects - these actually apply to all items and get substituted for the submenus level 1st or successive * /.
  #MenuBar. {MenuItemContainer}
  padding: 0px 0px 0px 0px;
  margin: 0;     / * Zero margin on the containers of items. The MenuItem is the active area of hover.
  For most elements, we have padding top or bottom or border only on MenuItem
  or a child so we keep all tiled submenu with elements.
  Definition of this 0 avoids the "dead zones" to hover. */
  }
  #MenuBar. {}, MenuItem
  padding: 10px 10px 10px 4px;
  background-color: #000088;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent - Dark.png);
  background-repeat: repeat-x;
  
  }
  #MenuBar. {MenuItemFirst}
  border-style: none none no none;
  }
  #MenuBar. {MenuItemLast}
  border-style: none none no none;
  }

  #MenuBar. MenuItem. {MenuItemLabel}
  text-align: center;
  line-height: 1.4em;
  color: #ffffff;
  background-color: transparent;
  padding: 0px 18px 0px 5px;
  Width: 10em;
  Width: auto;
  }
  . SpryIsIE6 #MenuBar. MenuItem. {MenuItemLabel}
  Width: 1em; / * Equivalent to min-width in modern browsers * /.
  }

  / * First level of submenu items * /.
  #MenuBar. Submenu. {}, MenuItem
  do-family: Arial, Helvetica, without serif.
  make-weight: bold;
  font size: 15px;
  make-style: normal;
  background-color: #000088;
  padding: 0px 2px 0px 0px;
  border-width: 0px;
  border color: #cccccc #cccccc #cccccc #cccccc.
  / * Border styles are replaced by first and last items * /.
  border-style: solid solid no solid;
  }
  #MenuBar. Submenu. {MenuItemFirst}
  border-style: none;
  padding: 0px;
  }
  #MenuBar. Submenu. MenuItemFirst. {MenuItemLabel}
  padding-top: 0px;
  }
  #MenuBar. Submenu. {MenuItemLast}
  border-style: none none no none;
  }
  #MenuBar. Submenu. MenuItemLast. {MenuItemLabel}
  padding-bottom: 10px;
  }
  #MenuBar. Submenu. MenuItem. {MenuItemLabel}
  text-align: left;
  line-height: 1em;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  Width: 240px;
  
  }

  / * Hover States for containers, objects and labels * /.
  #MenuBar. {MenuItemHover}
  background-color: #2E35A3;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent%20Light2.png);
  background-repeat: repeat-x;
  
  }

  #MenuBar. MenuItemWithSubMenu.MenuItemHover. {MenuItemLabel}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  #MenuBar. MenuItemHover. {MenuItemLabel}
  background-color: transparent;
  color: #ffffff;
  }
  #MenuBar. Submenu. {MenuItemHover}
  background-color: #2E35A3;
  
  }

  #MenuBar. Submenu. MenuItemHover. {MenuItemLabel}
  background-color: transparent;
  color: #ffffff;
  }
  / * The submenu - first-level submenus properties * /.
  #MenuBar. {SubMenuVisible}
  background-color: transparent;
  min-width: 0%;  / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.
  border-style: none none no none;
  }
  #MenuBar.MenuBar. SubMenuVisible {/ * menu bar horizontally for only * /}
  top: 100%;    / * 100% is at the bottom of menuItemContainer parent * /.
  left: 0px; / * "left" may need tuning according to borders or padding applied to the bar MenuItemContainer or MenuItem,.
  and your personal taste.
  0px align left drop-down list with the content of the MenuItemContainer area. Assuming you keep the margins 0
  on MenuItemContainer and on the parent MenuItem
  menu bar, which in fact equals the sum of padding-left MenuItemContainer & MenuItem align
  the drop-down menu to the left of the menu item label.*.
  z-index: 10;
  }
  #MenuBar.MenuBarVertical. {SubMenuVisible}
  Top: 0px;
  left: 100%;
  min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
  }
  / * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
  #MenuBar. MenuLevel1. {SubMenuVisible}
  background-color: transparent;
  min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
  Top: 0px;    / * If you want, you can move this down a smidge to separate the top item "submenu s of menubar.
  It is really necessary only for the submenu on the first point of MenuLevel1, or you can make it negative to make the submenu
  vertically 'centered' about his call to * /.
  left: 100%; / * If you want to move the submenu on the left to partially cover the point of his call, you can add a margin to the left with a
  negative value to this rule. Alternatively, if you use the elements of fixed width, you can change this value on the left
  to use px or ems to get the desired offset. */
  }
  / * IE6 rules - you can remove these if you do not want to support IE6 * /.

  / * Note about several classes in IE6.
  Some rules above use several class names to an element of selection, such as "hover" (MenuItemHover) and 'a a submenu' (MenuItemWithSubMenu).
  * give the selector '. MenuItemWithSubMenu.MenuItemHover'.
  * Unfortunately, IE6 does not support using mutiple classnames in a selector for an element. For a selector like '. foo.bar.baz', IE6 does not take into account
  * all but the final classname (here, ".baz") and defines the specificity in consequence, with only one of these classs as significant. To work around this problem
  * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate classnames for IE6, such as "MenuItemWithSubMenuHover".
  * Given that many of these necessary, the plugin does not generate additional classes for modern browsers, and we use the copies of CSS2 style class
  * syntax for that. Since IE6, both apply the rules where the
  * It should not and gets the specificity wrong too, we have rules of order carefully, then misapplied rule in IE6 can be overridden.
  * So we put first the multiple class rule. IE6 wrongly apply this rule.  We follow this with the single class rule that it would be
  * replace by mistake, by ensuring that the specificity of IE6 interpreted as is the same as the unique class selector, so the latter wins.
  * We then create a copy of the rule of multiple class, adding a "." SpryIsIE6' in the context of the class and to ensure that the specificity
  * the selector is high enough to beat the rule of single class in the case of "match of these two classes. We place the rule of IE6 at the end of the
  * block of css styling to make it easy to remove if you want to drop support for IE6.
  * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
  * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the need of IE conditional comments to these rules.
  */
  . SpryIsIE6 #MenuBar. MenuBarView. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  . SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
  background-color: transparent; / * expose this propeller separately * /.
  color: #ffffff;
  }
  . SpryIsIE6 #MenuBar. Submenu. Submenu / * selector IE6 * /}
  left margin:-0px; / * Offset at least part of a version of 'double upholstery' bug IE6 'double margin "* /.
  }

  
  / * EndOAWidget_Instance_2141544 * /.

  / * End Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles * /.

  
  < / style >

  The CSS for the site in general is reproduced below: (my belief is that it is a: link, a: visited, a: hover, a: active styles that may be in conflict).

  @charset "utf-8";

  
  {body
  Police: 100% Verdana, Arial, Helvetica, without serif.
  min-height: 0; / * this is necessary to overcome the "haslayout" bug found in Windows 7 in conjunction with IE8.  For more information see: URL - http://reference.sitepoint.com/css/haslayout.html * /
  margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
  padding: 0;
  text-align: center; / * This allows the centering of the container and overcomes an inherent bug in IE 5 * /.
  Color: #000000;
  list-style-image: none;
  background-color: #FCFCFC;
  
  }

  H1, h2, h3, h4, h5, h6 {}

  color: #000066;

  }

  a: link {}
  color: #151A 96.
  text-decoration: underline;
  }
  a: visited {}
  text-decoration: underline;
  color: #1B8DCD;
  }
  a: hover {}
  text-decoration: none;
  color: #F30A0A;
  }
  a: active {}
  text-decoration: underline;
  color: #151A 96.
  }

  #container {}
  Width: 960px;
  margin: 0 auto; / * margins (in conjunction with a width) auto Center the page * /.
  text-align: left; / * This setting overrides the text-align: center on the body element. */
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
  background-repeat: repeat-y;
  }

  #header {}
  padding: 0;  / * This filling is the alignment to the left of the items in the div that appear below. If an image is used in the #header instead of text, you can remove the padding. */
  
  Width: 960px;
  height: 332px;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
  background-repeat: repeat no.;
  }

  
  #header h1 {}
  
  margin-right: 0px; / * zero setting of the margin of the last element in the #header div tag will prevent the collapse of margin - inexplicable space between divs. If the div has a border around it, this isn't necessary, which also allows to avoid the collapse of margin * /.
  padding: 0; / * padding instead of margin will allow you to keep the edges of the div element * /.
  display: none;

  }

  #header img {}
  display: none;
  }

  {#Main_nav_contents}
  padding: 0;
  margin-top: 0px;
  height: 39px;
  Width: 950px;
  padding-top: 275px;
  padding-left: 39px;
  z index: 3;
  
  }

  {#MenuBarVertical}
  margin-bottom: 50px;
  padding-top: 50px;
  padding-bottom: 200px;
  padding-left: 15px;
  padding-right: 15px;
  
  }

  
  {.mainContent_left}
  margin: 0; / on this div element right margin creates the column on the right side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the content of #sidebar1 is complete. */
  padding-left: 30px;
  padding-right: 20px; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
  Width: 600px;
  float: left;
  }

  
  {.sidebar_right}
  float: right; / * because this element is floating, it takes a width * /.
  Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
  top of the margin: 30px;
  margin-left: 0;
  margin-right: 10px;
  font-size: 90%;
  
  }
  
  {.mainContent_right}
  margin-left: 10px;
  padding-left: 30px;
  padding-right: 20px;
  Width: 600px;
  float: right;
  
  }
  
  {.sidebar_left}
  float: left; / * because this element is floating, it takes a width * /.
  Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
  top of the margin: 30px;
  margin-left: 30px;
  margin-right: 0;
  overflow: hidden;
  font-size: 90%;
  
  }
  
  {.main_content_centered}
  Width: 650px;
  margin left: 155px;
  
  }

  {.main_content_centered_header}
  margin left: 75px;

  
  }

  {.sidebar_textbox}
  margin: 0px;
  Width: 260px;
  padding: 2px;
  }

  
  {.sidebar_textbox_header}

  Width: 255px;
  height: 58px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20he ader.png);

  }

  {.sidebar_textbox_background_middle}

  Width: 255px;
  padding-top: 12px;
  padding-bottom: 10px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Mi ddle.png);
  background-repeat: repeat-y;
  }

  {.sidebar_textbox_content}
  / * The width and filling are fixed as follows to reflect the quirks in the rendering of the browser while ensuring that the text is contained in the background of the text box * /.
  
  Width: 230px;
  padding-left: 20px;
  padding-right: 40px;
  }

  {.sidebar_textbox_footer}

  Width: 255px;
  height: 64px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Foo ter.png);

  }

  #issues_menu a: link {}
  color: #151A 96.
  text-decoration: none;
  make-weight: bold;
  
  }

  
  #issues_menu a: visited {}
  color: #151A 96.
  make-weight: bold;
  text-decoration: none;

  }

  #issues_menu a: hover {}
  color: #F30A0A;
  make-weight: bold;
  make-style: oblique;
  text-decoration: none;
  
  }

  #issues_menu a: active {}
  color: #151A 96.
  make-weight: bold;
  text-decoration: none;
  
  }

  {#archives}
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 0px;

  }

  {.landscape_textbox}
  Width: 500px;
  margin-right: 0px;
  margin left: 30px;
  padding-top: 35px;.
  padding-bottom: 25px;
  make-style: normal;
  make-weight: normal;

  }

  {.landscape_textbox_hdr}

  Width: 500px;
  height: 38px;
  margin: auto;
  padding: 0;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
  
  }

  {.landscape_textbox_middle}

  Width: auto;
  margin: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/landscapte%20Textbox%20 Middle.png);
  background-repeat: repeat-y;
  
  }

  {.landscape_textbox_content}

  Width: 450px;
  Padding: 25px;
  }

  {.landscape_textbox_ftr}

  Width: 500px;
  height: 44px;
  margin: auto;
  padding: 0;
  background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/Landscape%20Textbox%20F ooter.png);

  }

  
  #footer {}
  padding: 0; / * This filling is the alignment to the left of the items in the div that appear above him. */
  Width: 960px;
  height: 222px;
  background-image:
  URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
  background-repeat: repeat no.;
  
  }

  #footer p {}
  margin: 0px; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
  padding: 0px; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
  text-align: center;
  margin-left: 50px;
  right margin: 50px;
  padding: 10px;
  font size: small;
  }
  
  #footer h5 {}

  text-align: center;

  }

  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  left margin: 8px;
  }
  .fltlft {/ * this class can be used to float an element on your page to the left * /}
  float: left;
  right margin: 8px;
  }
  .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
  Clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }

  
  {.dropcap}
  display: block;
  float: left;
  line-height: 80%;
  font size: 250%;
  make-weight: bolder;
  color: #000066;
  Padding: .1em .03em 0 0;
  }

  {.red_arrows}
  list-style-position: outside;
  list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
  }

  {.blue_bullets}
  list-style-position: outside;
  list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
  }

  attention {}
  color: #F30A0A;
  font-size: x-large;
  do-family: Georgia, "Times New Roman", Times, serif;
  make-style: italic;
  Police-weight: 900;
  }
  
  {.attention_small}
  color: #F30A0A;
  font size: large;
  do-family: Georgia, "Times New Roman", Times, serif;
  make-style: italic;
  Police-weight: 900;
  }

  .table {}
  table-layout: fixed;
  
  }
  . Blue {}
  Color: #00F;
  }
  #container .mainContent_left p .blue {}
  color: #0303A 0;
  }

  Hello Steve

  Well, I checked your page in IE6 and it seems to work fine for me except that here seemes to be a little space between

• items that may be due to lack of support of .png?  In other words, if there is a little transparency on the edge of the chart?  Maybe it's more a shot in the water on my part!

  Now my suggestion to you would be to mark this thread as closed/replied and after again with just the link to the page and your question.  Short is sweet.

  Martin

• Css Spry menu bar is not compatible with IE7? or compatibility view in IE8?

  Well I did my site

  . Swimmerbuddy.com

  Problem: I used the bar of menus spry on a div tag I've got it works very well on several browser and so on... but hmm. I noticed that IE7 and only on compatibility view the IE8 does not work...

  It seems that in the drop down menus covered by the main content underneath...

  I started DWT, that I made myself. It's the TPL and css than controll the TPL and the spry menu bar.

  PLEASE HELP ME... Thank you

  IT'S THE TPL PAGE RUNS AWAY

  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
  <!-TemplateBeginEditable name = "doctitle"-->
  < title > Untitled Document < /title >
  <! - TemplateEndEditable - >
  "" < link href = "... / CSS/main.css ' rel ="stylesheet"type =" text/css"/ >
  <!-TemplateBeginEditable name = "head"->
  <! - TemplateEndEditable - >
  < style type = "text/css" >
  a: link {}
  Color: #000;
  text-decoration: none;
  }
  < / style >
  "" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >
  "" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >
  < style type = "text/css" >
  a: visited {}
  Color: #000;
  text-decoration: none;
  }
  a: hover {}
  text-decoration: none;
  Color: #000;
  }
  a: active {}
  text-decoration: none;
  }
  < / style >
  < / head >

  < body >
  < div id = 'wrapper' >
  < div id = "header" >
  "" "< div id ="networkicons"> < a href ="http://www.facebook.com/?ref=logo#! profile.php? id = 100001554936595"target ="_blank"" > < img src = ""... / _images/facebook.png "alt =" facebook.com "width ="45"height ="45"border ="0"title ="facebook.com"/ > < /a > < a href ="http://www.myspace.com/swimmerbuddy"TARGET ="_blank"" > < img src = ".." "" / _images/myspace.png "alt =" myspace.com"width ="44"height ="45"border ="0"title ="myspace.com"" / > < /a > < a href = "http://twitter.com/swimmerbuddy" TARGET = "_blank" > < img src = ".. "" / _images/twitter.png "alt =" twitter.com"width ="43"height ="45"border ="0"title ="twitter.com"" / > < /a > < a href = "http://www.youtube.com/swimmerbuddy1" TARGET = "_blank" > < img src = ".. "/ _images/youtube.png" alt = "youtube.com" width = "44" height = "45" border = "0" title = "youtube.com" / > < /a > < / div > "
  < div id = "buyNow1" >
  "" < p > < a href = "... / order_now.html" > < img src = "... / buynowbutton.png" alt = "bt1" width = "130" height = "25" border = "0" longdesc = "Order your Buddy swimmer today!" / > < /a > < /p >
  < / div >
  < / div >
  < div id = 'mainNav' >
  < ul id = "mainNavcontent" class = "MenuBarHorizontal" >
  "< li > < a href ="... / index.htm "> home < /a > < /li >"
  "< li > < a href ="... / swimmer.html "> boyfriend swimmer < /a > < /li >"
  "< li > < a href ="... / order_now.html "> order now < /a > < /li >"
  < li > < a href = "#" class = "MenuBarItemSubmenu" > Gallery < /a >
  < ul >
  "< li > < a href ="... / photo_gallery.html "> Photos < /a > < /li >"
  "< li > < a href ="... / video_gallery.html "> videos < /a > < /li >"
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > Products Zinger < /a >
  < ul >
  "< li > < a href ="http://www.winkyscoop.com/ "> Winky Scoop < /a > < /li >"
  "< li > < a href ="http://www.1800succeed.com/ "> Hypmovation < / a > < /li>"
  "< li > < a href ="http://www.1800succeed.org/ "> 1800SUCCEED < / a > < /li>"
  "< li > < a href ="http://www.zingerproducts.com "> Zinger store < /a > < /li >"
  < /ul >
  < /li >
  "< li > < a href ="... / about.html "> about us < /a > < /li >"
  "< li > < a href ="... / contact.html "> contact us < /a > < /li >"
  < /ul >
  < / div >
  <!-TemplateBeginEditable name = "mainContent"->
  < div id = "pageInfo" >
  < div id = "info_page" >
  < class p = "regionID" > region ID < /p >
  < hr class = "breaklinePageInfo" / >
  < class p 'breadcrum' = > & gt; "< a href ="... / index.htm "> Breadcrum < /a > < /p >"
  < / div >
  < div id = "mainContent" >
  < div id = "content" >
  < p > main content goes its < /p >
  < / div >
  < / div >
  < / div >
  <! - TemplateEndEditable - >
  <!-TemplateBeginEditable name = "buynow2"->
  "" < div id = "buyNow2" > < a href = "... / order_now.html" > < img src = "... / buynowbutton.png" width = "130" height = "25" / > < / has > < / div >
  <! - TemplateEndEditable - >
  < div id = "footer" >
  < div id = "footertext" >
  < class p = "footertextclass" > Copyright © 2010 SwimmerBuddy.com. All rights reserved. "SwimmerBuddy.com part of < a href ="http://www.zingerproducts.com"class ="footertextclass"> Products Zinger < /a >." Designated brands and trademarks are the property of their respective owners. This page was last updated on September 28,2010. Swimmer Buddy - Pattent pending 2010 < /p >
  < / div >
  < div id = "footerlinks" >
  "" < p classs = "footerlinkspacing" > < span class = "footerlinkspacing" > < a href = "... / Disclaimer.html" "> WARNING < /a > < a href ="... / terms.html "> terms of Service < /a > < a href ="... / contact.html "> contact us < /a > < / span >"
  < / div >
  < / div >
  < / div >
  < script type = "text/javascript" >
  var MenuBar1 = new Spry.Widget.MenuBar ("mainNavcontent", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
  < /script >
  < / body >
  < / html >

  
  IT'S THE MAIN. CSS

  @charset "utf-8";
  {#networkicons}
  height: 50px;
  Width: 200px;
  top of the margin: 160px;
  margin left: 15px;
  position: absolute;
  }

  {#wrapper}
  Width: 933px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  left margin: auto;
  text-align: left;
  position: relative;
  }
  {#mainNav}
  text-align: center;
  position: relative;
  margin-right: auto;
  left margin: auto;
  Width: 934px;
  padding-bottom: 15px;
  Clear: both;
  overflow: visible;
  }
  {#navwrapper}
  Width: 935px;
  margin-right: auto;
  left margin: auto;
  }

  #mainContent {}
  Width: 910px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  padding-bottom: 20px;
  padding-top: 20px;
  }
  #content {}
  Width: 910px;
  position: relative;
  }
  #wrapper #footer #footerlinks p .footerlinkspacing a {}
  right margin: 20px;
  }

  #footer {}
  Width: 930px;
  background-color: #fff;
  position: relative;
  top of the margin: 5px;
  text-align: center;
  Color: #000;
  padding-bottom: 10px;
  margin-bottom: 15px;
  }
  #header {}
  Width: 930px;
  height: 209px;
  background-image: url (.. / _images/header.jpg);
  background-repeat: no-repeat;
  }
  {#buyNow1}
  height: 25px;
  Width: 140px;
  float: right;
  do-family: Arial, Helvetica, without serif.
  make-weight: bold;
  text-align: center;
  background-repeat: no-repeat;
  color: #666;
  padding: 5px;
  position: absolute;
  top: 160px;
  right: 150px;
  }
  {.buyNow1}
  color: #666;
  }
  #wrapper #pageInfo #info_page .breadcrum {}
  color: #003;
  }
  #wrapper #pageInfo #info_page .breadcrum a {}
  color: #003;
  }

  
  HTML, body {}
  margin: 0px;
  padding: 0px;
  }
  {#buyNow2}
  height: 25px;
  Width: 130px;
  float: right;
  do-family: Arial, Helvetica, without serif.
  make-weight: bold;
  text-align: center;
  padding: 5px;
  position: relative;
  }
  #wrapper #buyNow2 a {img
  position: absolute;
  top:-30px;
  right: 50px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  }

  {#pageInfo}
  Width: 930px;
  background-image: url (.. / _images/pageinfobackground.jpg);
  background-repeat: repeat-x;
  background-color: #FFF;
  text-align: left;
  padding-bottom: 15px;
  top of the margin: 18px;
  position: relative;
  overflow: visible;
  visibility: visible;
  }
  #wrapper #mainNav #mainNavcontent {}
  position: absolute;
  left: 0px;
  Width: 930px;
  }
  {.regionID}
  do-size: 2em;
  make-weight: bold;
  color: #FFC;
  margin-top: 1em;
  margin-bottom: 0em;
  text-align: left;
  margin-left: 5px;
  }
  {.breaklinePageInfo}
  top of the margin: 0.5em.
  color: #FAFEAB;
  }
  {.breadcrum}
  color: #003;
  font size: 1.1em;
  make-weight: bold;
  text-decoration: underline;
  margin-top :-0 .2em;
  margin left: 15px;
  }
  {#breadcrum}
  make-weight: bold;
  color: #003;
  }

  {#footertext}
  Width: 910px;
  font size: 0.6em;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  }
  {#footerlinks}
  Width: 930px;
  font size: 0.7em;
  make-weight: bold;
  do-family: "Lucida Sans Unicode", "Lucida Grande", without serif.
  Color: #000;
  position: relative;
  margin-top: 10px;
  margin-bottom: 5px;
  }
  {.footertextclass}
  Color: #000;
  }
  {.footerlinkspacing}
  margin-top :-0 .5em;
  color: black;
  height: 10px;
  make-style: normal;
  line-height: normal;
  do-variant: normal;
  letter-spacing: normal;
  }
  {p}
  margin: 0px;
  padding: 0px;
  }

  {body
  text-align: center;
  top of the margin: 5px;
  background-color: #073e78;
  background-image: url (.. / _images/background.jpg);
  background-repeat: repeat-x;
  background-attachment: scroll;
  do-size: 100%;
  }

  IT's THE list drop-down menu.css

  @charset "UTF-8";

  / * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

  The AVAILABLE INFORMATION: Describes the box model, positioning, the order

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

  / * The outermost container for the menu bar, an area of width auto without margin or padding * /.
  UL. MenuBarHorizontal
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  cursor: default;
  Width: auto;
  }
  / The menu bar value active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html * /.
  UL. MenuBarActive
  {
  z-index: 1000;
  }
  / * Menu item containers, position of children relative to this container and are a fixed width * /.
  UL. MenuBarHorizontal li
  {
  margin: 0px;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  position: static;
  text-align: center;
  cursor: pointer;
  Width: 132.8px;
  float: left;
  overflow: visible;
  visibility: visible;
  }
  / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
  UL. MenuBarHorizontal ul
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  z index: 1020;
  cursor: default;
  Width: 132.8px;
  position: absolute;
  left:-1000em;
  }
  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
  {
  left: auto;
  }
  / * Container of menu items are same fixed width parent * /.
  UL. MenuBarHorizontal ul li
  {
  Width: 8.2em;
  }
  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
  UL. MenuBarHorizontal ul ul
  {
  position: absolute;
  margin:-5% 0 0 95%;
  }
  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
  UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
  {
  left: auto;
  top: 0;
  }

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

  INFORMATION DESIGN: Describes the set of colors, borders, fonts

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

  / * Submenu containers have borders on all sides * /.
  UL. MenuBarHorizontal ul
  {
  border: #333;
  color: #FFF;
  }
  / * Menu items are a light grey 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;
  background-image: url (.. /_images/bar-Top.png);
  background-repeat: no-repeat;
  }
  / Components menu that have mouse over or focus have a blue background and white text * /.
  UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
  {
  color: #003;
  background-image: url (.. /_images/bar-Bottom.png);
  }
  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
  UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
  {
  color: #003;
  background-image: url (.. /_images/bar-Bottom.png);
  background-position: bottom;
  }

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

  Submenu INDICATION: styles if there is a submenu in a given category

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

  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
  UL. MenuBarHorizontal a.MenuBarItemSubmenu
  {
  background-image: url (.. /_images/bar-topsub.png);
  background-repeat: no-repeat;
  background-position: right top;
  }
  / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
  UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
  {
  background-image: url (SpryMenuBarRight.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  }
  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
  UL. MenuBarHorizontal a.MenuBarItemSubmenuHover
  {
  background-image: url (.. /_images/bar-topsubhover.png);
  background-repeat: no-repeat;
  background-position: right;
  }
  / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
  UL. MenuBarHorizontal ul a.MenuBarItemSubmenuHover
  {
  background-image: url (SpryMenuBarDownHover.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  }

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

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

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

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

  There are too many mods in your sections for me to go through.

  I recommend you first read this http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one

  Then, start with an original sections based on these rules.

  Other useful links can be found here http://www.adobe.com/devnet/dreamweaver/spry.html and go to design application to the Spry widgets

• CSS "fixed" position question

  I use the CSS position: fixed; styling for my nav bar and I have problems with it.  Fixed is relative to the size of the browser, which is my problem, but I fixed need so that it remains in position when the page is scrolled.  I wanted the navigation bar to be at the center of my screen, I put on the left: 50%.  But what I've found, is that this starts the div nav at 50% and if the nav div is 500px wide and a laptop is 960px, then the navigation bar is not the case near the Center.  I tried left: 50%-250px; but he threw up.  Is it possible to combine the absolute and fixed values so that I can place the nav bar exactly where I want and always keep up, as the page scrolls?

  http://gtworkspace.com/septemberMisc/

  I don't know what I'm missing, but it does not seem to count how many div, I put this in, he always wants to go with the width of the page.

  Your structure is good, but instead of using the right: 0, remove and make margin-left: 460px;

• How to move the menu bar?

  I want to put my bar menu next to the address bar. The address bar is not 80% of the space on this line. PLENTY of room for the menu bar. I hate watching this big chunk of wasted space at the top of my screen where the menu bar and the bar above the menu bar to sit. remove the menus bar appearance of I'm looking for, but it does not use the bar of menus with passes through several clicks. Not convenient.

  Just to be clear. I do not see my office at the top of the screen. It's just the unused space.

  See this support article.
  
  https://support.Mozilla.org/en-us/KB/customize-Firefox-controls-buttons-and-toolbars

  IMO, the best thing to do would be to move all the items in the Navigation bar (where the address bar / URL Bar is located), one at a time and then hide the navigation bar.

  Another thing to consider is to use the Compact Menu extension, so that you can hide the Menu bar and have access to all these menus via a toolbar button. https://addons.Mozilla.org/en-us/Firefox/addon/compact-menu-2/

  And if you hide this toolbar button in the Palette, you can use the ALT key to open the 'menu' bar in a menu drop-down in the upper left corner of the browser window. No need for the menu bar or even a button in toolbar to take place of the user interface.

  I did my own toolbar a configuration of the user interface from the time of Firefox 1.0, I have even some of my favorites in a folder sitting to the right of the address bar. Drop down bookmarks FRO this folder as the 'links' over flow in Internet Explorer. Firefox is so configurable and extensible, the only limit is the imagination of the user!

• Contrast of the menu bar is sick. How can I make it look more vivid?

  How can I increase the contrast for the Menu bar?

  Maybe see if you can find a solid character that works for you.

  • Personas for Firefox | Gallery: http://www.getpersonas.com/en-US/gallery/Solid

• Model Spry menu bar links does not

  I created a site that uses a spry menu bar located in a template file. The css seems to be fine. While the General links on the pages work, links contained in the spry menu bar works either in the preview or download. The pages are set up with apdiv of positioning. The menu bar of BPD is stacked above a picture or a video on the typical page. My site at http://designideation.com/index.html

  As I have spent a lot of time trying to solve this problem, any help would be greatly appreciated.

  -Thank you, DG

  The problem is on the lines 68-83. A: active just to have the colors changed.

  GRAMPS

• CS4 spry menu bar css rule definitions

  Need help, can't see the tree because of the forest.
  Is there a list out there everywhere where will tell us exactly what each css effects definition rule that happens for spry menu bars?
  Thank you
  Marshal

  "MSudrala" wrote in message news:[email protected]...
  > Help, can not see the tree because of the forest.
  > Is there a list out there everywhere where will tell us exactly what each css effects definition rule that happens for spry menu bars?
  > Thank you,
  > Marshal

  Marshal.

  Try here:

  http://labs.Adobe.com/technologies/Spry/articles/menu_bar/index.html

  --
  Ken Ford
  Adobe Community Expert - Dreamweaver/ColdFusion
  Adobe Certified Expert - Dreamweaver CS3
  Adobe Certified Expert - ColdFusion 8
  Fordwebs, LLC
  http://www.fordwebs.com
  http://www.cfnoob.com

• Is there a fix for when the Chinese characters appear to "take back" the menu bar (s)?

  Periodically, I notice that the menu bar was "taken over" by these characters, making the navigation and use of the functions difficult or impossible. Close the program and then by reopening sometimes solves this problem for a while, but then it happens again. I think I have the latest version of 38.2.0.

  It could be anything McAfee... It was a very problematic piece of software for a few years. See https://wiki.mozilla.org/Thunderbird: test: Antivirus_Related_Performance_Issues #McAfee