The page content will not be displayed in IE 7 & 8

I'm going to understand problems why content after the Spry Menu will not display in IE 8, and the page appears at all in IE 7. Seems

http://nowagenewmedia.com/Organica/

CSS

* {
vertical-align: baseline;
Police-weight: inherit;
do-family: inherit;
font style: inherit;
do-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
{#outerWrapper}
Width: 960px;
margin-top: 10px;
margin-right: auto;
left margin: 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 / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
" < html xmlns =" http://www.w3.org/1999/xhtml ">
< head >
< meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
< title > Untitled Document < /title >
< 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 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;
font size: 13px;
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 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 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;
padding: 0px 2px 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 padding-left MenuItemContainer & MenuItem align
the drop-down menu to the left of the menu item label.*.
z-index: 10;
}
#MenuBar.MenuBarVertical. {SubMenuVisible}
Top: 0px;
left: 100%;
min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
}
/ * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
#MenuBar. MenuLevel1. {SubMenuVisible}
background-color: #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 >
< / 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 = "#" > home < /a > < /li >
< li > < a href = "#" > Organica kitchen < /a >
< ul >
< li > < a href = "#" > Menus < /a > < /li >
< li > < a href = "#" > Catering < /a > < /li >
< /ul >
< li > < a href = "#" > Bar juice < /a > < /li >
< li > < a href = "#" > produce < /a > < /li >
< li > < a href = "#" > grocery store < /a > < /li >
< li > < a href = "#" > < /a > < /li > body care
< li > < a href = "#" > events < /a > < /li >
< li > < a href = "#" > Contact < /a > < /li >
< ul >
< li > < a href = "#" > Directions < /a > < /li >
< li > < a href = "#" > job < /a > < /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 >
< div id = "contentWrapper" >
< div id = "sidebar" > < / div >
< div id = "content" > < / div >
< / div >
< / div >
< / body >
< / html >

You have some tags not closed in the html code. Here's what your code should look like the openingtag to the closingtag. It's a good idea to 'comment' where your

end of tags. In the code, you will see that I did this like:

. Some people like to put "comment" inside the closing like tag: If you move it then

the comment goes with it.