Vertical Spry Menu hiding behind content

Similar Questions

• Spry Menu hiding behind embedded Youtube video

  I'm crossing a problem I've never seen before and I hope someone can help me understand something. Here is a link to a website that I created for a Mexican restaurant.

  http://www.margaritascafe.com

  It seems the menu spry that see you shows perfectly in firefox, chrome and safari, but in Internet Explorer, the 'Contact' drop-down menu is hidden and the 'Catering' drop is partially hidden. Is that what I can do to make sure that it is not hidden behind the film?

  Here's my code for the index page where the film is integrated:

  < ! 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/Main.dwt ' codeOutsideHTMLIsLocked = 'false'->

  < head >

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

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

  < title > Mexican food | East Meadow, NY 11554 < /title >

  < name meta = "keywords" content = "Mexican restaurant, margarita" / >

  < name meta = "description" content = "Mexican food and happy hour, ideally located in the Plaza East Meadow shopping center" / >

  <! - InstanceEndEditable - >

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

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

  < script src = "Scripts/swfobject_modified.js" type = "text/javascript" > < / script > "

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

  <!-InstanceBeginEditable name = "head"->

  <! - InstanceEndEditable - >

  < / head >

  < body >

  < div id = 'wrapper' >

  < div id = "header" >

  < object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "1000" height = "150" id = 'FlashID' tabindex = "10" title = "Header of Marguerite 2 coffee" > "

  < param name = "movie" value = "Flash_movies/Margaritas header 5.swf" / >

  < param name = "quality" value = "high" / >

  < param name = "wmode" value = "opaque" / >

  < param name = "swfversion' value ="9.0.45.0"/ >

  <!-this param tag prompts users with Flash Player 6.0 r65 or later to download the latest version of Flash Player. Delete it if you do not want users to display the prompt. ->

  < param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "

  <!-next object tag is for non - IE browsers. Then he hide from IE using IECC. ->

  <!-[if! IE] >->

  < object type = "application/x-shockwave-flash" data = "Flash_movies/Margaritas header 5.swf" width = "1000" height = "150" >

  <!-<! [endif]-->

  < param name = "quality" value = "high" / >

  < param name = "wmode" value = "opaque" / >

  < param name = "swfversion' value ="9.0.45.0"/ >

  < param name = "expressinstall" value = "Scripts/expressInstall.swf" / > "

  <!-the browser displays the following alternative content for users of Flash Player 6.0 and higher. ->

  < div >

  < h4 > the content of this page requires a newer version of Adobe Flash Player. < / h4 >

  " < p > < a href =" http://www.Adobe.com/go/getflashplayer_fr "> < img src = ' http://www.Adobe.com/images/shared/download_buttons/get_flash_player.gif "alt = 'Get Adobe Flash player' width = '112' height ="33"/ > < /a > < /p > "

  < / div >

  <!-[if! IE] >->

  < / object >

  <!-<! [endif]-->

  < / object >

  < / div >

  < div id = "navigation" >

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

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

  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Menus

  < ul >

  < li > < a href = "menus/lunch.html ' > lunch < /a > < /li >" "

  < li > < a href = "menus/dinner.html ' > dinner < /a > < /li >" "

  < li > < a href = "menus/cocktail.html ' > Cocktail < /a > < /li >" "

  < li > < a href = "menus/takeout.html" > Take Out < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a href = "margaritas_gallery/index.html" > Photos < /a > < /li > ""

  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Catering

  < ul >

  < li > < a href = "why_choose_us.html" > why choose us? ' " < /a > < /li >

  < li > < a href = "package_1.html"> 1 package < /a > < /li >

  < li > < a href = "package_2.html" > package 2 < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a href = "reservations.html" > book < /a > < /li > ""

  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Contact

  < ul >

  < li > < a href = "facebook.html" > Facebook < /a > < /li > ""

  < li > < a href = "twitter.html" > Twitter < /a > < /li > ""

  < li > < a href = "youtube.html" > Youtube < /a > < /li > ""

  < li > < a href = "merchant_circle.html" > merchant circle < /a > < /li > ""

  < li > < a href = "directions.html" > Directions < /a > < /li > ""

  < li > < a href = "about_us.html" > about us < /a > < /li > "

  < /ul >

  < /li >

  < li > < a href = "reviews.html" > feedback < /a > < /li > ""

  < li > < a href = "specials.html" > Specials < /a > < /li > ""

  < /ul >

  < / div >

  < div id = "sidebar" > <!-InstanceBeginEditable name = "Sidebar"->

  < p > < span id = "name" > Café Margarita and the Cantina </span >, ideally located on the Street Front 1868 in East Meadow, NY is quickly becoming the place to be, on Long Island. A sumptuous mix of cuisine Mexican classic as well as new and interesting dishes makes your memorable culinary experience will tempt you to repeat immediately. < br / >

  < /p >

  < p > come join us in the East Meadow Plaza and do one or more of our flavored margaritas or cocktails, so sit back and watch as we right guacamole at your table and your taste! Spend your lunch hour or evening, try one of our delicious and unique Fajitas dinners at our seafood plateau. Don't you worry all the time, our service friendly and efficient staff will make you eat almost immediately! < /p >

  < p > < span id = "name" > Café Margarita and Cantina </span > is the place to be after work on Friday. Our new TGIF Happy Hour offers half price of ice cold beers and a Mexican Buffet hot free. Our Live Mariachi band will perform Friday and Saturday for your entertainment pleasure. < /p >

  < p > almost every night with us is a fiesta of savings!  Check here, twitter, facebook or by phone for one of our daily specials. There is no other place on Long Island, where you can dine elegantly and save! < /p >

  < p > having a party soon? Do it with us! In our restaurant or catering at the location of your choice, we will make your party unique, fun and maintenance of your guests for years to come. < /p >

  < p > so live a little! Come down to coffee of Marguerite and the Cantina or call the 516-745-0033 to < a href = "reservations.html" > make a reservation < /a >. You'll be glad you did! < /p >

  <! - InstanceEndEditable - > < / div >

  < div id = "maincontent" > <!-InstanceBeginEditable name = "main content"->

  " < object width ="560"height ="315"> < param name ="movie"value =" http://www.YouTube.com/v/W6uR---1_b4?version=3 & hl = en_US & rel = 0 "> < / param > < param name ="allowFullScreen"value ="true"> < / param > < param name ="allowscriptaccess"value ="always"> < / param > < embed src = ' http://www.YouTube.com/v/W6uR---1_b4?version=3 & amp; hl = en_US & amp; rel = 0 & AutoPlay = 1 "type =" application/x-shockwave-flash"width ="560"height ="315"allowscriptaccess ="always"allowfullscreen ="true"> < / embed > < / object > <! - InstanceEndEditable - > < / div > "

  < div id = "clearboth" > < / div >

  < div id = "page_container" > < / div >

  < div id = "address" > Margarita coffee & amp; Cantina | 1868 front street, east meadow, ny 11554 < / div >

  " < div id ="footer"> < a href =" http://www.Facebook.com/margaritascafe "target ="_blank"> < img src ="png-gif-jpg/Margaritas Facebook logo.png"alt ="Facebook"width ="40"height ="25"align ="absmiddle"" / > < /a > < a href = " http://twitter.com/#!" / MargaritasCafe "target ="_blank"> < img src ="png-gif-jpg/Margaritas Twitter logo.png"alt ="Logo of Twitter"width ="40"height ="25"align ="absmiddle"" / > < /a > < a href = " http://www.merchantcircle.com/Business/Margaritas.Cafe.516-745-0033 " target = "_blank" > < img src = "png-gif-jpg/merchantcircle_mini.png" alt = "Logo of merchant circle" width = "63" height = "25" align = "absmiddle" / > < /a > powered by Kemetic Multimedia & copy; "" Coffee of 2011 Margarita < / div >

  < / div >

  < script type = "text/javascript" >

  <!--

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

  ->

  < /script >

  < / body >

  <! - InstanceEnd - > < / html >

  Thank you in advance for your help!

  I found this article and I was able to solve the problem:

  http://www.vsellis.com/code/fix-dropdown-menus-that-fall-behind-embeded-video/

  two lines of code took care of everything. See the article for more details

