No replies
kweiss
Offline
newbie
Last seen: 13 years 4 days ago
Joined: 2009-06-23
Posts: 3
Points: 0

Everything looks great in Firefox and IE 8, but the footer Spry menus are off the right side of the page in IE 7. Suggestions welcome. I have the HTML, CSS and Spry CSS below. The website is www.houstonhillel.org.
Thanks for your help!

HTML

<!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" http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Houston Hillel: The Foundation for Jewish Campus Life</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../houstonhillel/houstonhillel.css" rel="stylesheet" type="text/css" />
<!-- Do not remove the line below!!!  It is required for the XML Flash Slideshow v3. -->
<script type="text/javascript" src="../houstonhillel/v3flashslideshow/slideshow.js"></script>
<script src="../houstonhillel/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../houstonhillel/SpryAssets/SpryMenuBarVerticalRight.css" rel="stylesheet" type="text/css" />
<!-- Do not remove the line below!!!  It is required for the XML Flash Slideshow v3. -->
<script type="text/javascript" src="../v3flashslideshow/slideshow.js"></script>
<!-- TemplateBeginEditable name="CSS Region" -->
<style type="text/css">
 
 
.footer  {
	background-color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #000;
	margin-top: 5px;
	padding-top: 0px;
	height: 200px;
	text-decoration: none;
	text-align: right;
	margin: 0 auto;
 
 
}
</style>
<!-- TemplateEndEditable -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('../houstonhillel/images/logofade.gif')">
 
 
 
 
<div class="container">
 
<!-- TemplateBeginEditable name="EditRegion5" -->
 
 
  <div class="header"><a href="../houstonhillel/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../houstonhillel/images/logofade.gif',1)"><img src="../houstonhillel/images/logo.gif" name="Image3" width="195" height="90" border="0" align="left" alt="Hillel Logo"/></a></div>
<!-- TemplateEndEditable -->
 
 
<!-- TemplateBeginEditable name="maincol" -->
  <div class="mainContent">
 
 
    <!-- Begin XML Flash Slideshow v3 -->
    <script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'../v3flashslideshow/slideshow.swf',w:'970',h:'365',redirect:'',usePreloader:'true',xml:'../v3flashslideshow/slideshow_data1.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%0A%20%20%3Cstyles%3E%0A%20%20%20%20%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=%2270%22%20iconWidth=%2250%22/%3E%0A%20%20%20%20%3CPreloaderLabel%20font=%22Verdana%22%20size=%2210%22%20color=%22#666666%22%20bold=%22false%22/%3E%0A%20%20%20%20%3CBackground%20backgroundColor=%22#E4E4E4%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20bevelStrength=%2270%22%20borderWidth=%220%22%20borderColor=%22#FF6600%22/%3E%0A%20%20%20%20%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%20alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22/%3E%0A%20%20%20%20%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22false%22%20labelPlacement=%22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22/%3E%0A%20%20%3C/styles%3E%0A%20%20%3Clocalization%3E%0A%20%20%20%20%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading%20Data...%22/%3E%0A%20%20%3C/localization%3E%0A%20%20%3Cfonts%3E%0A%20%20%20%20%3Cfont%20id=%22loader_text%22%20name=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22false%22%20selectable=%22false%22%20align=%22left%22/%3E%0A%20%20%3C/fonts%3E%0A%3C/slideshow%3E'});
// ]]>
    </script>
    <!-- End XML Flash Slideshow v3 -->
  </div>
 
  <!-- TemplateEndEditable -->
 
 
  <div class="footer">
 
 
    <a href="../houstonhillel/index.html" style="letter-spacing: .2em; text-decoration: none" >Houston Hillel: The Foundation for Jewish Campus Life</a>
 <hr />   
 
 
    <div class="footerleft" align="left">
 
      <ul id="MenuBar4" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="#">Jewish Life</a>
          <ul>
            <li><a href="../houstonhillel/campuses.html">Campuses</a>            </li>
            <li><a href="../houstonhillel/israel.html">Israel</a>            </li>
            <li><a href="http://www.jewstontexas.org">Jewstontexas - Grad/YP</a></li>
            <li><a href="http://www.shabbatacrosshouston.org">Shabbat Across Houston</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Calendar</a>
          <ul>
            <li><a href="../houstonhillel/falafel.html">Falafel - Weekly Email</a></li>
            <li><a href="../houstonhillel/googlecalendar.html">Google Calendar</a></li>
            <li><a href="../houstonhillel/facebookgroups.html">Facebook Groups</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Alumni &amp; Donors</a>
          <ul>
            <li><a href="../houstonhillel/alumnifacebook.html">Alumni Facebook Groups</a>            </li>
            <li><a href="../houstonhillel/newsschmooze.html">News &amp; Schmooze Email</a></li>
            <li><a href="../houstonhillel/donoropportunities.html">Donor Opportunities</a></li>
            <li><a href="../houstonhillel/donateonline.html">Donate Online</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Prospective Students</a>
          <ul>
            <li><a href="../houstonhillel/campuses.html">Campuses</a></li>
            <li><a href="../houstonhillel/visit.html">Visit Houston Hillel</a></li>
            <li><a href="../houstonhillel/staff.html">Staff</a></li>
            <li><a href="../houstonhillel/facebookgroups.html">Facebook Groups</a></li>
          </ul>
        </li>
      </ul>
    </div>
 
 
 
  <div class="footerright" align="right">
    <ul id="MenuBar3" class="MenuBarVertical">
      <li><a href="../houstonhillel/HHD.html">High Holy Day Services</a>        </li>
      <li><a href="../houstonhillel/honeysale.html">High Holy Day Honey Sale</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">About Houston Hillel</a>
        <ul>
          <li><a href="../houstonhillel/contactus.html">Contact Us</a>            </li>
          <li><a href="../houstonhillel/staff.html">Staff</a></li>
          <li><a href="../houstonhillel/facilities.html">Facilities</a></li>
          <li><a href="../houstonhillel/boards.html">Lay &amp; Student Boards</a></li>
        </ul>
      </li>
      <li><a href="../houstonhillel/donateonline.html">Donate Online</a></li>
    </ul>
  </div>
 
 
 
