Error in IE Spry menu disappearing list Background Bug

Similar Questions

• My spry menu disappeared. Help!

  I had my spry menu all planned except for she was not quite long enough. He went doing the width correct, transparent. I see the Properties menu on the elements and in the code and the blue box is here. I can't see the menu itself in Dreamweaver or online. I can't figure out what I changed that does this.

  UL. MenuBarHorizontal
  {
  list-style-type: none;
  cursor: default;
  Width: 890
  `;
  text-align: center;
  float: left;
  z-index: 1000;
  Width: 878px;
  Clear: none;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  padding: 0px;
  Clip: rect (auto 0px auto, 0px);
  margin: 0px;
  position: relative;
  height: inherit;
  left: 147px;
  Top: 0px;
  right: 0px;
  Bottom: 0px;
  }
  / * 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;
  text-align: left;
  float: none;
  Width: auto;
  Clear: right;
  height: auto;
  }
  / * 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;
  font-size: 105%;
  text-align: center;
  cursor: pointer;
  do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
  z-index: auto;
  make-weight: normal;
  white-space: normal;
  display: block;
  Width: auto;
  height: auto;
  float: left;
  position: absolute;
  left: 315px;
  top:-310px;
  }
  / * 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;
  z index: 1020;
  cursor: default;
  Width: auto;
  left:-1000em;
  text-align: left;
  float: none;
  Clear: right;
  position: relative;
  height: auto;
  }
  / * 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
  {
  text-align: left;
  left: auto;
  Width: auto;
  Clear: right;
  float: none;
  position: relative;
  }
  / * Container of menu items are same fixed width parent * /.
  UL. MenuBarHorizontal ul li
  {
  Width: auto;
  float: none
  ! important;
  ;
  display: block;
  white-space: nowrap;
  text-align: left;
  Clear: right;
  }
  / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
  UL. MenuBarHorizontal ul ul
  {
  text-align: left;
  Width: auto;
  margin-top:-5%;
  right margin: 0;
  margin-bottom: 0;
  margin left: 95%;
  Clear: right;
  float: none;
  position: relative;
  }
  / * 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: auto;
  text-align: left;
  right: auto;
  bottom: auto;
  height: auto;
  Width: auto;
  float: none;
  Clear: right;
  }

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

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

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

  / * Submenu containers have borders on all sides * /.
  UL. MenuBarHorizontal ul
  {
  text-align: center;
  Width: auto;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  float: none;
  Padding: 0em;
  Clear: right;
  position: relative;
  }
  / * Menu items are a light grey block with padding and no text decoration * /.
  UL. MenuBarHorizontal a
  {
  display: block;
  cursor: default;
  background-color: #102842;
  text-decoration: none;
  text-align: left;
  border: inset thin #FFF.
  color: #FFF;
  letter-spacing: normal;
  Word-spacing: normal;
  Width: auto;
  list-style-type: none;
  margin: auto;
  float: none;
  padding-top: 0.25em;
  padding-right: 0.75em;
  padding-bottom: 0.75em;
  padding-left: 0.25em;
  do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
  do-size: 100%;
  Clear: right;
  position: relative;
  }
  / 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: #FFF;
  color: #102842;
  text-align: center;
  padding: 0px;
  Width: auto;
  float: none;
  }
  / * 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: #FFF;
  color: #0D8C17;
  padding: 0px;
  text-align: left;
  margin: auto;
  Width: auto;
  }

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

  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
  {
  text-align: left;
  margin: auto;
  Width: auto;
  Padding: 0.5em;
  float: none;
  Clear: right;
  position: relative;

  }
  / * 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 (SpryMenuBarRightHover.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  background-color: #102842;
  text-align: left;
  Width: auto;
  }
  / * 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: none;
  text-align: left;
  position: relative;
  Width: auto;
  }
  / * 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 (SpryMenuBarRight.gif);
  background-repeat: no-repeat;
  background-position: 50 95%;
  background-color: #FFF;
  text-align: left;
  position: relative;
  }

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

  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
  {
  z index: 1010;
  Filter:alpha(opacity:0.1);
  text-align: left;
  position: relative;
  }
  / * 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: block;
  f\loat: left;
  Background: #FFF;
  text-align: left;
  position: relative;
  Width: auto;
  }
  }

  < ul class = "MenuBarHorizontal" id = "MenuBar1" >
  < li > < a href = "#" > HOME < /a > < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > ABOUT US < /a >
  < ul >
  < li > < a href = "#" > join < /a > < /li >
  < li > < a href = "#" > photo library < /a > < /li >
  < li > < a href = "#" > contact us < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > NEWS < /a >
  < ul >
  < li > < a href = "#" > events < /a > < /li >
  < li > < a href = "#" > photo library < /a > < /li >
  < li > < a href = "#" > jobs < /a > < /li >
  < li > < a href = "#" > Hot Deals < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMUNITY
  < ul >
  < li > < a href = "#" > Scott Air Force Base < /a > < /li >
  < li > < a href = "#" > city of O'Fallon < /a > < /li >
  < li > < a href = "#" > welcome Guide O'Fallon < /a > < /li >
  < li > < a href = "#" > neighborhood restaurants Guide O'Fallon - Shiloh < /a > < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Shiloh
  < ul >
  < li > < a href = "#" > Village of Shiloh < /a > < /li >
  < li > < a href = "#" > Village Services Guide < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" > events & amp; Home Planning Guide < /a > < /li >
  < li > < a href = "#" > relocation package Info < /a > < /li >
  < li > < a href = "#" > Tourism Office Illinois South < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMITTEES
  < ul >
  < li > < a href = "#" > Board of Directors < /a > < /li >
  < li > < a href = "#" > ambassadors < /a > < /li >
  < li > < a href = "#" > investors Star < /a > < /li >
  < li > < a href = "#" > MSN < /a > < /li > Member Directory
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > CONTACT US < /a >
  < ul >
  < li > < a href = "#" > Login Member < /a > < /li >
  < li > < a href = "#" > MSN < /a > < /li > Member Directory
  < li > < a href = "#" > relocation package Info < /a > < /li >
  < li > < a href = "#" > Community Business Info < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > EVENTS < /a >
  < ul >
  < li > < a href = "#" > News < /a > < /li >
  < li > < a href = "#" > calendar < /a > < /li >
  < li > < a href = "#" > photo library < /a > < /li >
  < li > < a href = "#" > Hot Deals < /a > < /li >
  < /ul >
  < /li >
  < li > < a href = "#" class = "MenuBarItemSubmenu" > JOIN < /a >
  < ul >
  < li > < a href = "#" > MSN < /a > < /li > Member Directory
  < li > < a href = "#" > join < /a > < /li >
  < li > < a href = "#" > Hot Deals < /a > < /li >
  < li > < a href = "#" > Login Member < /a > < /li >
  < li > < a href = "#" > Community Business Info < /a >
  < br / >
  < /li >
  < /ul >
  < /li >
  < /ul >

  I added the following to the document (after the link to the sections)

  and he was able to see the menu bar.

  However, while browsing through the stylesheet, I noticed that he had been ill-treated unrecognizable. In this regard, I would recommend starting with a blank style sheet and by changing only the colors and sizes of font style rules existing. Do not add new rules, do not delete the existing rules.

  See how you go and return report problems.

• place pictures in the same div as a spry menu not as background

  Hi all

  I'm unable to find a solution to my problem, is it possible to put an image next to the ether of a spry menu, but not as a background image, I tried dragging, deletion and insertion of images but dreamwever keeps placing them armel the menu spry itself is there any way to get around this or anything that I cannot know who is logging the image beside alsong rather than the spry menu?

  Switch to code view and insert your images at the beginning and end of your Spry nav div.  Not sure if it will work as expected, but it's worth a try.

  End caps are most often added to the background.

  Nancy O.

• Spry menu dropdown list hides the link parent in IE8!

  Hello everyone. I apologize if this question has been answered, but I could not find a solution that is specifically designed to my problem. Everything works and looks great in FF, but not so much in IE8. When I hover over a link disappeared into my global navigation bar which contains a submenu, the submenu, mask or appears above the link to parent, but only in IE, as far as I noticed. I'm sure it's probably a 'hack' fix in the CSS for IE, but I have no idea where or what it is. Any help would be greatly appreciated. The following link will take you to the site. Notepad ++ allows you to open the link to the CSS files. If you need me to validate the CSS, let me know. Thanks again, everyone.

  http://ist2w.Kaplan.edu/1202A/IT245-01/ChristopherWarni/index.html

  I thought about it. Thank you!

• The Spry menu bar personalized with background Images

  Hello

  Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item?  In other words, the format individually each menu item.  I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu.  Thank you.

  Each menu item will require that this is the style and the name of the class of its own.

  Each class will have to be applied to each following anchor tag:

  • Point 1
  • Point 2
  • Point 3

  http://ALT-Web.com/demos/multi-colored-list-menu.shtml

  Nancy O.

  ALT-Web Design & Publishing

  Web | Graphics | Print | Media specialists

  http://ALT-Web.com/

• Drop-down list ADD Spry menu bar

  Hello futuristic Creative costume! It is a voice of CS3 on the past, written with a recent issue that comes to develop with our Horizontal Spry Menu. The drop-down list feature has stopped working, even if the bearings are still in tact.

  A site below is the problem child uses the same layout and menu that found on Site B, yet Site B seems to be a healthy child and active, attending the playground and kisses from girls under the Monkey bars.

  Website - www.soliusa.com

  Site B - www.solistonecommercial.com

  The two sites are in HTML and are modified with Dreamweaver CS3 v. If someone can help a diagnosis and a possible solution, I would be eternally grateful.

  Thank you for reading this far.

  Change the position of the constructor of

  TO

  In addition, be a little more critical on your markup. In the light of the foregoing, you SCRIPT, in the rest of the document, you script

  This may be nitpicking, but it does not help establish a standard. I use lowercase everywhere with the exception of defined constants.
  

• How to make my Spry Menu transparent background bar?

  I am a beginner and create my first website and just started coding for the first time today. I'm trying to do my transparent background behind the text, or at least replace the text + the background of a menu with my own photo. Is it possible that I can do as possible. You can get an overview of my problem here on my test site.

  http://visualizecontrollers.webege.com/

  I'm trying to make it similar to my design that I made in photoshop. I change it a little though of course.

  http://gyazo.com/598320901c425f5c47a8118306d8506d

  As you can see in the picture above, below the menu bar, there is a line with a small arrow pointing up under the House, don't worry about this. Will just change for each page I do.

  If you want the code, I'm going here.

  HTML/CSS

  http://pastebin.com/pZ1HWZnW

  Sections

  http://pastebin.com/9QSzgsHP

  SpryMenuBar.js

  http://pastebin.com/LzyjVuSg

  I have a backup plan if it is not possible. Can I just replace the menu with pictures that will respond as buttons when you click right align horizontal.

  If you need additional information, please let me know!

  I discovered how to change. If you have a default color as background of your Spry menu bar, simply click on the default code of the background color and then delete and leave the field blank. It will automatically make your transparent background.

• Under unsorted list stuck Spry menu bar

  I am completely new to Dreamweaver and try to use it to update an existing Web site.  I exported the Web site files on my PC.

  When I open a page in DW to edit, the Spry menu bar (which works with a horizontal drop down menu on the site) presents as an unordered list.  If I saw it, the list remains, i.e. the menus re bar does not appear.

  If I click on the button "turn off styles / we ', nothing happens.

  I would be extremely grateful for any advice as to what I can do in order to get the page in DW with the operation of menu bar.

  Thank you very much

  I wish I knew what that meant... If it's something I have to do, then please explain in detail!

  "I found this at the bottom of a page - is of the... / part of the... / SpryAssets/SpryMenuBarDownHover.gif" should also be deleted?

  RegNet are...

• I just want my image in list in bullets paragraph, and not in the spry menu?

  http://www.kansascitycrates.com/air_packs.html

  Which property is ONLY for the image in the list in a bullet of paragraph?

  I tried several different approaches and none worked until suddenly, the image in the list is in every sense.  I don't want in my menus spry menu horizontal/sup, just paragraphs in my hand/body content.

  Forgive me, I'm lost.  Thanks in advance.

  JM

  Too much

  tags in your HTML lists.  You only need a set of tags to
  as follows:
  
       
  • License & insurance
  
       
  • Uniformed personnel
  
       
  • All new materials
  
       
  • Protection floor (before, during and after the service)
  
       
  • Leg guards
  
       
  • Clear invoicing
  
       
  • Crate labels (Item description, room, Crate # of #)
  
       
  • The final inventory Crate (w/Total cubic feet)
  
       
  • Status reports (w/photos)
  
       
  • DOT commercial trucks
  
       
  • Satisfaction guaranteed!
  
  

  In your CSS, add the bottom margin between the elements of list as follows:

  .star_bullet li {}

  margin-bottom: 15px;

  }

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

• Spry Menu background images? Help, please!

  I am trying to create a horizontal model with a spry menu bar, and I don't like the form of the standard box, so I thought I'd use a background image to display a rounded rectangle gradient in CSS for the outermost container (ul. MenuBarHorizontal) and then a regular rectangle degraded (that it either with or without an abderhamanez depends on the existence of the submenus or not) in the CSS li (ul. MenuBarHorizontal li) but to my great regret, I can't have the rounded rectangle is displayed. Someone at - it suggestions?

  So, how I ended up solving this problem is I have created new classes for the different menus and was able to assign different background for new classes pictures.

• Background of the Spry menu bar problem

  Hello
  I tried to search for this problem, and although I found others with the same problem, there has been no response (probably so obvious I missed it and they understood.) And I update the Spry menu bar to the latest version.
  
  The Horizontal Spry menu bar works fine on Firefox and IE 7, the background is white and the submenus, not the intention. Alignment and size is fine, just designed background colors do not work (on the menu itself, I want a transparent background on submenus, #777079.)
  Website: September Entertainment Site
  Style sheet Spry: Spry CSS
  
  Thank you in advance for any help you can give me.
  See you soon,.
  Janell

  Hello
  Just found the problem for someone who is having the same thing happen. This is the cut down "Sections":

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

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

  Where it says: "background: fff;" change to everything that you need, in my case, "background: transparent;"

  Voila!
  See you soon,.
  Janell

• Spry Menu background

  I have a horizontal menu that is #001143 and has a white default background for the spry menu. I have looked through the CSS horizontal menu for the difficulty, but cannot locate. I need to add a property to the existing CSS menu?
  Take a look at the nav menu to see what I mean.
  
  http://www.NLF.com/learn.NET/HTML/about.html

  ich_kann_schnell_laufen wrote:
  > I thought that too. See below. I thought that it would be in the spry style sheets.
  >
  >

  bgcolor requires # as part of the value to display properly. At least for Firefox 3. IE seems to show ok for me.

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

• Green Spry menu bar. -problem adding list-image in the menu bar container

  Can anyone help - after searching the Web failure

  I want to add a single image (such as bullet points) in front of the text in a menu bar.

  And to make it a bit more 'difficult': different images for the menu outermost bars and identical images in the submenu bar - like this:

  [pic1] CLUBS

  [pic2] XXXX

  [pic2] AAAA

  [pic3] RESULTS

  [pic4] FIXTURES

  Thanks in advance for the solutions
  (perhaps also make the Spry menu?)

  Georg

  • http://www.croquet.at/img/navi-left/hoop_blue.gif "> Clubs"

    • http://www.croquet.at/img/center/bullet_ball.gif"> Salzburg.
    • http://www.croquet.at/img/center/bullet_ball.gif"> Wien.
    • http://www.croquet.at/img/center/bullet_ball.gif"> Wolkersdorf.

    Nancy O.

• 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