• Horizontal Spry Menu pushing my content to the right

  Hello everyone. I am very new to Dreamweaver and so far I love the ease of use and how much I can do with it. However, I recently tried to add a spry menu bar - horizontally, but he pushed my content to the right of the page. The web page is www.iowapva.org

  Any help in getting this square far is greatly appreciated. I want to learn so if there is something false needs corrected or Advisor on fix the site, I'm open.

  Thank you

  Brad

  Add or change the following

  #page {}

  Clear: both;

  }

  UL. MenuBarHorizontal ul {}

  position: absolute;

  }

  Personally, I would add these just above the tag as in

• connect horizontal vertical spry menu

  Hello

  I'm a beginner, so maybe that's a stupid question... But here we go

  Is it possible to 'connect' bars of horizontal and vertical menus between them?

  I'll try to give an example...

  The horizontal (main menu, in the header of the page) is:

  Article 1 article 2 article 3 article 4

  (void 1.1)      (as 2.1)

  (in 1.2)      (under 2.2)

  Now, when you click on one of the links, say "Sub 2.2", I would like to have the sidebar show this:

  Point 2

  void 2.1

  void 2.2

  subsub 2.2.1

  SubSub 2.2.2

  SubSub 2.2.3

  void 2.3

  ...

  Where 'Item 2' remains fixed as a title, and submarines form a menu accordion revealing sub-du submenu (you can open and jump on an another auxiliary by clicking on it)

  Now, the easy way to do this is to create a separate page with a menu accordion separated in the sidebar for each of the 'Elements '. But this means that when I change something (add a submenu, change its name, change a link, etc.), I needed to change the pages separate as well.

  Is there a not too complicated way of linking them together? So that the point 2 in the sidebar is not just a Word only a menu and the menu at the bottom. not separated, but refer to the horizontal menu located in the header? In other words, I would like to create a single list with 'Everything', 'Subs' and 'Sub subs"that I can see and use them in places and formats spry.

  Thanks in advance!

  Tom

  Short answer, no way to do this with Spry menus.  Spry is also dead.  Adobe abandons this concept in 2012 and removed Spry in DW CC because he lost it utility and is not mobile friendly.

  You might want to consider a different approach to navigation as a jQuery Mega Menu.

  5 best jQuery CSS3 Mega navigation Menus | Marie Claude Chandonnet

  Nancy O.

