Contents of page not displaying in IE 7&8

I'm having trouble understanding why contents after the Spry Menu won't display in IE 8, and the page won't display at all in IE 7. Seems
http://nowagenewmedia.com/organica/
CSS
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
#outerWrapper {
    width: 960px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid #CCC;
#contentWrapper {
    width: 100%;
    overflow: auto;
    clear: both;
#header    {
    width: 960px;
    height: 160px;
#sidebar {
    float: left;
    width: 225px;
    height: 400px;
    background-color: #FFF;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
#content {
    float: left;
    width: 734px;
    background-color: #FFF;
#navbar {
    float: left;
    height: 35px;
    width: 960px;
    clear: both;
Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<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 */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
        MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar  {
    background-color:#003300;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: bold;
    font-size: 13px;
    font-style: normal;
    padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    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 menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar  .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;
     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar  .MenuItem {
    padding: 0px 10px 0px 10px;
    background-color:transparent;
    border-left: 1px solid #FFF;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
#MenuBar  .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar  .MenuItem  .MenuItemLabel{
    text-align:left;
    line-height:1.4em;
    color:#ffffff;
    background-color:transparent;
    padding: 6px 15px 6px 15px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu  .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    font-style: normal;
    background-color:transparent;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid none 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: 6px 12px 6px 5px;
    width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop 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;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #003300;
    min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #003300;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
* mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* 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 necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #999999;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #999999;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
</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="MenuBar">
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Organica's Kitchen</a>
      <ul>
          <li> <a href="#">Menus</a></li>
          <li> <a href="#">Catering</a></li>
      </ul>
      <li> <a href="#">Juice Bar</a></li>
      <li> <a href="#">Produce</a></li>
      <li> <a href="#">Grocery</a></li>
      <li> <a href="#">Body Care</a></li>
      <li> <a href="#">Events</a></li>
      <li> <a href="#">Contact</a></li>
      <ul>
          <li> <a href="#">Directions</a></li>
          <li> <a href="#">Employment</a></li>
      </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarFullwidth",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
  </div>
  <div id="contentWrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
  </div>
</div>
</body>
</html>

You have some unclosed tags in the html code. Below is what your code should look like from the opening <body> tag to the closing </body> tag. It's a good idea to 'comment' where your <div> tags end. In the code you will see I have done this like:  </div><!-- end navbar -->. Some people like to put the 'comment' inside the closing </div> tag like: <!-- end navbar --></div> If you then move the <div></div> the comment goes along with it.
<body bgcolor="#17321A">
<div id="outerWrapper">
  <div id="header"><img src="media/header.jpg" width="960" height="160" alt="organica title" /></div><!-- end header -->
  <div id="navbar">
  <ul id="MenuBar">
      <li> <a href="#">Home</a></li>
<li> <a href="#">Organica's Kitchen</a>
<ul>
<li> <a href="#">Menus</a></li>
<li> <a href="#">Catering</a></li>
</ul>
<li> <a href="#">Juice Bar</a></li>
<li> <a href="#">Produce</a></li>
<li> <a href="#">Grocery</a></li>
<li> <a href="#">Body Care</a></li>
<li> <a href="#">Events</a></li>
<li> <a href="#">Contact</a></li>
<ul>
<li> <a href="#">Directions</a></li>
<li> <a href="#">Employment</a></li>
</ul>
</ul>
        <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar  MenuBarFullwidth",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
    </div><!-- end navbar -->
  <div id="contentWrapper">
    <div id="sidebar">Side Bar</div><!--end sidebar -->
    <div id="content">Content</div><!-- end content -->
  </div><!-- end contentWrapper -->
</div>
</body>

Similar Messages

  • Contents of page not displaying in IE, after Spry Menu Bar 2.0

    Entire page displays in Firefox, Safari, Chrome. But in IE, nothing appears after the menu bar. Here's the link, and the code to follow:
    http://nowagenewmedia.com/organica/
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Organica Natural Foods</title>
    <link href="basic.css" rel="stylesheet" type="text/css" />
    <link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <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 */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
        these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
        .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
        You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
        with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:#003300;   
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: bold;
        font-size: 12px;
        font-style: normal;
        padding:0;   
        border-color: #999999 #999999 #999999 #999999;
        border-width:0px;
        border-style: solid solid solid solid;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 900px;
    .MenuBarFixedCentered {
        float: none;
        width: 900px;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 0px 0px 0px 0px;
        background-color:transparent;   
        border-width:1px;
        border-color: #cccccc #ffffff #cccccc #ffffff;
        border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 6px 19px 6px 19px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
        font-style: normal;
        background-color:transparent;
        padding:0px 2px 0px 0px;
        border-width:1px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: solid solid none 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: 6px 12px 6px 5px;
        width: 7em;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: transparent;
        border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop 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;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: #003300;
        min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
        border-color: #ffffff #ffffff #ffffff #ffffff;
        border-width:0px;
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                        0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with 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 width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: #003300;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * 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 necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #999999;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #999999;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body background="media/wood.jpg">
    <table width="882" border="0" align="center" cellpadding="0" cellspacing="0" class="table_main">
      <tr>
        <td height="160" colspan="2"><img src="media/header.jpg" width="900" height="160" alt="header" /></td>
      </tr>
      <tr>
        <td height="35" colspan="2" class="nav_back"><ul id="MenuBar">
          <li> <a href="#">Home</a></li>
          <li> <a href="#">Organica's Kitchen</a>
            <ul>
              <li> <a href="#">Menus</a></li>
              <li> <a href="#">Catering</a></li>
            </ul>
          </li>
          <li> <a href="#">Juice Bar</a></li>
          <li> <a href="#">Produce</a></li>
          <li> <a href="#">Supplements</a></li>
          <li> <a href="#">Grocery</a></li>
          <li> <a href="#">Body Care</a></li>
          <li> <a href="#">Events</a></li>
          <li> <a href="#">Contact</a></li>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
          widgetClass: "MenuBar  MenuBarFixedCentered",
          insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
          </script></td>
      </tr>
      <tr>
        <td width="211" height="400" class="left"><h2>Sign-up for our Loyalty Card<br />     
        <img src="media/loyalty.jpg" width="200" height="129" alt="loyalty" /></h2>
          <hr width="90%" />
          <h2>Subscribe to our e-News
            <style>
    .link,
    .link a,
    .signupframe
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        .link,
        .link a {
            text-decoration: none;
        .signupframe {
            border: 0px solid #000000;
            background: transparent;
    .signupframe .required {
        font-size: 10px;
            </style>
          </h2>
          <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="SignUp">
    <table width="200" class="signupframe" border="0" cellspacing="0" cellpadding="5">
        <tr>
          <td align="left">
            <div align="center">
              <input name="fields_email" type="text" value="Your Email Here..." />
            </div></td>
        </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" />
        <tr>
          <td><div align="center">
            <input type="submit" name="Submit" value="Submit" />
          </div></td>
        </tr>
        </table>
    </div>
    </form>
          <p>
      <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.");
        return false;
    return true;</script></p>
          <hr width="90%" />
          <h2>Find us on Facebook
            <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood&width=200&colorscheme=light&show_faces=false&border_color&stream=false&header=f alse&height=100" scrolling="No" frameborder="0" style="border:none; overflow:hidden; width:200px; height:100px;" allowtransparency="true"></iframe>
        </h2>
        <h2> </h2></td>
        <td width="663" class="right"><h1>Welcome to Organica!</h1>
        <p>&quot;A Natural Organic Market&quot;, Organica provides fresh organic produce,  whole foods, groceries, persihibles, frozen foods, natural body care,  pet foods, cleaning products and more. <br />
          <br />
          Shop our vitamin  department for a wide varitey of supplements, protein shakes,  probiotics, herbs, and products from our top-of-the-line vitamin  companies.<br />
          <br />
        Don't forget to visit our renowned Natural Gourmet  Prepared Food Department, where all foods are prepared fresh daily. You  will be able to find all your needs for breakfast, lunch, dinner or your  next party! </p></td>
      </tr>
      <tr>
        <td colspan="2" class="footer">About Us | Links | Employment | Contact Us<br />
          All contents ©2011 Organica Natural Foods, Inc. | Site Design: Now Age New Media</td>
      </tr>
    </table>
    </body>
    </html>

    Win 7.
    I see the entire page here in IE9, IE8 (Compatibility View), Firefox and Chrome.

  • After upgrade to 4.0, the controls on mymsn page do not work and several of my content items are not displayed.

    The stock quotes, fox sports and movie times content fields do not display and the controls do not work on any of content boxes. The customize and add content tabs do nothing. This all worked with 3.6 but not with 4.0.

    A column in the search results was changed to a Simple Checkbox when we upgraded to 4.0 (it has always been a checkbox in the older APEX versions). When I put it back to Standard Report Column I no longer get the page not found error.
    Is there some additional/different setting I need to do in order to use the simple checkbox option in a search results set?
    ETA: I see now that Checkboxes are not intended to work in standard report regions so I'll change them to LOVs or something and my problem should be solved.
    Edited by: mimi_jones on Jul 18, 2011 6:16 AM

  • BBC One Highlights page not displaying content of its panes

    Why does the BBC One Highlights page not display the content of its panes?

    There seems to be something up with their javascript that produces slightly different image url's than on other browsers.
    Instead of something like this:
    http://ichef.bbci.co.uk/images/ic/336x189/legacy/episode/b03ggg2z.jpg 
    it's producing say
    http://ichef.bbci.co.uk/images/ic/336x0/legacy/episode/b03ggg2z.jpg 
    which doesn't exist.

  • Pages not displaying properly in Publisher instances as we activated the page from Author

    HI All,
    Pages not displaying properly in Publisher instances as we activated the page from Author. In author it is working well but in Pulisher it is showing first 2 lines of the page and then showing error as
    Apache sling/2.2 Hot Spot ****** Sun OS error
    Please help me on this.IS this issue with the templates or components are we using?

    Ok, then let's go the long way and try to reduce the number of possible root causes:
    1) Is your problem reproducible on this publish? (I suppose it is)
    2) Is it reproducible on other publishs as well, which have received the same page with the same application?
    3) Can you reproduce it on other replicated pages as well?
    4) When you upload a page to such an affected publish via a content package, does this page render correctly?
    5) Does this problem appear on other environments as well?
    6) Do you use dispatcher when you get this result? Or do you get it when you request the page directly of CQ5?
    7) What's the HTTP statuscode when you render this page? You can see it in the request.log of CQ5.
    If you change logging via Felix Console, you don't need to restart the instance.
    kind regards,
    Jörg

  • In Portal Content admin Role "Portal content" folder is not displaying

    Hi,
          I created a user in EP and assign Only Content admin Role. But in portal content area "Portal content "folder is not displaying.
    Can someone help me the process steps to achieve it?
    Thanks,
    kundan

    It is because the user has no proper permissions  to the porta content folder.
    you should give atleast read permission to the portal content folder to the content_admin role or to the users who have content admin role.
    also make sure the end user check box is checked at the time of giving permissions.
    Otherwise give eevryone group as read permisisons to the portal content folder. then you can see the portal content folder with read permissiosn only.
    Raghu
    Edited by: Raghavendranath Garlapati on Sep 1, 2009 9:32 AM

  • Major Problem - some pages not displaying correctly

    All,
    I have a problem with some pages not displaying correctly i.e.
    SE80 navigation page
    F1 help
    I am using XP sp2 and we have the latest version of internet explorer 7 (which I cannot uninstall as it is company policy)
    SAP version is 6.4c.
    I am using SAP Gui 7.10 with the latest patch 710_7.
    This is making the system completely unusable for me.
    I have read a few forum posts mentioning that upgrading to the latest patch version will resolve this problem, but this clearly has not worked for me.
    Can someone please help,  how do I actually esculate this to SAP?
    <REMOVED BY MODERATOR>
    thanks
    Edited by: Alvaro Tejada Galindo on Apr 8, 2008 4:07 PM

    what kind of useless answer was that?  If you have no constructive comments to add please refrain.
    I am a SAP developer in ABAP and its related to SE80 which I used to use primarily for editing code (i now have to use se38).
    I often use F1 for hints on code etc to use and syntax so it does make it very difficult for me.  If there is a more appropriate forum for this please direct me, instead of posting in gibberish english.
    Max - I assume you have the same problem and it is also not resolved by the latest patch.  I wonder is there a way this can be esculated with SAP?
    Edited by: Steve Trillo on Apr 4, 2008 10:43 AM

  • Login action buttons no longer work and some pages not displaying correctly after upgrade.

    After recent update, some web pages not displaying correctly and Login buttons on some sites do not work. I've updated my plugins and restarted computer, but problems remains. Is this Java, Javascript or something else? Same pages are working fine in IE.

    Please update the firefox to the latest version of firefox 26
    Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
    <b> To Enable SafeMode </b>
    *You can open Firefox 4.0+ in Safe Mode by holding the '''Shift''' key when you open the Firefox desktop or Start menu shortcut.
    * Or open the Help menu and click on the '''Restart with Add-ons Disabled...''' menu item while Firefox is running.
    [[Image:FirefoxSafeMode|width=520]]
    ''Once you get the pop-up, just select "'Start in Safe Mode"''
    [[Image:Safe Mode Fx 15 - Win]]
    If it works in Safe Mode and in normal mode with all extensions (Tools > Add-ons > Extensions) disabled then try to find which extension is causing it by enabling one extension at a time until the problem reappears.
    Close and restart Firefox after each change via "Firefox > Exit" (Windows: Firefox/File > Exit; Mac: "Firefox > Quit Firefox"; Linux: "Firefox/File > Quit")
    * https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

  • Large product page not displaying correctly on responsive webpage.

    Large product page not displaying correctly on responsive webpage. Not really sure what to adjust or correct.
    http://iamartde.businesscatalyst.com/apparel-1/i-am-art-sweatshirt-white

    Hi,
    I think it may be <div class="html5gallery-viral-0"> (contains the social media buttons) // screencasteu.worldsecuresystems.com/AP/2013-08-01_1033.png
    It's the only element that isn't in sync with the other elements on page, when compared to home.html for example.
    Kind Regards,
    Alex Pavelescu

  • 'Access is denied' error in ESS iViews & Page not displayed' thru. internet

    Hi,
      We are implementing <b>ESS(Webdynpro)/MSS(Java)</b>.
      We are in EP6 SP13.
      We want to put our portal on internet through SSL.
    I have installed SAP Webdispatcher and configured it to support SSL. SAP webdispatcher is installed on a DMZ machine(hostname: SAPROUTER).
    <i>webdispatcher ports:</i>
    http port: 80
    https port: 8443
    1) When i try to access the portal from the DMZ machine (where the webdispatcher is installed) using <b>https://saprouter.domainname.net:8443/irj/portal</b>, i am able to see all the iViews.. but, i am getting '<b>access is denied</b>' error(in the status bar) when i try to click on any link in ESS iViews (for ex: working time, Employee search).. when i try to double click i am getting javascript:void(0)
    2) When i try to access the portal through internet(<b>https://<ipaddress>:8443/irj/portal</b>), I get the logon page and after logging in... i am not able to see the ESS and Transaction iViews .. getting 'Page cannot be displayed' error.
    When i am able to see the iViews in the DMZ machine.. why are they not being displayed when i access through internet??
    Can any1 help me in this regard?? What am i missing ??
    Awaiting your reply.
    Regards,
    SK.

    It’s a hot topic I think,
    Where facing the exact same problems.
    When we logon ‘LOCAL’ to the Portal the iview works. (Not true the internet / DMZ)
    But when we logon true the webdispatcher we get the Portal Layout, so the dispatcher works.
    But the WEBdynpro Iview gives the error -> ‘Page not displayed'
    And when we edit the file “hosts” on the pc of the client browser and fill in the hostname of the SAP Portal the Iview works…..???
    There are no ports closed on the firewall, everything is allowed.
    Can anyone tell me of it’s necessary to edit the Web Dynpro Runtime Environment. Here are some settings for the WEBdispatcher but I can’t get it working.
    -     sap.webdispatcher.host           = Defines the host of a used Web Dispatcher
    -     sap.webdispatcher.port            = Defines the port of a used Web Dispatcher
    -     sap.webdispatcher.protocol      = Defines the protocol of a used Web Dispatcher
    See the link -> http://help.sap.com/saphelp_nw04s/helpdata/en/43/8a1a8ece230c8ce10000000a11466f/frameset.htm
    When I activate the trace on the webdispatcher
    (D:webdispsapwebdisp.exe pf=D:webdispsapwebdisp.pfl -t 2)
    In the Tracefile I can see that the webdispatcher resolves the SAP portal system. That’s was aleady confirmed by seeing the portal framework from the client. I think that the WEBdynpro’s have to be remote activated, or some addition settings in the webdispatcher.
    If somebody get an idée I really would like to know it.
    Best regards,
    Edwin

  • Pulisher CUCM web page not display

    Hello,
    Publisher cucm web page not displayed and DB not accessible IP phones working on Subscriber but I can't change any settings.Cisco Tomcat service not working and I can't restarting. (ver. 7.1.5)

    If you cannot change any config then it's more than just not being able to use a webpage, there must be some problem with the ccm/DB services on the PUB.
    SSH to the server and see if there are error messages, I'd suggest a whole reboot.
    HTH
    java
    If this helps, please rate
    www.cisco.com/go/pdihelpdesk

  • SharePoint 2013 site coll's created. Home page not displaying for any site collection in farm

    SharePoint 2013 site coll's created. Home page not displaying. Same issue for all site coll's in the farm. Done the basic checks. Any Ideas?

    Hi lakshita,
    Would you please check whether you can go to the page:
    http://siteurl/_layouts/settings.aspx page:
    http://siteurl/default.aspx page? If so, go to Site Features in site settings page, reactivate the Wiki Page home page feature, check the result.
    If not, please check whether there is related information in ULS log and event viewer log file? Does the page shows page not found or other errors? Check whether the site can be opened in other machine?
    Thanks,
    Qiao Wei
    TechNet Community Support

  • Content in the page not displaying in full width

    Hello everyone,
    We have a EP 2004s SR1 Portal with customized framework page and display theme.
    When logged on to the protal, the first page(say home page) was displaying by leaving some width at right of that page (approximately the width is equal to scroll bar width). For remaining pages this is not the case...it is displaying properly i.e displaying with full width covered.
    and one more thing is, this is happending in Production and QA machines...For Development machine it is working fine.
    Could any one help me in this...
    Thanks in advance
    Regards
    Sunil Chiluveru

    In your style.css on line 187 you have this.  Remove the max-width.
    .section > .content {
        background-image: url('../images/frame/contentBg.png');
        max-width: 800px;
        padding: 4%;
        text-align: justify;
        color: #646462;
        overflow: auto;
    Nancy O.

  • Web page not displaying properly - content in wrong place

    It's been years since I've done html and this is the first time using Dreamweaver.  All my pages have the same header then a horizontal row of link buttons.  I have used Divs to create 3 sections of content underneath this.  Each div has the following defined for it: #Div { position:absolute; width:913px; height:440px; z-index:1; left: 10px; top: 302px; My main page is not displaying properly.  There is a section on the left with text/photo.  To the right of this section, there is a second div containing an image map.  In Dreamweaver, I preview the page (using Chrome) and it looks fine.  However, when I upload it to the web site and then view that page in the web site, the second div is thrown to the upper top right of the page.  I do not know what is causing this and how to fix it.  Can anyone answer this and perhaps give me some tips?

    Start by fixing your HTML errors.  You have a significant number of them.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fgivethegaveltotavel.com%2F
    Also, you have some CSS errors.
    W3C CSS Validator results for http://givethegaveltotavel.com/ (CSS level 2.1)
    Position:absolute is never a good way to layout your web pages.  For 98% of what you do, positioning is not required and should be avoided.  Learn to use CSS margins, padding and floats to align elements where desired.
    CSS margin property.
    CSS padding property
    CSS Float
    Nancy O.

  • Google web page not displaying correctly

    Since updating to v24.0 of Firefox (desktop) the Google web page does not display correctly.
    If I use the IE tab 2 in FF or even IE10, I see the pagwe in it's full 'glory' including the black menu bar across the top were you can select Gmail or Calendar etc etc
    However, in FF (without using the IE Tab 2) this menu bar across the top of the page does not display ... and to add insult to injury ... some web links o certain pages don't seem to want to work either !!!!
    Anyone know what's gone wrong here as I can't figure it out ?!?!?!
    Thanks

    Whenever my Google UI changes drastically, I clear all my Google cookies and usually that fixes it. Sometimes I have to do that AND restart Firefox.
    If you haven't already tried it... When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
    (1) Bypass Firefox's Cache
    Use Ctrl+Shift+r to reload the page fresh from the server.
    Alternately, you also can clear Firefox's cache completely using:
    orange Firefox button (or Tools menu) > Options > Advanced
    On the Network mini-tab > Cached Web Content : "Clear Now"
    If you have a large hard drive, this might take a few minutes.
    (2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:
    * right-click and choose View Page Info > Security > "View Cookies"
    * Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"
    In the dialog that opens, you can remove the site's cookies individually.
    Then try reloading the page. Does that help?

Maybe you are looking for