</div>
 
 
<!-- end .footer -->
 
 
</div>
 
 
 
<!-- end .container -->
 
 
 
<script type="text/javascript">
<!--
 
 
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
 
 
 
</body>
 
</html>

CSS

@charset "UTF-8";
body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	background-color: #FFF;
	text-align: center;
}
.container  {
	width: 970px;
	text-align: center;
	margin:0 auto;
	background-color: #FFF;
}
.mainContent  {
	background-color: #FFF;
	width: 970px;
	height: 365px;
	top: 100px;
	text-align: center;
	color: #666;
	margin: 0px;
	padding: 0px;
}
 
 
.colorblack {
	color: #000;
}
.header {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	height: 90px;
	margin-top: 5px;
	margin-bottom: 0px;
}
.footerspacing {
	letter-spacing: 0.2em;
}
 
.footerleft {
	width: 650px;
	float: left;
	font-size: 11px;
 
}
.footerright {
	width: 320px;
	vertical-align: top;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	color: #000;
	line-height: 18px;
	float: right;
}
 
 
 
a.footer:link {
	color: #000;
	text-decoration: none;
}
a.footer:visited {
	color: #000;
	text-decoration: none;
}
a.footer:hover {
	color: #666;
		text-decoration: none;
}
a.footer:active {
	color: #000;
		text-decoration: none;
}
 
 
.container .mainContent table tr td p {
	text-align: left;
}
.container .mainContent p {
	text-align: center;
}
.container .mainContent {
	color: #000;
	font-family: Tahoma, Geneva, sans-serif;
}
 
.container .mainContent tr td {
	font-weight: normal;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
}
#grey {
	color: #000;
	text-align: center;
}
 
 
 
 
.container .mainContent p {
	font-family: Tahoma, Geneva, sans-serif;
}
.container .footer a:link {
	color: #000;
}
.container .footer a:visited {
	color: #000;
}
.container .footer a:hover {
	color: #999;
}
.container .footer a:active {
	color: #000;
}
.container .mainContent #center {
	font-family: Tahoma, Geneva, sans-serif;
}
.container .mainContent table tr td strong {
	font-size: 14px;
}
.container .mainContent #grey {
	color: #000;
}
.container .mainContent p {
	text-align: left;
}
.container .mainContent a #Image2 {
	float: right;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 15px;
	clear: both;
}
.container .mainContent table tr td #Image2 {
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 15px;
}
.container .mainContent table {
	text-align: center;
}

Spry CSS

@charset "UTF-8";
 
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
 
 
ul.MenuBarVertical
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 15em;
	margin-top: 0;
	margin-right: 100px;
	margin-bottom: 0;
	margin-left: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html" rel="nofollow">http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html</a> */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 18em;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0;
	margin-left: 0;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 15em;
	left: -1000em;
	top: 0;
	margin-top: 3%;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -95%;
}
 
 
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: -6%;
}
 
.container .footer .footerleft #MenuBar4 ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	right: 60%;
}
.container .footer .footerleft #MenuBar4 li ul {
	margin-left: 95%;
	width: 30em;
}
 
.container .footer .footerleft #MenuBar4 a {
	display: block;
	cursor: pointer;
	background-color: #FFF;
	padding: 0.18em 0.75em;
	color: #000;
	text-decoration: none;
	text-align: left;
	letter-spacing: 0.2em;
	line-height: 15px;
}
 
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 18em;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 0px solid #CCC;
	margin-left: -7px;
	margin-right: 25px;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	color: #000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #FFF;
	padding: 0.18em 0.75em;
	color: #000;
	text-decoration: none;
	text-align: right;
	letter-spacing: .2em;
	line-height: 15px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #FFF;
	color: #999;
}
 
.container .footer .footerleft #MenuBar4 a:hover, a:focus
{
	background-color: #FFF;
	color: #999;
}
 
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #FFF;
	color: #999;
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
}
 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}
.container .footer .footerleft #MenuBar4 li .MenuBarItemSubmenu {
	text-align: left;
	float: none;
}
.container .mainContent table tr td strong {
	font-size: 13px;
}
.container .mainContent table tr td {
	font-size: 12px;
}
.container .mainContent table tr td {
	font-size: 13px;
	text-align: left;
	font-family: Tahoma, Geneva, sans-serif;
}
.container .mainContent {
	font-size: 13px;
	text-align: left;
	font-family: Tahoma, Geneva, sans-serif;
}