• Vertical Spry menu bar does not work in IE 9

  Hello

  I hope someone can help me with this problem.

  This is the first time I made a website, but there are still some problems, especially with IE (when I use other browsers there no problem).

  The site I made is www.verdoncklaarne.be. When you click on the Menu to go to the submenu, submenu tis opens in leftcorner of the window.

  Is this a common problem? I'm still not fix.

  I hope someone can help me! (If you need more information just )

  Welcome,

  Ruth

  (Sorry my English)

  Hi Ruth,.

  usually you/we need to copy these files in a subdirectory of your / our web page, which is called "SpryAssets." BTW, you made reference to this directory in your source code, see here:

  .

  Hans G.

• Spry menu drop down behind youtube player please help

  Hello

  I have a vertical spry menu bar next to a youtube player on my site.  Fire Fox PC and IE the menu cache always behind the player.

  I have the reader in a separate div in the menu.  I tried to give the menu div a higher value of the hierarchy of the three and the reader div 1.

  When I tried to open the page after that I got an error before she would bring the screen to the top.

  I also tried to give the youtube html code a hierarchy within the div tag and once again got the error message.

  I also tried to make the position of 'visible', without success.

  Thank you for your time and help

  Kate Terry

  http://www.romanceinthebackseat.com

  "Wmode" is a setting of the Flash which is short for "window mode". You need to reset "allowScriptAccess" whatever the value was before you changed it to transparent and then add the wmode parameter. Here's how:

  1. In Dreamweaver design view, select the placeholder of the Flash.
  2. If you have Dreamweaver CS4, in the property inspector, change the contextual menu wmode transparent.
  3. For all other versions of Dreamweaver, click the settings button.
     1. In the settings dialog box, click Add (+) to insert another parameter.
     2. In the parameter column, enter wmode and press Tab.
     3. In the value column, enter transparent
     4. Click OK to close the settings dialog box.

  That should do it.

  Best - Joe

  Joseph Lowery

  Author, Dreamweaver CS4 Bible

• I need assistance with my BAR SPRY MENU *.

  Hello world

  I installed a Horizontal and Vertical Spry menu bar.
  It looks great, but I can't understand this.
  When I click on one of the links on the bars,

  my text jumps to the right

  Is someone can you please tell me how I can do

  the text to stop jumping.

  My test page is located on the link below:

  http://www.tonyasdynamicdesigns.com/gregs-pages/index.html

  Thank you very much for your help,
  Tonya

  Your text is not jumping to the right, it is such balance as specified by the attribute in your main style.css on line 409. (the selector a: active)

  Remove text-align: center;

• How get rid of the line tight to the left side of a menu vertical spry?

  Hello

  I created a bar of menus vertical spry. Everything works but there is a line like this [around the left side of the menu. Does anyone know how to get rid of this?

  Thank you!

  Line 73 in your Spry css calls for a border

  UL. MenuBarVertical a {}

      border : 1px solid #ccc;

  }

  Delete the rule or replace the #fff #ccc

• Spry vertical navigation menu under

  I'm using the vertical navigation menu Spry, how to make the color of the different submenu in the main menu?

  Add the following style rule in your document, adjust the values according to

  UL. MenuBarHorizontal ul a {}
  background-color: purple;
  color: pink;
  }

  GRAMPS

  Sorry,

  UL. MenuBarVertical ul a {}
  background-color: purple;
  color: pink;
  }

  Post edited by: altruistic gramps

• Menu vertical Spry - can't get drop downs to work

  Hello

  I feel like a "retarded", but I can't get down to work at all.

  , I created a new page and insert a spry menu bar and the drop downs do not work. (They leave when you hover over them). http://www.mogulmarketing.com/test.asp

  At a customer site, I did a bit of style, which worked fine, but now the downs show drop all the time. What should I change in the CSS?

  http://67.199.64.241/indexspry.asp

  I want this site to be accessible; I'd love to work. The site is classic ASP / javascript.

  Thank you very much!!!

  Here's the SpryMenuBarVertical.css:

  @charset "UTF-8";

  / * SpryMenuBarVertical.css - 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, a box of width fixed without margin or padding * /.
  UL. MenuBarVertical
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  cursor: default;
  Width: 14em;
  }
  / * 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 the children relative to this container and are the same fixed width parent * /.
  UL. MenuBarVertical li
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  do-size: 100%;
  position: relative;
  text-align: left;
  cursor: pointer;
  Width: 14em;
  }
  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
  UL. MenuBarVertical ul
  {
  margin: 0 0 0 100%;
  list-style-type: none;
  do-size: 100%;
  position: absolute;
  z index: 1020;
  cursor: default;
  Width: 14.2em;
  / * left:-1000em; */
  top: 0;
  }
  / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
  UL. MenuBarVertical ul. MenuBarSubmenuVisible
  {
  left: 0;
  }
  / * Container of menu items are same fixed width parent * /.
  UL. MenuBarVertical ul li
  {
  Width: 14.2em;
  }

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

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

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

  / * Outermost menu container has borders on all sides * /.
  UL. MenuBarVertical
  {
  border: 1px solid #CCC;
  }
  / * Submenu containers have borders on all sides * /.
  UL. MenuBarVertical ul
  {
  border: 1px solid #CCC;
  }
  UL. MenuBarVertical a
  {
  display: block;
  cursor: pointer;
  background-color: #4e2029;
  Padding: 0.5em 0.75em;
  color: #fff;
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-color: #FFF;
  border-bottom-width: thin;
  }
  / Components menu that have mouse over or focus have a blue background and white text * /.
  UL. MenuBarVertical a: hover, ul. MenuBarVertical a: focus
  {
  background-color: #d5647c;
  color: #FFF;
  }
  / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
  UL. MenuBarVertical a.MenuBarItemHover, ul. MenuBarVertical a.MenuBarItemSubmenuHover, ul. MenuBarVertical a.MenuBarSubmenuVisible
  {
  background-color: #d5647c;
  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. MenuBarVertical 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. MenuBarVertical 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. MenuBarVertical 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. MenuBarVertical li. MenuBarItemIE
  {
  display: inline;
  f\loat: left;
  Background: #FFF;
  }
  }

  I always keep my details open when "set files" because I work with the radio, most of the time. If something is not successfully to the server you will see first there.

  I'm glad that you have built it.

• Problem of Menu Vertical SPRY (IE Hack?)

  I'm having a problem with the menu bar vertical Spry. The one I created works fine in Firefox and Safari, but not in Internet Explorer. In IE, containers of submenu Open AT THE TOP of the bar menu and not next to the selected menu item. I don't know how to fix it. Any help is appreciated.
  
  You can see the problem here (view in IE and ride on one of the menu items in the middle or bottom of the menu bar part): http://southerncharmgifts.net/thesouthernsportsman/html/ssarchery.html
  

  I tried all sorts of things all day today to solve the problem. The only thing that worked was totally recreate the vertical menu from scratch, with all new CSS. I do not know. The Spry menus are strange and buggy, he sews. I had problems with a previous site when I tried to use Spry. If all goes well, they work the bugs. Thanks again for your help.

  Quote:
  Posted by: SnakEyez02
  The problem you had before could have been due to the absolute layers and containers. I know Murray usually shows that these links about why staying away from absolute positioning can be a bad thing:

  http://www.great-Web-sights.com/g_layer-overlap.asp
  http://www.great-Web-sights.com/g_layersdemo.asp

  I did a quick remake of the site and did not generate these errors. I was always using layers, but I decided to the top of your background image and used expandable images for the side with the top and bottom as their own slices with a container in the middle. Sorry I don't have a specific change this answer, but there seems to be something with these layers.

• Menu Vertical Spry, Firefox, Focus Indication problem

  Hi all
  
  I use Dreamweaver CS4 to create a portfolio for my work site and ran into a problem when my Menu from Navigation Vertical Spry out testing in Firefox.
  
  If I click on a navigation item a red dotted border appears all about the element and ruins / the appearance of the site. Here a link to the problem (problem occurs by clicking, not only hovering).
  
  The little image icon 'lock' I like the last item in the menu has strangely affected summer as well. Who seems to have not only the red dotted border, but a black frame around the image. I'm not sure of what could be the cause, but it may be unrelated to the red dotted border. You can put pictures in a Spry Menu?
  
  I did some research here and this could be caused by problems with discussion tab keyboard with Firefox? It works fine in Safari and I have not yet tested under IE. I'm really new to this and hope someone here can help me. Thank you in advance!
  
  PS - If you can get detailed instructions would be a real help. I'm new on this and have basic skills CSS/HTML and no knowledge in Javascript at all.
  
  Sincerely,
  
  -Nick Breslow

  nbreslow wrote:
  > Hi all,
  >
  > I use Dreamweaver CS4 to create a portfolio for my work site and ran into
  > a problem during the test of my Navigation Vertical Spry out in Firefox Menu.
  >
  > If I click on a navigation item a red dotted border appears around the
  > element and ruins / the appearance of the site.
  > http://www.nicholasbreslow.com/sample1/ is a link to the problem (problem
  (> occurs by clicking on, not just hover).

  For me in Firefox 3, it occurs when you move your menu items.

  >
  > The little image icon 'lock' I have as the last item in the menu has been
  > strangely affected as well. That seems to have not only the dotted red box
  > but a black frame around the image. I'm not sure of what could be the cause
  > but it could be unrelated to the red dotted border. You can put images in a
  > Spry menu?

  What you see is a function of accessibility called a preview and is present to provide guidance on where they run when they tab around the page in people who use their keyboards. Removing it will remove any benefit those users and will make your page less accessible. You should be able to remove it by setting the property of outline of your menu to outline items: No. Using something similar to the following in your CSS:
  UL. MenuBarVertical a {outline: none ;}}

  Images when there is associated by default have a border around them, you can disable that line in specifically defining border against zero is directly on the tag img border = '0' or in the style of the journal:
  UL. MenuBarVertical an img {border: none ;}}

  > PS - If you are detailed instructions would be a real help. I'm new on this
  > and have basic skills CSS/HTML and no knowledge in Javascript at all.

  In addition, you should ask Spry in the Spry forum related issues:
  http://www.Adobe.com/cfusion/webforums/Forum/categories.cfm?forumid=72&CATID=602

  --
  Danilo Micen
  | http://blog.Extensioneering.com/
  | Extensioneer WebAssist
  | Adobe Community Expert

• Menu fall behind the image.

  http://72.29.76.51/~Organica/index.html

  If you scroll over the tab of the grocery STORE, you will see that drop-down the menu hides behind the image below. Advice on getting the menu to appear in front of the image? Here is the 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/main.dwt ' codeOutsideHTMLIsLocked = 'false'->

  < head >

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

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

  < title > Organica Natural Foods | Northvale, New Jersey < /title >

  " < script type =" text/javascript"src =" http://AJAX.googleapis.com/AJAX/libs/jQuery/1.4.2/jQuery.min.js "> < / script > .

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

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

  * Ultimate Fade in slideshow v2.0 - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

  * This notice MUST stay intact for legal use

  * Visit dynamic road at http://www.dynamicdrive.com/ for this script and more than 100 s

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

  < /script >

  < script type = "text/javascript" >

  var mygallery = new fadeSlideShow({)

  wrapperid: "fadeshow1", //ID of white DIV on the page of House slideshow

  Dimensions: 600 (493) and //width/height of the gallery in pixels. Should take into account the dimensions of the largest image

  Demo:]

  [' media/slide_2.jpg', ' ', ' ', ""],

  [' media/slide_1.jpg', ' ', ' ', ""],

  <-no trailing comma after the last element of image!

  ],

  DisplayMode: {type: 'auto', pause: 6000, cycles: 1, wraparound: false},

  persist: false, //remember last police slide and recall within the same session?

  fadeduration: 2000, //transition time (in milliseconds)

  descreveal: "on demand."

  togglerid: «»

  })

  < /script >

  <! - InstanceEndEditable - >

  < link hand. CSS"rel ="stylesheet"type =" text/css"/ >

  "< link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css "rel ="stylesheet"type =" text/css"/ >

  " < script type =" text/javascript"src =" http://AJAX.googleapis.com/AJAX/libs/jQuery/1.4.2/jQuery.min.js "> < / script > .

  " < script type =" text/javascript"src =" http://s3Slider-original.googlecode.com/svn/trunk/s3Slider.js "> < / script > .

  "< script src="Spry-UI-1.7/includes/SpryDOMUtils.js "type =" text/javascript"> < / script >

  "< script src="Spry-UI-1.7/includes/SpryDOMEffects.js "type =" text/javascript"> < / script >

  "< script src="Spry-UI-1.7/includes/SpryWidget.js "type =" text/javascript"> < / script >

  "< script src="Spry-UI-1.7/includes/SpryMenu.js "type =" text/javascript"> < / script >

  "< script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js "type =" text/javascript"> < / script >

  "< script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js "type =" text/javascript"> < / script >

  < style type = "text/css" >

  / * 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: #003300;

  do-family: "Lucida Sans Unicode", "Lucida Grande", 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: bold;

  do-size: 12px;

  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: 100%;

  }

  . {MenuBarFixedCentered}

  float: none;

  Width: 100%;

  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: 0px 8px 0px 8px;

  background-color: transparent;

  border-right: 1px solid #FFF;

  border-left: 1px solid #FFF;

  }

  #MenuBar. {MenuItemFirst}

  border-style: none none no none;

  }

  #MenuBar. {MenuItemLast}

  border-style: solid none none none;

  }

  #MenuBar. MenuItem. {MenuItemLabel}

  text-align: left;

  line-height: 1.4em;

  color: #ffffff;

  background-color: transparent;

  Padding: 6px 6px 15px 15px;

  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;

  do-size: 12px;

  make-style: normal;

  background-color: transparent;

  8px padding: 0px 0px 0px;

  border-width: 1px;

  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: solid solid no solid;

  }

  #MenuBar. Submenu. MenuItemFirst. {MenuItemLabel}

  padding-top: 6px;

  }

  #MenuBar. Submenu. {MenuItemLast}

  border-style: solid solid solid solid;

  }

  #MenuBar. Submenu. MenuItemLast. {MenuItemLabel}

  padding-bottom: 6px;

  }

  #MenuBar. Submenu. MenuItem. {MenuItemLabel}

  text-align: left;

  line-height: 1em;

  background-color: transparent;

  color: #ffffff;

  padding: 5px 6px 6px 12px;

  Width: 7th;

  }

  / * Hover States for containers, objects and labels * /.

  #MenuBar. {MenuItemHover}

  background-color: transparent;

  border color: #cccccc #cccccc #cccccc #cccccc.

  }

  #MenuBar. MenuItemWithSubMenu.MenuItemHover. {MenuItemLabel}

  background-color: transparent; / * expose this propeller separately * /.

  color: #999999;

  }

  #MenuBar. MenuItemHover. {MenuItemLabel}

  background-color: transparent;

  color: #999999;

  }

  #MenuBar. Submenu. {MenuItemHover}

  background-color: #003300;

  border color: #cccccc #cccccc #cccccc #cccccc.

  }

  #MenuBar. Submenu. MenuItemHover. {MenuItemLabel}

  background-color: transparent;

  color: #999999;

  }

  / * The submenu - first-level submenus properties * /.

  #MenuBar. {SubMenuVisible}

  background-color: #003300;

  min-width: 0%;  / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.

  border-color: #ffffff #ffffff #ffffff #ffffff.

  border-width: 0px;

  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 MenuItemContainer & amp;. Align the MenuItem padding-left

  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: #003300;

  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: #999999;

  }

  . SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}

  background-color: transparent; / * expose this propeller separately * /.

  color: #999999;

  }

  . 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 * /.

  < / style >

  < script type = "text/xml" >

  <!--

  < oa:widgets >

  < oa:widget wid = binding "2141544" = "#MenuBar" / >

  < / oa:widgets >

  ->

  < /script >

  <!-InstanceBeginEditable name = "head"->

  <! - InstanceEndEditable - >

  < / head >

  < body bgcolor = "#17321A" >

  < div id = "outerWrapper" >

  < div id = "header" > < img src = "media/header.jpg" width = "960" height = "160" alt = "organica title" / > < / div > "

  < div id = "navbar" >

  < ul id = "Menu bar" >

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

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

  < ul >

  < li > < a href = "menus.html" > Menus < /a > < /li > ""

  < li > < a href = "catering.html" > Catering < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a href = "juicebar.html" > juice < /a > < /li > Bar ""

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

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

  < li > < a href = "grocery.html" > grocery store < /a > ' "

  < ul >

  < li > < a href = "packaged.html" > < /a > < /li > packaged goods ""

  < li > < a href = "refrigerated.html" > Refrigerated < /a > < /li > ""

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

  < li > < a href = "glutenfree.html" > Gluten Free < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a href = "bodycare.html" > < /a > < /li > body care

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

  < li > < a href = "contact.html" > Contact < /a > ' "

  < ul >

  < li > < a href = "directions.html" > Directions < /a > < /li > ""

  < li > < a href = "employment.html" > job < /a > < /li > ""

  < /ul >

  < /li >

  < /ul >

  < script type = "text/javascript" >

  BeginOAWidget_Instance_2141544: #MenuBar

  var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}

  widgetID: "Menu bar",

  widgetClass: 'MenuBarFullwidth the menu bar. "

  insertMenuBarBreak: true,

  mainMenuShowDelay: 100,.

  mainMenuHideDelay: 200,.

  subMenuShowDelay: 200,.

  subMenuHideDelay: 200

  });

  EndOAWidget_Instance_2141544

  < /script >

  < / div > <! - end navbar - >

  < div id = "contentWrapper" > <!-InstanceBeginEditable name = "sidebar"->

  < div id = "sidebar" >

  < h2 > Get Your Organica loyalty card < br / >

  < img src = "media/loyalty.jpg" width = "200" height = "129" alt = "fidelity" / > < / h2 > "

  < hr width = "90%" size = "1" / >

  < p >

  < style >

  . Link,

  . Link has,

  .signupframe

  {

  Color: #000000;

  do-family: Arial, Helvetica, without serif.

  font size: 13px;

  }

  . Link,

  . Link a {}

  text-decoration: none;

  }

  {.signupframe}

  border: 0px solid #000000;

  background: #ffffff;

  }

  .signupframe .required {}

  do-size: 10px;

  }

  < / style >

  < /p >

  " < form method ="post"action =" https://app.iContact.com/ICP/signup.php "name ="icpsignup"id ="icpsignup8190"accept-charset =" UTF - 8 "onsubmit =" return verifyRequired8190(); "> " "

  " < input type ="hidden"name ="redirect"value =" http://organicanaturalfoods.com/thanks.html " />

  " < input type ="hidden"name ="errorredirect' value = ' http://www.iContact.com/www/signup/error.html " />

  < div id = "Application" >

  < h2 > subscribe to our e-newsletter Organica < br / >

  Receive coupons, event and much more! < / h2 >

  < table width = "200" align = "center" class = "signupframe" border = "0" cellspacing = "0" cellpadding = "5" >

  < b >

  < td align = "center" > < input type = "text" name = "fields_email" / > < table >

  < /tr >

  < input type = "hidden" name = "listid" value = "70490" / >

  < input type = "hidden" name = "specialid:70490" value = "HHBU" / >

  < input type = "hidden" name = "clientid" value = "971128" / >

  < input type = "hidden" name = "formid" value = "8190" / >

  < input type = "hidden" name = "reallistid" value = "1" / >

  < input type = "hidden" name = "doubleopt" value = "0" / >

  < b >

  < td > < div align = "center" >

  < input type = "submit" name = "Submit" value = "Submit" / >

  < / div > < table >

  < /tr >

  < /table >

  < / div >

  < / make >

  < script type = "text/javascript" >

  var icpForm8190 = document.getElementById ('icpsignup8190');

  If (document.location.protocol = "https:")

  icpForm8190.action = " " https://app.iContact.com/ICP/signup.php ";

  function verifyRequired8190() {}

  If (icpForm8190 ['fields_email'] .value == "") {}

  icpForm8190 ["fields_email"] .focus ();

  Alert ("the Email field is required.");

  Returns false;

  }

  Returns true;

  }

  < /script >

  < p > < / p >

  < p >

  < iframe src =

  " http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood & width = 250 & colorscheme = light & show_faces = true & border_color & stream = false & header = fa lse & height = 258 "scrolling =" "frameborder ="0"style =" border: none; overflow: hidden; width: 250px; height: 258px; "allowTransparency ="true"> < / iframe >

  < /p >

  < / div >

  <! - InstanceEndEditable - > <! - end box - > <!-name = 'content'-> InstanceBeginEditable

  < div id = "content" > < div id = "slide" > < div id = "fadeshow1" > < / div > < / div >

  < / div >

  <! - InstanceEndEditable - > <! - end content - >

  < div id = "footer" >

  < a href = "index.html" > home < /a > | < a href = "about.html" > < /a > about us | < a href = "links.html" > links < /a > | < a href = "directions.html" > < /a > Directions | < a href = "employment.html" > < /a > job | < a href = "contact.html" > contact us < /a > < br / >

  All content © 2011 Organica Natural Foods | Site design: < a href ="http://nowagenewmedia.com" target = "_blank" > age now at the time of new media < /a > < br / > "

  * The statements on this site regarding dietary supplements have not been evaluated by the Food and Drug Administration. < br / >

  These products are not intended to diagnose, treat, cure or prevent a disease any. If you are pregnant, nursing, taking medication, < br / >

  or have a medical condition, consult your doctor before using these products. < / div > <! - end footer - >

  < / div > <! - end contentWrapper - >

  < / div >

  < / body >

  <! - InstanceEnd - > < / html >

  Index-z adds the 425 line tag as per

  style = "z-index: 1"> ""

  GRAMPS

• 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;

  }

• Spry menu bar: problems in IE and Firefox

  Hello! This is my first time writing the forum. I tried to fix this site and I'm about to break! I found a lot of help just brwosing here in the past and I hope that somone can point me in the right direction.

  I have validated successfully the site using the W3C CSS Validator thinking which might help, but no go. (In fact, everything what was spoil the vertical alignment of elements of menu in Safari, Chrome and other browsers in which the menu used to work properly). I tested on the latest version of Firefox for Mac and testing for IE using the Adobe browser lab.

  Here's what happens:

  • The menu is completely useless in all versions of Internet Explorer.
  • In Firefox the menu seems to work fine except the menu under flash items then disappear a site navigation very frustrating.

  Here is the site: http://oregapet.com/

  And here's my sections
  

  @charset "UTF-8";
  ul.MenuBarHorizontal {
            margin: 0;
            list-style-type: none;
            font-size: 80%;
            cursor: default;
            width:auto;
            font-family: Verdana, Geneva, sans-serif;
             [disabled]font: 11px;
  
  
            padding-top: 4px;
            font-weight: bold;
            padding-bottom: 2em;
  }
  ul.MenuBarActive {
            z-index: 1000;
  }
  ul.MenuBarHorizontal li {
            margin: 0;
            font-size: 100%;
            position: relative;
            text-align: left;
            cursor: auto;
            width: auto;
            float: left;
            background-color: #AAA;
            color: #FFF;
            padding-top: 0.3em;
            padding-right: 3.5em;
            padding-bottom: 0.3em;
            padding-left: 1em;
            min-height: 22px;
  }
  ul.MenuBarHorizontal ul {
            margin: 0;
            list-style-type: none;
            font-size: 90%;
            z-index: 1020;
            cursor: default;
            width: 0px;
            position: absolute;
            left: -1000em;
  }
  ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
            left: auto;
  }
  ul.MenuBarHorizontal ul li {
            width: 15em;
            margin-left: -12px;
             [disabled]color: #FFF;
  
  
  }
  ul.MenuBarHorizontal ul ul {
            position: absolute;
            margin: -5% 0 0 95%;
  }
  ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
            left: auto;
            top: 0px;
  }
  ul.MenuBarHorizontal ul {
            border: 0;
  }
  ul.MenuBarHorizontal a {
            display: block;
            cursor: pointer;
            background-color: #AAA;
            padding: 0.3em 0 0 0;
            color: #FFF;
            text-decoration: none;
  }
  ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
            background-color: #AAA;
            color: #FFF;
  }
  ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
            background-color: #AAA;
            color: #FFF;
  }
  ul.MenuBarHorizontal a.MenuBarItemSubmenu {
            background-repeat: no-repeat;
            background-position: 95% 50%;
            padding-top: 10px;
  }
  ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
            background-repeat: no-repeat;
            background-position: 95% 50%;
            text-decoration: none;
  }
  ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
            background-repeat: no-repeat;
            background-position: 95% 50%;
  }
  ul.MenuBarHorizontal iframe {
            position: absolute;
            z-index: 1010;
             [disabled]opacity:0.1;
  
  
             [disabled]filter:alpha(opacity=1);
    For IE8 and earlier 
  }
   @media screen, projection {
  ul.MenuBarHorizontal li.MenuBarItemIE {
            display: inline;
            f\loat: left;
            background: #FFF;
  }
  }
  
  

  Thank you very much!

  GRAMPS! Thank you very much. I really, really appreciate your help. In addition to your suggestion I changed all other instances of z-index that relate to the menu bar. I put them all to 10000 (more than the z-index of 1002 on the fadeslideshow.js). Now it works like a charm and is no longer hides behind the fadeslideshow. Yay!

  Thanks to Nancy O. for his suggestion as well. For anyone having problems woth Spry Menu bar in IE and Firefox especialy: The Spry Menu Bar 2.0 version works much better than the previous version.

  Melody